Support defining all class selector of the component at once?

[tofrankie]

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:

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:

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

• Assign css template literals to an object's key (#138)
• Astroturf's Scoped StyleSheets

[espretto]

I can see how your proposal would require less switching between CSS and JS syntax when writing styles but how would you make this type-safe? Will typescript actually complain if styles.box was misspelled? Would a simple rename to styles.container keep the stylesheet in sync? I haven't worked with astroturf yet but I doubt this would work. And if type-safety is not a concern, css-modules are surely the better choice for this style of writing css.