Mixing multiple classes with nested selectors can lead to undesired output

[andrezzoid]

Mixing multiple classes in an element with the cx function oftentimes seems to lead to classes being merged into one big class with all the styled mixed together.

An example can be seen in the screenshot below where the top element had two classes applied to it, title and bigTitle, now merged together into a single class. The bottom element had only the title class applied to it.

This behaviour can ruin the expected output when, for instance, nested & selectors are applied, such as

&+& {
  color: red
}

In this scenario, & is expected to be title and it is expected to be applied to the bottom element. Given the above mentioned behaviour, it won't work because there are no longer 2 contiguous elements with class title.

I've cooked a simple reproduction example here: https://codesandbox.io/s/suspicious-sara-ou8303?file=/src/App.js

Thank you so much for you work, I've been using this library a lot lately!

[garronej]

Hi @andrezzoid,

Thanks for reaching out and puting together a clear reproduction repo.

Best I can do from where I stand is offer you to use TSS's nested selector featur.

See it implemented on your sandbox:
typescript version: https://codesandbox.io/s/romantic-gates-l1jc89?file=/src/App.tsx
vanilla js: https://codesandbox.io/s/youthful-stitch-ns87uf?file=/src/App.js

Beyond that, tss-react, and it's it's main seling point, is meerly a wrapper arout @emotion/react. If you want we can ping Adarist, see what's he's insignt on the issue if the nested selector approach dosen't work for you.

Best,

PS: Be aware that you need to provide a uniq id to your stylesheet when using nested selector in a SSR setup.