feat: do not hash localName if the localName is inlined:

Remove senseless .modules.hashStrategy = "omit-local-name"
webpack-contrib · Jan 27, 2022 · 976ff89 · 976ff89
1 parent 8e93b75
commit 976ff89
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 229 deletions.
diff --git a/README.md b/README.md
@@ -874,14 +874,13 @@ module.exports = {
 
 ##### `hashStrategy`
 
-Type: `'use-local-name' | 'omit-local-name' | 'auto'`
+Type: `'use-local-name' | 'auto'`
 Default: `'use-local-name'`
 
 Should local name be used when computing the hash.
 
-- `'auto'` Auto detect based on [localIdentName](#localidentname). Use this value to get the output that is better compressable by GZIP or Brotli.
 - `'use-local-name'` Each identifier in a module gets its own hash digest.
-- `'omit-local-name'` All identifiers from the same module shares the same hash digest. Handle with care!
+- `'auto'` Identifiers from the same module shares the same hash digest if it's possible. Use this value to optimize the output for better GZIP or Brotli compression.
 
 **webpack.config.js**
 

diff --git a/src/options.json b/src/options.json
@@ -117,7 +117,7 @@
             "hashStrategy": {
               "description": "Allows to specify should localName be used when computing the hash.",
               "link": "https://github.com/webpack-contrib/css-loader#hashstrategy",
-              "enum": ["use-local-name", "omit-local-name", "auto"]
+              "enum": ["use-local-name", "auto"]
             },
             "localIdentRegExp": {
               "description": "Allows to specify custom RegExp for local ident name.",

diff --git a/src/utils.js b/src/utils.js
@@ -336,22 +336,11 @@ function defaultGetLocalIdent(
     path.relative(context, resourcePath)
   );
 
-  let useLocalNameInHash;
-  switch (hashStrategy) {
-    case "omit-local-name":
-      useLocalNameInHash = false;
-      break;
-    case "auto":
-      useLocalNameInHash = !/\[local\]/.test(localIdentName);
-      break;
-    default:
-      // undefined or "use-local-name"
-      useLocalNameInHash = true;
-  }
   // eslint-disable-next-line no-param-reassign
-  options.content = useLocalNameInHash
-    ? `${relativeResourcePath}\x00${localName}`
-    : relativeResourcePath;
+  options.content =
+    hashStrategy === "auto" && /\[local\]/.test(localIdentName)
+      ? relativeResourcePath
+      : `${relativeResourcePath}\x00${localName}`;
 
   let { hashFunction, hashDigest, hashDigestLength } = options;
   const matches = localIdentName.match(

diff --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap
@@ -3777,196 +3777,6 @@ Array [
 
 exports[`"modules" option should work and respect the "hashStrategy" = "auto" and no [local]: warnings 1`] = `Array []`;
 
-exports[`"modules" option should work and respect the "hashStrategy" = "omit-local-name": errors 1`] = `Array []`;
-
-exports[`"modules" option should work and respect the "hashStrategy" = "omit-local-name": module 1`] = `
-"// Imports
-import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../../../src/runtime/noSourceMaps.js\\";
-import ___CSS_LOADER_API_IMPORT___ from \\"../../../../src/runtime/api.js\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
-// Module
-___CSS_LOADER_EXPORT___.push([module.id, \\".iHMJbI42 {\\\\n  background: red;\\\\n}\\\\n\\\\n.iHMJbI42 {\\\\n  background: blue;\\\\n}\\\\n\\\\n.iHMJbI42 {\\\\n  background: red;\\\\n}\\\\n\\\\n#iHMJbI42 {\\\\n  background: green;\\\\n}\\\\n\\\\n.iHMJbI42 .iHMJbI42 {\\\\n  color: green;\\\\n}\\\\n\\\\n#iHMJbI42 .iHMJbI42 {\\\\n  color: blue;\\\\n}\\\\n\\\\n.iHMJbI42 {\\\\n  color: red;\\\\n}\\\\n\\\\n.iHMJbI42 {\\\\n  margin-left: auto !important;\\\\n  margin-right: auto !important;\\\\n}\\\\n\\\\n.iHMJbI42 {\\\\n  margin-left: auto !important;\\\\n  margin-right: auto !important;\\\\n}\\\\n\\\\n/* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.iHMJbI42 {\\\\n  color: aqua;\\\\n}\\\\n\\\\n/* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n.iHMJbI42 {\\\\n  color: aliceblue;\\\\n}\\\\n\\\\n/* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#iHMJbI42 {\\\\n  color: antiquewhite;\\\\n}\\\\n\\\\n/* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#iHMJbI42 {\\\\n  color: azure;\\\\n}\\\\n\\\\n/* matches the element with id=\\\\\\"©\\\\\\" */\\\\n#iHMJbI42 {\\\\n  color: black;\\\\n}\\\\n\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n.iHMJbI42 { background: lime; }\\\\n\\\\n.iHMJbI42 {\\\\n  background: hotpink;\\\\n}\\\\n\\\\n.iHMJbI42 {\\\\n  background: hotpink;\\\\n}\\\\n\\\\n.iHMJbI42 {\\\\n  background: hotpink;\\\\n}\\\\n\\\\n.iHMJbI42 {\\\\n  background: hotpink;\\\\n}\\\\n\\", \\"\\"]);
-// Exports
-___CSS_LOADER_EXPORT___.locals = {
-	\\"123\\": \\"iHMJbI42\\",
-	\\"test\\": \\"iHMJbI42\\",
-	\\"_test\\": \\"iHMJbI42\\",
-	\\"className\\": \\"iHMJbI42\\",
-	\\"someId\\": \\"iHMJbI42\\",
-	\\"subClass\\": \\"iHMJbI42\\",
-	\\"-a0-34a___f\\": \\"iHMJbI42\\",
-	\\"m_x_@\\": \\"iHMJbI42\\",
-	\\"B&W?\\": \\"iHMJbI42\\",
-	\\":\`(\\": \\"iHMJbI42\\",
-	\\"1a2b3c\\": \\"iHMJbI42\\",
-	\\"#fake-id\\": \\"iHMJbI42\\",
-	\\"-a-b-c-\\": \\"iHMJbI42\\",
-	\\"©\\": \\"iHMJbI42\\",
-	\\"♥\\": \\"iHMJbI42\\",
-	\\"😍\\": \\"iHMJbI42\\",
-	\\"“‘’”\\": \\"iHMJbI42\\",
-	\\"☺☃\\": \\"iHMJbI42\\",
-	\\"⌘⌥\\": \\"iHMJbI42\\",
-	\\"𝄞♪♩♫♬\\": \\"iHMJbI42\\",
-	\\"💩\\": \\"iHMJbI42\\",
-	\\"?\\": \\"iHMJbI42\\",
-	\\"@\\": \\"iHMJbI42\\",
-	\\".\\": \\"iHMJbI42\\",
-	\\":)\\": \\"iHMJbI42\\",
-	\\"<p>\\": \\"iHMJbI42\\",
-	\\"<><<<>><>\\": \\"iHMJbI42\\",
-	\\"++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.\\": \\"iHMJbI42\\",
-	\\"#\\": \\"iHMJbI42\\",
-	\\"##\\": \\"iHMJbI42\\",
-	\\"#.#.#\\": \\"iHMJbI42\\",
-	\\"_\\": \\"iHMJbI42\\",
-	\\"{}\\": \\"iHMJbI42\\",
-	\\"foo.bar\\": \\"iHMJbI42\\",
-	\\":hover\\": \\"iHMJbI42\\",
-	\\":hover:focus:active\\": \\"iHMJbI42\\",
-	\\"[attr=value]\\": \\"iHMJbI42\\",
-	\\"f/o/o\\": \\"iHMJbI42\\",
-	\\"f\\\\\\\\o\\\\\\\\o\\": \\"iHMJbI42\\",
-	\\"f*o*o\\": \\"iHMJbI42\\",
-	\\"f!o!o\\": \\"iHMJbI42\\",
-	\\"f'o'o\\": \\"iHMJbI42\\",
-	\\"f~o~o\\": \\"iHMJbI42\\",
-	\\"f+o+o\\": \\"iHMJbI42\\",
-	\\"foo/bar\\": \\"iHMJbI42\\",
-	\\"foo\\\\\\\\bar\\": \\"iHMJbI42\\",
-	\\"foo/bar/baz\\": \\"iHMJbI42\\",
-	\\"foo\\\\\\\\bar\\\\\\\\baz\\": \\"iHMJbI42\\"
-};
-export default ___CSS_LOADER_EXPORT___;
-"
-`;
-
-exports[`"modules" option should work and respect the "hashStrategy" = "omit-local-name": result 1`] = `
-Array [
-  Array [
-    "./modules/localIdentName/localIdentName.css",
-    ".iHMJbI42 {
-  background: red;
-}
-
-.iHMJbI42 {
-  background: blue;
-}
-
-.iHMJbI42 {
-  background: red;
-}
-
-#iHMJbI42 {
-  background: green;
-}
-
-.iHMJbI42 .iHMJbI42 {
-  color: green;
-}
-
-#iHMJbI42 .iHMJbI42 {
-  color: blue;
-}
-
-.iHMJbI42 {
-  color: red;
-}
-
-.iHMJbI42 {
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
-
-.iHMJbI42 {
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
-
-/* matches elements with class=\\":\`(\\" */
-.iHMJbI42 {
-  color: aqua;
-}
-
-/* matches elements with class=\\"1a2b3c\\" */
-.iHMJbI42 {
-  color: aliceblue;
-}
-
-/* matches the element with id=\\"#fake-id\\" */
-#iHMJbI42 {
-  color: antiquewhite;
-}
-
-/* matches the element with id=\\"-a-b-c-\\" */
-#iHMJbI42 {
-  color: azure;
-}
-
-/* matches the element with id=\\"©\\" */
-#iHMJbI42 {
-  color: black;
-}
-
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-.iHMJbI42 { background: lime; }
-
-.iHMJbI42 {
-  background: hotpink;
-}
-
-.iHMJbI42 {
-  background: hotpink;
-}
-
-.iHMJbI42 {
-  background: hotpink;
-}
-
-.iHMJbI42 {
-  background: hotpink;
-}
-",
-    "",
-  ],
-]
-`;
-
-exports[`"modules" option should work and respect the "hashStrategy" = "omit-local-name": warnings 1`] = `Array []`;
-
 exports[`"modules" option should work and respect the "hashStrategy" = "use-local-name": errors 1`] = `Array []`;
 
 exports[`"modules" option should work and respect the "hashStrategy" = "use-local-name": module 1`] = `

diff --git a/test/modules-option.test.js b/test/modules-option.test.js
@@ -401,26 +401,6 @@ describe('"modules" option', () => {
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
 
-  it('should work and respect the "hashStrategy" = "omit-local-name"', async () => {
-    const compiler = getCompiler("./modules/localIdentName/localIdentName.js", {
-      modules: {
-        localIdentName: "[hash:base64:8]",
-        // localName should not be used even if [local] is absent from the localIdentName template
-        hashStrategy: "omit-local-name",
-      },
-    });
-    const stats = await compile(compiler);
-
-    expect(
-      getModuleSource("./modules/localIdentName/localIdentName.css", stats)
-    ).toMatchSnapshot("module");
-    expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot(
-      "result"
-    );
-    expect(getWarnings(stats)).toMatchSnapshot("warnings");
-    expect(getErrors(stats)).toMatchSnapshot("errors");
-  });
-
   it('should work and respect the "hashStrategy" = "auto" and [local]', async () => {
     const compiler = getCompiler("./modules/localIdentName/localIdentName.js", {
       modules: {