callstack / callstack/linaria

Add support for interpolation

Open
#1,460 4 comments 2 reactions 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

Why is interpolation only supported for CSS object properties and not for `css` literals?

```ts
import { css } from '@linaria/core';

// REQUIRED:

const fontMedium = {
fontSize: '24px',
fontWeight: 'bold'
}

// WANTED:

// const fontMedium = css`
// font-size: 24px;
// font-weight: bold;
// `

const button = css`
${fontMedium}

color: #862e9c;
border: 1px solid;
border-radius: 4px;
padding: 0.5rem 1rem;

&:hover,
&:focus {
color: #be4bdb;
}
`;

export const Button = (props) => {
return ;
};
```

Why do we need to use two completely different syntaxes to interpolate CSS properties?

I would very much like to stick with one syntax.

Using multiple classes is not really a great option for something like typographies either - I'd very much like to have the button declaration include the typography, and manually reusing the 5-10 properties required for a complete typography is not really a good option either.

Using multiple classes works (`cx`) but is not a great option either - I would very much prefer if the button styles were self-contained, residing in a single declaration, not spread between two classes.

Is there a reason this isn't practical or can't be done?

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.