Support defining all class selector of the component at once?

Author: tofrankieCreated Jan 30, 2023Updated Mar 26, 2025

Labelsneeds: triage 🏷feature: proposal 💬

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:

javascript

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 = () => (
  <div className={styles.box}>
    <button className={styles.btn}>Click me</button>
  </div>
)

linaria has similar methods like:

javascript

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 = () => (
  <div className={styles.box}>
    <button className={styles.btn}>Click me</button>
  </div>
)

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

Source: callstack/linaria

View original on GitHub View discussion on GitHub