fix: handle [emoji] property

Author: evilebottnawi

package.json

@@ -49,15 +49,15 @@
     "postcss": "^7.0.23",
     "postcss-modules-extract-imports": "^2.0.0",
     "postcss-modules-local-by-default": "^3.0.2",
-    "postcss-modules-scope": "^2.1.0",
+    "postcss-modules-scope": "^2.1.1",
     "postcss-modules-values": "^3.0.0",
     "postcss-value-parser": "^4.0.2",
-    "schema-utils": "^2.5.0"
+    "schema-utils": "^2.6.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.7.0",
-    "@babel/core": "^7.7.2",
-    "@babel/preset-env": "^7.7.1",
+    "@babel/cli": "^7.7.4",
+    "@babel/core": "^7.7.4",
+    "@babel/preset-env": "^7.7.4",
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
     "@webpack-contrib/defaults": "^5.0.2",
@@ -68,14 +68,14 @@
     "del": "^5.1.0",
     "del-cli": "^3.0.0",
     "es-check": "^5.1.0",
-    "eslint": "^6.6.0",
+    "eslint": "^6.7.1",
     "eslint-config-prettier": "^6.7.0",
     "eslint-plugin-import": "^2.18.2",
-    "file-loader": "^4.3.0",
+    "file-loader": "^5.0.2",
     "husky": "^3.1.0",
     "jest": "^24.9.0",
     "jest-junit": "^9.0.0",
-    "lint-staged": "^9.4.3",
+    "lint-staged": "^9.5.0",
     "memory-fs": "^0.5.0",
     "npm-run-all": "^4.1.5",
     "postcss-loader": "^3.0.0",
@@ -85,7 +85,7 @@
     "sass-loader": "^8.0.0",
     "standard-version": "^7.0.1",
     "strip-ansi": "^6.0.0",
