callstack / callstack/linaria

Object Style syntax

Open
#686 4 comments 29 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

## Describe the enhancement
Coming from `emotion`, I miss being able to define my styles as a JS object, like so:
```js
const myStyle = css({
fontSize: "1.2rem",
});
```
It makes a big difference to me, especially when trying to write abstractions that work with styles.

## Motivation
I have some utility styles that look like this (which `linaria` supports!):
```js
export const fullWidth = {
width: "100%",
[theme.mediaQueries.medium]: {
width: "45rem",
},
[theme.mediaQueries.large]: {
width: "56rem",
},
}
```
But then I can't write the final styles as an object. I have to interpolate them into a template string, which makes my styles inconsistent across the code base.
```js
const myStyle = css`
${fullWidth}
`;
```

## Possible implementations
I'm not sure; it seems like this library is tied to how template strings work. Is it straightforward to support at all?

## Related Issues
It seems like this was last discussed several months ago in #464, is it still infeasible?

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.