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

callstack / linaria

Zero-runtime CSS in JS library

https://linaria.dev

MIT License

11.69k stars 417 forks source link

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

Open kuworking opened 4 years ago

kuworking commented 4 years ago

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

turadg commented 4 years ago

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).

kuworking commented 4 years ago

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?)