Styled Linaria Components

## Describe the feature

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

```tsx
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