Skip to content

any plans css support? #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
satispunk opened this issue Sep 4, 2017 · 4 comments
Closed

any plans css support? #19

satispunk opened this issue Sep 4, 2017 · 4 comments

Comments

@satispunk
Copy link

satispunk commented Sep 4, 2017

css is not yet supported?

impot {css} from 'styled-components'

const styles = css`
  color: red
`
@undeadcat
Copy link
Contributor

What result are you experiencing?
It was intended to be supported.
But I see now that your sample has invalid red code highlights.
image

This is because it currently assumes the string to contain a complete declaration.

Could any of the styled-components experts, perhaps @daedlock, since you reviewed my PR when we added initial support clarify: is css`` intended to be used for whole css declarations, including selectors?

const styles2 = css`
div {
    color: red
}
another {
    margin:5px
}
`

or sets of properties?

const styles = css`
  color: red

IIRC correctly I've seen both kinds of usages?
Depending on that there either should or should not be a prefix/suffix added to the injected text.

@daedlock
Copy link
Member

daedlock commented Sep 4, 2017

Yes, AFAIK, css and injectGlobal selectors should contain complete declaration as . Please confirm @mxstbr

@mxstbr
Copy link
Member

mxstbr commented Sep 4, 2017

Not quite true. css is used like styled.x:

const styleFragment = css`
  color: blue;
`

const Button = styled.div`
  background: red;
  ${styleFragment}
`

That is the most widely used usage.

Note though that both can (but don't have to!) also contain full CSS declarations for nesting:

const styleFragment = css`
  color: blue;
  
  // Any div within a component that has this style fragment will be red
  div {
    color: red;
  }
`

const Button = styled.div`
  background: red;
  ${styleFragment}
  
  // Any span within this button will be blue
  span {
    background: blue;
  }
`

(excuse the nonsensical example)

@undeadcat
Copy link
Contributor

Ok, thanks, I assumed it was expected to contain a complete declaration and was wrong.
Created a PR to fix this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants