getCSSModuleLocalIdent may cause unexpected behavior when using moduled CSS class names in querySelector

Describe the bug

Use getLocalIdent: getCSSModuleLocalIdent in css-loader option may cause unexpected behavior when using moduled CSS class names in querySelector.

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

getCSSModuleLocalIdent

Environment

webpack

Steps to reproduce

(Write your steps here:)

1. Use exactly the same webpack config in readme.

const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');

// In your webpack config:
// ...
module: {
  rules: [
    {
      test: /\.module\.css$/,
      use: [
        require.resolve('style-loader'),
        {
          loader: require.resolve('css-loader'),
          options: {
            importLoaders: 1,
            modules: {
              getLocalIdent: getCSSModuleLocalIdent,
            },
          },
        },
        {
          loader: require.resolve('postcss-loader'),
          options: postCSSLoaderOptions,
        },
      ],
    },
  ];
}

1. Write the following codes in app

import styles from '../someStyle.css'

document.querySelector('.' + styles.foo);

function Component() { 
  return <div className={styles.foo} />
}

1. Hopes for the luck. In some rare cases, styles.foo may includes character + and querySelector will throw error or return null.

Expected behavior

return value of getCSSModuleLocalIdent doesn’t includes +.

Actual behavior

return value of getCSSModuleLocalIdent may includes +.

Reproducible demo

Checkout my forks https://github.com/tychenjiajun/create-react-app/commit/28d10e6c3c8e71d33c4b6c5ed3c23e1600b1daf9 In the test cases, if input class name is ‘class1020’, the output class name will be file_class1020__V+98r. Using this class name inquerySelector causes error, see https://codepen.io/chankcccc/pen/MWEmxpZ

[pstrh]

I also run into this issue. My solution is to use “base64url” instead of “base64” as digestType parameter in getHashDigest. base64url was introduced with nodejs 14. As I just raised #12013 regarding css modules hash collisions I can offer to fix the issue there.

BTW I wonder why this issue just appears now.

[Hew007]

I also run into this issue, used CSS.escape() to resolve, waitting cra fixed