fix: handle [emoji] property

Author: evilebottnawi

package-lock.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,23 +68,24 @@
     "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.0.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",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^1.19.1",
     "sass": "^1.23.7",
-    "sass-loader": "^7.1.0",
+    "sass-loader": "^8.0.0",
     "standard-version": "^7.0.1",
     "strip-ansi": "^6.0.0",
+    "url-loader": "^3.0.0",
     "webpack": "^4.41.2"
   },
   "keywords": [

package.json

@@ -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/__snapshots__/loader.test.js.snap

@@ -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/__snapshots__/modules-option.test.js.snap

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

test/fixtures/modules/issue-995.css

@@ -142,16 +142,19 @@ const moduleConfig = (config) => {
                   : []
               ),
           },
-          config.additionalLoader ? config.additionalLoader : {},
-          {
-            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
-            use: {
-              loader: 'file-loader',
-              options: {
-                name: '[name].[ext]',
+          config.disableFileLoader
+            ? {}
+            : {
+                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
+                use: {
+                  loader: 'file-loader',
+                  options: config.fileLoaderOptions || {
+                    name: '[name].[ext]',
+                    esModule: false,
+                  },
+                },
               },
-            },
-          },
+          config.additionalLoader ? config.additionalLoader : {},
         ],
   };
 };
@@ -170,15 +173,16 @@ function compile(fixture, config = {}, options = {}) {
   // webpack Config
   // eslint-disable-next-line no-param-reassign
   config = {
-    mode: 'development',
+    mode: config.mode || 'development',
     devtool: config.devtool || 'sourcemap',
     context: path.resolve(__dirname, 'fixtures'),
     entry: path.resolve(__dirname, 'fixtures', fixture),
     output: outputConfig(config),
     module: moduleConfig(config),
     plugins: pluginsConfig(config),
     optimization: {
-      runtimeChunk: true,
+      minimize: false,
+      runtimeChunk: false,
     },
     resolve: {
       alias: {

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

@@ -164,4 +164,65 @@ describe('loader', () => {
     expect(stats.compilation.warnings).toMatchSnapshot('warnings');
     expect(stats.compilation.errors).toMatchSnapshot('errors');
   });
+
+  it('using together with "sass-loader"', async () => {
+    const config = {
+      loader: { test: /\.s[ca]ss$/i },
+      sassLoader: true,
+      sassLoaderOptions: {
+        // eslint-disable-next-line global-require
+        implementation: require('sass'),
+      },
+    };
+    const testId = './scss/source.scss';
+    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');
+  });
+
+  it('should work with ModuleConcatenationPlugin (file-loader)', async () => {
+    const stats = await webpack('basic.js', {
+      mode: 'production',
+      fileLoaderOptions: {
+        name: '[name].[ext]',
+        esModules: true,
+      },
+    });
+
+    expect(stats.compilation.assets['main.bundle.js'].source()).toMatchSnapshot(
+      'assets'
+    );
+    expect(stats.compilation.warnings).toMatchSnapshot('warnings');
+    expect(stats.compilation.errors).toMatchSnapshot('errors');
+  });
+
+  it('should work with ModuleConcatenationPlugin (url-loader)', async () => {
+    const stats = await webpack('basic.js', {
+      mode: 'production',
+      disableFileLoader: true,
+      additionalLoader: {
+        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            name: '[name].[ext]',
+            esModules: true,
+          },
+        },
+      },
+    });
+
+    expect(stats.compilation.assets['main.bundle.js'].source()).toMatchSnapshot(
+      'assets'
+    );
+    expect(stats.compilation.warnings).toMatchSnapshot('warnings');
+    expect(stats.compilation.errors).toMatchSnapshot('errors');
+  });
 });