-
-
Notifications
You must be signed in to change notification settings - Fork 552
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSS modules doesn't handle combined :local() and :global() modifiers #4801
Comments
This turns out to be a wider problem than I first realised, and in fact any time a |
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 |
@JSerFeng can you help check out, whether rspack supports this now? |
I tried out a bumped 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 |
Thanks ! |
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! |
bump |
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! |
@glenjamin you can use css-loader and rspack.ExtractCssRspackPlugin to work around this problem now |
oh nice, I didn't realise I ended up changing all of our CSS to avoid this issue and was able to get rspack working 👍 |
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
Current output
Expected output
I was able to work around this by replacing the input line with one of the following
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?
The text was updated successfully, but these errors were encountered: