Change `styled()` types so that it works with libraries like Framer Motion
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 413
- PR merge metrics
- No merged PRs in 30d
Description
## Describe the enhancement
When extending custom components, Linaria's types require that component to have the `style` prop [[link]](https://github.com/callstack/linaria/blob/master/docs/BASICS.md#styling-custom-components) (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]](https://github.com/callstack/linaria/blob/master/packages/react/src/styled.ts#L117-L118) (which is fair),
2. Framer Motion's `style` prop to be an _extension_ of `CSSProperties` allowing for passing motion values to `styles` [[link]](https://github.com/framer/motion/blob/main/packages/framer-motion/src/motion/types.ts#L305).
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` 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.
Contributor guide
Assessment
This issue has not been assessed yet.