CSS modules doesn't handle combined :local() and :global() modifiers

[glenjamin]

System Info

System:
OS: macOS 12.7
CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
Memory: 34.80 MB / 32.00 GB
Shell: 5.1.8 - /usr/local/bin/bash
Binaries:
Node: 18.8.0 - ~/.asdf/installs/nodejs/18.8.0/bin/node
npm: 8.18.0 - ~/.asdf/installs/nodejs/18.8.0/bin/npm
Browsers:
Chrome: 119.0.6045.159
Edge: 119.0.2151.72
Firefox: 120.0
Safari: 17.0
npmPackages:
@rspack/cli: ^0.4.0 => 0.4.0
@rspack/core: ^0.4.0 => 0.4.0

Details

The following CSS selector is parsed incorrectly compared to css-loader's CSS modules implementation

:local(.dropMenuPicker):global(.open) > ul {

Current output

.dropMenuPicker---_2602:global(.open---e4058) > ul {

Expected output

.dropMenuPicker---_2602.open > ul {

I was able to work around this by replacing the input line with one of the following

:global :local(.dropMenuPicker).open

.dropMenuPicker:global(.open) > ul {

Reproduce link

No response

Reproduce Steps

See examples above.

As a related aside, I couldn't see an obvious way to validate CSS module transforms other than creating a bundle and looking at the resulting CSS file - is that the expected approach?

[glenjamin]

This turns out to be a wider problem than I first realised, and in fact any time a :local or :global modifier appears without a preceeding space it is not detected by the CSS modules parser

[glenjamin]

I did some research into this, TIL that SWC supports CSS!

Anyway, it looks like someone else found this first, reported it upstream, and the latest SWC version has a fix for this

swc-project/swc#8219

[hardfist]

@JSerFeng can you help check out, whether rspack supports this now?

[glenjamin]

I tried out a bumped swc_core against a dev build of rspack and found that although swc-project/swc#8219 is related, it doesn't fix use of multiple modifiers in one selector, eg. :local(.a):local(.b) still doesnt work.

This is a slightly unusual thing to see, but it appears in our codebase because we're using SCSS and the way selectors are being combined produces that sort of expression. I might have to try changing all of our CSS to avoid this.

I'm still going to report this as a new bug against SWC, as it's technically not meeting the CSS modules spec, and I'll link to here again once that's done.

edit: new SWC bug 8394

[JSerFeng]

Thanks !

[stale]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[xc2]

bump

[stale]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[hardfist]

@glenjamin you can use css-loader and rspack.ExtractCssRspackPlugin to work around this problem now

[glenjamin]

@glenjamin you can use css-loader and rspack.ExtractCssRspackPlugin to work around this problem now

oh nice, I didn't realise ExtractCssRspackPlugin was a thing now.

I ended up changing all of our CSS to avoid this issue and was able to get rspack working 👍