fix: improve locals generation for scoped packages

Author: alexander-akait

src/utils.js

@@ -96,20 +96,17 @@ function normalizePath(file) {
   return path.sep === "\\" ? file.replace(/\\/g, "/") : file;
 }
 
+// filename reserved characters + control characters + dots + `@` for scoped packages
 // eslint-disable-next-line no-control-regex
-const filenameReservedRegex = /[<>:"/\\|?*]/g;
-// eslint-disable-next-line no-control-regex
-const reControlChars = /[\u0000-\u001f\u0080-\u009f]/g;
+const unallowedCharacters = /[<>:"/\\|?*\u0000-\u001f\u0080-\u009f.@]/g;
 
 function escapeLocalIdent(localident) {
   // TODO simplify in the next major release
   return escape(
     localident
       // For `[hash]` placeholder
       .replace(/^((-?[0-9])|--)/, "_$1")
-      .replace(filenameReservedRegex, "-")
-      .replace(reControlChars, "-")
-      .replace(/\./g, "-")
+      .replace(unallowedCharacters, "-")
   );
 }
 

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

@@ -4338,25 +4338,27 @@ exports[`"modules" option should work with \`@\` character in scoped packages: m
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../../../../src/runtime/api.js\\";
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, \\".modules-issue-1223-\\\\\\\\@foo-bar--myClass {\\\\n    color: red;\\\\n}\\", \\"\\"]);
+___CSS_LOADER_EXPORT___.push([module.id, \\".modules-issue-1223--foo-bar--myClass {\\\\n    color: red;\\\\n}\\", \\"\\"]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
-	\\"myClass\\": \\"modules-issue-1223-@foo-bar--myClass\\"
+	\\"myClass\\": \\"modules-issue-1223--foo-bar--myClass\\"
 };
 export default ___CSS_LOADER_EXPORT___;
 "
 `;
 
-exports[`"modules" option should work with \`@\` character in scoped packages: result 1`] = `
-Array [
-  Array [
-    "./modules/issue-1223/@foo/bar/index.module.css",
-    ".modules-issue-1223-\\\\@foo-bar--myClass {
-    color: red;
-}",
-    "",
-  ],
-]
+exports[`"modules" option should work with \`@\` character in scoped packages: module 2`] = `
+"// Imports
+import ___CSS_LOADER_API_IMPORT___ from \\"../../../../../../src/runtime/api.js\\";
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, \\".modules-issue-1223-foo-bar--myClass {\\\\n    color: red;\\\\n}\\", \\"\\"]);
+// Exports
+___CSS_LOADER_EXPORT___.locals = {
+	\\"myClass\\": \\"modules-issue-1223-foo-bar--myClass\\"
+};
+export default ___CSS_LOADER_EXPORT___;
+"
 `;
 
 exports[`"modules" option should work with \`@\` character in scoped packages: warnings 1`] = `Array []`;

test/fixtures/modules/issue-1223/foo/bar/index.module.css

@@ -0,0 +1,3 @@
+.myClass {
+    color: red;
+}

test/fixtures/modules/issue-1223/issue-1223.js

@@ -1,5 +1,6 @@
-import css from './@foo/bar/index.module.css';
+import css1 from './@foo/bar/index.module.css';
+import css2 from './foo/bar/index.module.css';
 
-__export__ = css;
+__export__ = [css1, css2];
 
-export default css;
+export default [css1, css2];

test/modules-option.test.js

@@ -1484,9 +1484,13 @@ describe('"modules" option', () => {
     expect(
       getModuleSource("./modules/issue-1223/@foo/bar/index.module.css", stats)
     ).toMatchSnapshot("module");
-    expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot(
-      "result"
-    );
+    expect(
+      getModuleSource("./modules/issue-1223/foo/bar/index.module.css", stats)
+    ).toMatchSnapshot("module");
+    // TODO uncomment after drop webpack v4
+    // expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot(
+    //   "result"
+    // );
     expect(getWarnings(stats)).toMatchSnapshot("warnings");
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });