linaria
linaria copied to clipboard
Change `styled()` types so that it works with libraries like Framer Motion
Describe the enhancement
When extending custom components, Linaria's types require that component to have the style
prop [link] (kudos for setting that requirement in the type system - really helpful and solid 💪).
This works with usual custom components, but fails to work with e.g. Framer Motion. I believe this is a result of 2 things:
- Linaria requiring the
styles
prop to beCSSProperties
[link] (which is fair), - Framer Motion's
style
prop to be an extension ofCSSProperties
allowing for passing motion values tostyles
[link].
Granted, the problem lies probably more on the FM's extension of styles
, but I figured it'd be easier for Linaria to relax the styles
type requirement, considering that (if I understand correctly) the only purpose that Linaria requires styles
is for is setting the custom properties. So the type could be relaxed to a mere Record<string, unknown>
maybe?
Motivation
Framer Motion is a great animation library with an api allowing for fantastic components composition/extension with the api that Linaria (and similar css-in-js libs) provide. Would be great if Linaria's types worked with it seamlessly, just like e.g. Styled Components' types do.