css-loader: Invalid "+" symbol used in generated CSS Module class name "Window_container__se0+Y"

Bug report

Actual Behavior

An invalid “+” symbol is used in generated CSS Module class names, such as “Window_container__se0+Y”. Using document.querySelector(‘Window_container__se0+Y’) returns null, when other class names without “+” are found.

Expected Behavior

All classes referenced by JS such as ‘styles.container’ should be accessible via document.querySelector(). document.querySelector(‘Window_container__se0+Y’) returns null because it parses it as an adjacent-sibling operator.

How Do We Reproduce?

It may be difficult to reproduce because the class-names are auto-generated. I’m using “react-scripts”: “5.0.0”, which seems to be using css-loader “version”: “6.5.1” when looking at the node_modules/css-loader/package.json.

Please paste the results of `npx webpack-cli info` here, and mention other relevant information

System: OS: macOS 12.1 CPU: (4) x64 Intel® Core™ i5-8210Y CPU @ 1.60GHz Memory: 184.51 MB / 16.00 GB Binaries: Node: 14.18.1 - /usr/local/bin/node npm: 6.14.15 - /usr/local/bin/npm Browsers: Chrome: 97.0.4692.99 Chrome Canary: 100.0.4859.0 Firefox: 95.0.2 Safari: 15.2 Safari Technology Preview: 15.4

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 27 (12 by maintainers)

Most upvoted comments

Yes, it should works, can you provide example - class in CSS and js code?

I thought the example code would be sufficient. It creates a class named “Window_container__se0+Y”, which cannot be looked up by document.querySelector(). The function of the class seems to work, meaning the CSS is applied correctly.

mikeaustin on Feb 12, 2022