Invalid "+" symbol used in generated CSS Module class name "Window_container__se0+Y"

[mikeaustin]

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(R) Core(TM) 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

[mikeaustin]

"CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_)"

https://www.w3.org/TR/CSS2/syndata.html

[alexander-akait]

You should escape selectors before passing to document.querySelector, js and css identifiers are different

[mikeaustin]

Can you explain how to escape a selector? Using CSS.escape() doesn't seem to help.

> document.querySelector('.' + CSS.escape('Window_container__se0+Y1'))
null

> CSS.escape('Window_container__se0+Y1')
'Window_container__se0\\+Y'

[alexander-akait]

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

[yangjocy]

However, you couldn't escape @keyframes used in animation. That is generated by css-loader as well.

[alexander-akait]

@yangjocy Can you provide example of the problem?

[yangjocy]

Not easy to reproduce, but I have this screenshot - I have a keyframe named slideIn, you could see the hash contains a + and it invalidates the animation for both show and hide class.

[alexander-akait]

oh, it is bug, we should not generate +, what is version of css-loader? And can you reproduce it locally, so we will try to debug it

[yangjocy]

Yes I can try to reproduce it locally, just reset the code and libraries to the corresponding version.
Our configuration is a bit more nested. We use getCSSModuleLocalIdent()(v12.0.0) to implement getLocalIdent(), which depends on loader-utils to generate hash, the same dep as yours to generate hash.

[alexander-akait]

Oh, I am afraid bug in CRA, can you locally try to remove it and check?

[yangjocy]

I don't think it's just CRA. This exact issue is hash could contain invalid + and is regarding css-loader, my case just proves such bug could be harmful.

[alexander-akait]

So I want investigate where we generate + and fix the problem

[yangjocy]

Get it, sorry for misunderstanding. If I replace react-dev-utils with localIdentName, the issue is gone, but we don't know whether it's because the code is correct, or because the input parameter for hash is different - react-dev-utils uses same function but different parameters for hash from yours.
I found below code in this repo, and I'm thinking maybe add one more replace() to deal with +?

    localIdentHash = (localIdentHash + hash.digest(hashDigest))
      // Remove all leading digits
      .replace(/^\d+/, "")
      // Replace all slashes with underscores (same as in base64url)
      .replace(/\//g, "_")
      // Remove everything that is not an alphanumeric or underscore
      .replace(/[^A-Za-z0-9_]+/g, "")
      .slice(0, hashDigestLength);

[alexander-akait]

We don't generate + inside, so we don't need to replace it, I am afraid if we add this, it will be internally, so any external functions should do the same

[yangjocy]

+ is an valid character in general hash strings, it's just specifically invalid for CSS names. So it makes sense to replace it in a CSS name generator.