• Operating System: Mac OS X
• Node Version: 11.15.0
• NPM Version: 6.7.0
• webpack Version: 4.41.2
• css-loader Version: 3.2.0

Expected Behavior

Emoji in nested class names should always work.

Actual Behavior

Nested emoji class names do not work as expected. See explanation below.

Code

I made a project for minimum reproduction: https://github.com/gera2ld/css-loader-bug

// webpack.config.js
// here is the css-loader part
      {
        test: /\.module\.css$/,
        use: {
          loader: 'css-loader',
          options: {
            modules: {
              localIdentName: '[emoji]',
            },
          },
        },
      },

And the CSS file style.module.css:

.a {
  color: red;
}
.a .b {
  color: green;
}

How Do We Reproduce?

After yarn build, we will get CSS like this (embedded in dist/main.js):

".\\1F4FF {\n  color: red;\n}\n.\\1F4FF .\\1F366 {\n  color: green;\n}\n"

To make it look better:

.\1F4FF {
  color: red;
}
.\1F4FF .\1F366 {
  color: green;
}

Open dist/index.html, and we will find color: green does not work. Tested in Chrome and Firefox.

According to the W3C document:

A "real" space after the escape sequence must be doubled.

That is the problem. .\1F4FF .\1F366 is actually the same as .\1F4FF.\1F366 (without the white space), so it does not work. I tried adding an extra space, .\1F4FF .\1F366 (with two spaces) worked as expected.