feat: generate more collision resistant for locals

Author: subzey

src/utils.js

@@ -319,7 +319,7 @@ function defaultGetLocalIdent(
 ) {
   let relativeMatchResource = "";
 
-  const { context } = options;
+  const { context, hashSalt } = options;
   const { resourcePath } = loaderContext;
 
   // eslint-disable-next-line no-underscore-dangle
@@ -359,21 +359,30 @@ function defaultGetLocalIdent(
     );
   }
 
-  // eslint-disable-next-line no-underscore-dangle
-  const hash = loaderContext._compiler.webpack.util.createHash(hashFunction);
-  const { hashSalt } = options;
+  let localIdentHash = "";
+  for (let tier = 0; localIdentHash.length < hashDigestLength; tier++) {
+    // eslint-disable-next-line no-underscore-dangle
+    const hash = loaderContext._compiler.webpack.util.createHash(hashFunction);
 
-  if (hashSalt) {
-    hash.update(hashSalt);
-  }
+    if (hashSalt) {
+      hash.update(hashSalt);
+    }
+
+    const tierSalt = Buffer.allocUnsafe(4);
+    tierSalt.writeUInt32LE(tier);
+    hash.update(tierSalt);
 
-  hash.update(options.content);
+    hash.update(options.content);
 
-  const localIdentHash = hash
-    .digest(hashDigest)
-    .slice(0, hashDigestLength)
-    .replace(/[/+]/g, "_")
-    .replace(/^\d/g, "_");
+    localIdentHash = (localIdentHash + hash.digest(hashDigest))
+      // Remove all leading digits
+      .replace(/^\d+/, "")
+      // Replace all slashes with underscores (same as in base64url)
+      .replace(/\//g, "_")
+      // Remove everything that is not an alphanumeric or underscore
+      .replace(/[^A-Za-z0-9_]+/g, "")
+      .slice(0, hashDigestLength);
+  }
 
   // TODO need improve on webpack side, we should allow to pass hash/contentHash without chunk property, also `data` for `getPath` should be looks good without chunk property
   const ext = path.extname(resourcePath);

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

@@ -155,10 +155,10 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_S
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.Yz6vxyapD7cLc0x63wym {\\\\n  color: red;\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
+___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.OZJqogC5EaF_wROug7zE {\\\\n  color: red;\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
-	\\"class\\": \\"Yz6vxyapD7cLc0x63wym\\"
+	\\"class\\": \\"OZJqogC5EaF_wROug7zE\\"
 };
 export default ___CSS_LOADER_EXPORT___;
 "
@@ -168,7 +168,7 @@ exports[`"esModule" option should work with a value equal to "true" and the "mod
 Array [
   Array [
     "../../src/index.js??ruleSet[1].rules[0].use[0]!./es-module/imported.css",
-    ".rJenlm2lw3fBBPGxPidc {
+    ".EB7DBFwH4lzwZcKIj2OA {
   color: red;
 }
 ",
@@ -180,7 +180,7 @@ Array [
 
 /* Comment */
 
-.Yz6vxyapD7cLc0x63wym {
+.OZJqogC5EaF_wROug7zE {
   color: red;
   background: url(replaced_file_protocol_/webpack/public/path/img.png);
 }
@@ -205,10 +205,10 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_S
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.Yz6vxyapD7cLc0x63wym {\\\\n  color: red;\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
+___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.OZJqogC5EaF_wROug7zE {\\\\n  color: red;\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
-	\\"class\\": \\"Yz6vxyapD7cLc0x63wym\\"
+	\\"class\\": \\"OZJqogC5EaF_wROug7zE\\"
 };
 export default ___CSS_LOADER_EXPORT___;
 "
@@ -218,7 +218,7 @@ exports[`"esModule" option should work with a value equal to "true" and the "mod
 Array [
   Array [
     "../../src/index.js??ruleSet[1].rules[0].use[0]!./es-module/imported.css",
-    ".rJenlm2lw3fBBPGxPidc {
+    ".EB7DBFwH4lzwZcKIj2OA {
   color: red;
 }
 ",
@@ -230,7 +230,7 @@ Array [
 
 /* Comment */
 
-.Yz6vxyapD7cLc0x63wym {
+.OZJqogC5EaF_wROug7zE {
   color: red;
   background: url(replaced_file_protocol_/webpack/public/path/img.png);
 }