linaria icon indicating copy to clipboard operation
linaria copied to clipboard

Section in the docs about (practical) differences with @emotion or styled-components

Open kuworking opened this issue 4 years ago • 2 comments

As a user of @emotion that is about to start a migration to linaria, I have no clear idea of whether something I am doing with emotion I won't be able to do with linaria

After reading the docs it looks to me that I'll be able to do exactly the same, but at the same time I'm sure this won't be the case

So it would be great to have a small section explaining what are the limitations of linaria versus other non-zero-runtime CSS in JS libraries

kuworking avatar Aug 24 '20 18:08 kuworking

That sounds useful. A porting guide perhaps even more so.

If you share some examples from Emotion that you need to port over, maybe the Linaria community can explain how each case would be achieved with Linaria (or not).

turadg avatar Aug 24 '20 18:08 turadg

So far, I've found two differences

  • It seems that Linaria cannot handle a styled(Link) (Link from Gatsby), which I've solved by using a styled.a with an as={Link}

  • It also seems that you cannot use props outside of a classic css structure

width: ${props = props.hi}; /* it works */
${props => props.myStyles} /* doesn't work */
${props => (props.commonScale ? 'width: min-content;justify-items: center;' : '')} /* doesn't work */

(is this the case?)

kuworking avatar Aug 25 '20 09:08 kuworking