-    "url-loader": "^2.3.0",
+    "url-loader": "^3.0.0",
     "webpack": "^4.41.2"
   },
   "keywords": [

test/__snapshots__/modules-option.test.js.snap

@@ -6446,6 +6446,125 @@ exports.locals = {
 
 exports[`modules issue #980: warnings 1`] = `Array []`;
 
+exports[`modules issue #995: errors 1`] = `Array []`;
+
+exports[`modules issue #995: module (evaluated) 1`] = `
+Array [
+  Array [
+    1,
+    "/* class=\\"😀\\" */
+.a {
+  color: red;
+}
+
+/* class=\\"😀 😓\\" */
+.a.b {
+  color: red;
+}
+
+/* class=\\"😀\\" > class=\\"😓\\" */
+.a .b {
+  color: red;
+}
+
+/* class=\\"😀\\" */
+.😀 {
+  color: red;
+}
+
+/* class=\\"😀 😓\\" */
+.😀.😓 {
+  color: red;
+}
+
+/* class=\\"😀\\" > class=\\"😓\\" */
+.😀 .😓 {
+  color: red;
+}
+
+/* class=\\"😀\\" */
+.\\\\1F600 {
+  color: red;
+}
+
+/* class=\\"😀 😓\\" */
+.\\\\1F600.\\\\1F613 {
+  color: red;
+}
+
+/* class=\\"😀\\" > class=\\"😓\\" */
+.\\\\1F600  .\\\\1F613 {
+  color: red;
+}
+
+/* Local */
+
+/* class=\\"😀\\" */
+.\\\\1F600 {
+  color: red;
+}
+
+/* class=\\"😀 😓\\" */
+.\\\\1F600.\\\\1F600 {
+  color: red;
+}
+
+/* class=\\"😀\\" > class=\\"😓\\" */
+.\\\\1F600  .\\\\1F600 {
+  color: red;
+}
+
+.\\\\1F600  .a .\\\\1F600 {
+  color: red;
+}
+
+.\\\\1F600  .\\\\1F600  .\\\\1F600 {
+  color: red;
+}
+
+div:not(.\\\\1F600) {
+  color: red;
+}
+
+.\\\\1F600  .b {
+  color: red;
+}
+
+.b .\\\\1F600 {
+  color: red;
+}
+
+.\\\\1F613  .\\\\1F600 {
+  color: red;
+}
+
+.\\\\1F613 .\\\\1F600 {
+  color: red;
+}
+
+.\\\\1F600 > .\\\\1F600 > .\\\\1F600 {
+  color: red;
+}
+",
+    "",
+  ],
+]
+`;
+
+exports[`modules issue #995: module 1`] = `
+"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
+// Module
+exports.push([module.id, \\"/* class=\\\\\\"😀\\\\\\" */\\\\n.a {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀 😓\\\\\\" */\\\\n.a.b {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀\\\\\\" > class=\\\\\\"😓\\\\\\" */\\\\n.a .b {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀\\\\\\" */\\\\n.😀 {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀 😓\\\\\\" */\\\\n.😀.😓 {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀\\\\\\" > class=\\\\\\"😓\\\\\\" */\\\\n.😀 .😓 {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀\\\\\\" */\\\\n.\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀 😓\\\\\\" */\\\\n.\\\\\\\\1F600.\\\\\\\\1F613 {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀\\\\\\" > class=\\\\\\"😓\\\\\\" */\\\\n.\\\\\\\\1F600  .\\\\\\\\1F613 {\\\\n  color: red;\\\\n}\\\\n\\\\n/* Local */\\\\n\\\\n/* class=\\\\\\"😀\\\\\\" */\\\\n.\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀 😓\\\\\\" */\\\\n.\\\\\\\\1F600.\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\\\n/* class=\\\\\\"😀\\\\\\" > class=\\\\\\"😓\\\\\\" */\\\\n.\\\\\\\\1F600  .\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\\\n.\\\\\\\\1F600  .a .\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\\\n.\\\\\\\\1F600  .\\\\\\\\1F600  .\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\\\ndiv:not(.\\\\\\\\1F600) {\\\\n  color: red;\\\\n}\\\\n\\\\n.\\\\\\\\1F600  .b {\\\\n  color: red;\\\\n}\\\\n\\\\n.b .\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\\\n.\\\\\\\\1F613  .\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\\\n.\\\\\\\\1F613 .\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\\\n.\\\\\\\\1F600 > .\\\\\\\\1F600 > .\\\\\\\\1F600 {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\"]);
+// Exports
+exports.locals = {
+	\\"a\\": \\"😀\\",
+	\\"b\\": \\"😀\\",
+	\\"c\\": \\"😀\\"
+};"
+`;
+
+exports[`modules issue #995: warnings 1`] = `Array []`;
+
 exports[`modules should accepts all arguments for getLocalIdent option: errors 1`] = `Array []`;
 
 exports[`modules should accepts all arguments for getLocalIdent option: locals 1`] = `

test/fixtures/modules/issue-995.css

@@ -0,0 +1,93 @@
+/* class="😀" */
+.a {
+  color: red;
+}
+
+/* class="😀 😓" */
+.a.b {
+  color: red;
+}
+
+/* class="😀" > class="😓" */
+.a .b {
+  color: red;
+}
+
+/* class="😀" */
+.😀 {
+  color: red;
+}
+
+/* class="😀 😓" */
+.😀.😓 {
+  color: red;
+}
+
+/* class="😀" > class="😓" */
+.😀 .😓 {
+  color: red;
+}
+
+/* class="😀" */
+.\1F600 {
+  color: red;
+}
+
+/* class="😀 😓" */
+.\1F600.\1F613 {
+  color: red;
+}
+
+/* class="😀" > class="😓" */
+.\1F600  .\1F613 {
+  color: red;
+}
+
+/* Local */
+
+/* class="😀" */
+:local(.a) {
+  color: red;
+}
+
+/* class="😀 😓" */
+:local(.a.b) {
+  color: red;
+}
+
+/* class="😀" > class="😓" */
+:local(.a .b) {
+  color: red;
+}
+
+.\1F600  .a .\1F600 {
+  color: red;
+}
+
+:local(.a .b .a) {
+  color: red;
+}
+
+div:not(:local(.a)) {
+  color: red;
+}
+
+:local(.a) .b {
+  color: red;
+}
+
+.b :local(.a) {
+  color: red;
+}
+
+.\1F613  :local(.a) {
+  color: red;
+}
+
+.\1F613 :local(.a) {
+  color: red;
+}
+
+:local(.a) > :local(.b) > :local(.c) {
+  color: red;
+}

test/fixtures/modules/tests-cases/issue-589/source.css

@@ -1,4 +1,4 @@
 body:before {
   content: '';
-  background: url('~!!file-loader!./img.png');
+  background: url('~!!file-loader?esModule=false!./img.png');
 }

test/helpers.js

@@ -150,6 +150,7 @@ const moduleConfig = (config) => {
                   loader: 'file-loader',
                   options: config.fileLoaderOptions || {
                     name: '[name].[ext]',
+                    esModule: false,
                   },
                 },
               },

test/modules-option.test.js

@@ -532,4 +532,28 @@ describe('modules', () => {
     expect(stats.compilation.warnings).toMatchSnapshot('warnings');
     expect(stats.compilation.errors).toMatchSnapshot('errors');
   });
+
+  it('issue #995', async () => {
+    const config = {
+      loader: {
+        options: {
+          modules: {
+            mode: 'global',
+            localIdentName: '😀',
+          },
+        },
+      },
+    };
+    const testId = './modules/issue-995.css';
+    const stats = await webpack(testId, config);
+    const { modules } = stats.toJson();
+    const module = modules.find((m) => m.id === testId);
+
+    expect(module.source).toMatchSnapshot('module');
+    expect(evaluated(module.source, modules)).toMatchSnapshot(
+      'module (evaluated)'
+    );
+    expect(stats.compilation.warnings).toMatchSnapshot('warnings');
+    expect(stats.compilation.errors).toMatchSnapshot('errors');
+  });
 });