Support defining all class selector of the component at once?
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 413
- PR merge metrics
- No merged PRs in 30d
Description
**The following discussion focuses on business scenarios, rather than writing component library.**
## Describe the feature
Does linaria support defining all class selector for a component at once?
Similar to the `stylesheet` method of [astroturf](https://astroturfcss.github.io/astroturf/introduction):
```js
import { stylesheet } from 'astroturf'
const styles = stylesheet`
.box {
width: 100%;
height: 50px;
}
.btn {
width: 80%;
heigth: 100%;
margin: 0 auto;
border: 1px solid #4096ff;
}
`
const Button = () => (
Click me
)
```
`linaria` has similar methods like:
```js
import { css } from '@linaria/core'
const styles = {
box: css`
width: 100%;
height: 50px;
`,
btn: css`
width: 80%;
heigth: 100%;
margin: 0 auto;
border: 1px solid #4096ff;
`,
}
const Button = () => (
Click me
)
```
If a component has many styles, you need to add a lot of `` prop: css`xxx` ``, which is cumbersome and not elegant.
## Motivation
As above.
In business scenarios, it is very common for a component to have multiple class selector.
## Possible implementations
...
## Related Issues
* [Assign css template literals to an object's key (#138)](https://github.com/callstack/linaria/issues/138)
* [Astroturf's Scoped StyleSheets](https://astroturfcss.github.io/astroturf/introduction)
Contributor guide
Assessment
This issue has not been assessed yet.