Support merging CSS for more convenient reuse of CSS.

[s97712]

Describe the feature

Support merging CSS for more convenient reuse of CSS.

Motivation

Possible implementations

const glass = css`
  backgroup: white;
`
const Btn = styled(Button)`
  ${glass.styles}
  backgroup: black;
`

Related Issues

[espretto]

Hi,

looking at how linaria works I don't think this is possible with any reasonable amount of effort. Being a code-mod/-transform, linaria will replace css`...` with a generated class name and it is that class name - a simple string - that should be reused by either passing it to <Btn className={glass} /> or <Button className={cx(css`background: black`, glass)} />.

I am not saying it's not possible at all but I'd rather not see linaria introduce the complexity required to implement what is already supported by other syntactic flavours.

Should you primarily aim for code reuse in the output, have a look at linaria's docs on atomic CSS.