Object Style syntax
- 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
Assessment
This issue has not been assessed yet.