callstack / callstack/linaria

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

Open
#1,417 3 comments 1 reaction 0 assignees View on GitHub
enhancement: proposal 💬 needs: triage 🏷
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.