linaria icon indicating copy to clipboard operation
linaria copied to clipboard

Change `styled()` types so that it works with libraries like Framer Motion

Open jalooc opened this issue 7 months ago • 1 comments

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:

  1. Linaria requiring the styles prop to be CSSProperties [link] (which is fair),
  2. Framer Motion's style prop to be an extension of CSSProperties allowing for passing motion values to styles [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.

jalooc avatar Jul 12 '24 20:07 jalooc