swc icon indicating copy to clipboard operation
swc copied to clipboard

CSS modules don't handle chaining of exception modifiers

Open glenjamin opened this issue 2 years ago • 0 comments

Describe the bug

Similar, but distinct from #8179

When combining :local and/or :global without spaces, the parser doesn't recognise them and the modifier is not interpreted

I appreciate this is a little odd, this has appeared in our codebase in two ways:

during a migration from configuring mode: global to mode: local, where we didn't remove the :local() modifiers

when using SCSS to build up selectors, eg.

:local(.a) {
  &:local(.b) {
  }
}

I'm pretty sure all of our code can be changed to produce the same output CSS with a syntax that can be handled by the current version of SWC, but I wanted to report this anyway for completeness.

Input code

:local(.a):global(.b) {
  color: red
}

Config

No response

Playground link (or link to the minimal reproduction)

https://github.com/glenjamin/swc/commit/67d28143b31aa325575204f63375cc4b759b4d90

SWC Info output

No response

Expected behavior

The directives should be applied to their respective parts of the selector and compiled away

.__local__a.b {
  color: red;
}

See demo on lightningcss https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Atrue%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22%3Alocal(.a)%3Aglobal(.b)%20%7B%5Cn%20%20color%3A%20red%5Cn%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

Actual behavior

.__local__a:global(.__local__b) {
  color: red
}

Version

main

Additional context

I was hoping to have a go at fixing this myself using #8219 as a guide, but it looks like the bug begins in the parser, as I'm not getting a PseudoClass match for the second mode switch

glenjamin avatar Dec 06 '23 18:12 glenjamin