callstack / callstack/linaria

Support defining all class selector of the component at once?

Open
#1,196 1 comment 0 reactions 0 assignees View on GitHub
feature: proposal 💬 needs: triage 🏷
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

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.