Styled Linaria Components

[jantimon]

Describe the feature

What do you think about an approach which would allow to toggle class names and inject css variables like this?

const Title = styled.h1<{ x: number; children: React.ReactNode }>`
  display: block;
  ${styleWhen(({ x }) => x % 2 === 0, `color: red;`)}
  position: relative;
  top: ${cssVar(({ x }) => `${x}px`)};
`;

It's totally possible with typescript and might work very well with the upcoming css nesting proposal:

https://codesandbox.io/s/yacijs-p0xt3m?file=/src/App.tsx:111-315

Motivation

This idea would allow to connect css classes with any complex logic.
The runtime code would only keep the logic and the class names.

Possible implementations

https://codesandbox.io/s/yacijs-p0xt3m?file=/src/App.tsx:111-315

[Anber]

The dynamic styling in Linaria is based on css variables, but they are suitable only for property values. So… it's just impossible to implement your approach.

Something similar has been discussed here #244

[jantimon]

as shown in the POC it is totally possible by pregenerating class names - soon we will have native css class nesting which would make that even easier

[Anber]

Your PoC requires parse styles to create a list of class names. It means that if we want to interpolate or wrap a styled component in another styled, we will have to evaluate its styles, whereas now we can just use a pre-generated class name. It is slow. However, we already do it in atomic. I'll keep this issue open for future discussion.

[jantimon]

thank you for reopening the discussion and for further insights why this might not be a good idea 👍

I guess you are right - one very hard problem might be the order when wrapping components - or do you see any further issues?

[Anber]

After giving it more consideration, I believe we can still utilize pre-generated class names for referencing and compositions. This will prevent us from having to do additional work during the evaluation stage. Therefore, your approach appears to be viable.