fix: correct css modules hashing to match Webpack when leading digit w…

…eb-infra-dev#8735
daveskybet · Dec 20, 2024 · c0b9d82 · c0b9d82
1 parent 52c2309
commit c0b9d82
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 49 deletions.
diff --git a/crates/rspack_plugin_css/src/utils.rs b/crates/rspack_plugin_css/src/utils.rs
@@ -28,7 +28,7 @@ use crate::parser_and_generator::CssExport;
 
 pub const AUTO_PUBLIC_PATH_PLACEHOLDER: &str = "__RSPACK_PLUGIN_CSS_AUTO_PUBLIC_PATH__";
 pub static LEADING_DIGIT_REGEX: LazyLock<Regex> =
-  LazyLock::new(|| Regex::new(r"^\d+").expect("Invalid regexp"));
+  LazyLock::new(|| Regex::new(r"^((-?[0-9])|--)").expect("Invalid regexp"));
 pub static PREFIX_UNDERSCORE_REGEX: LazyLock<Regex> =
   LazyLock::new(|| Regex::new(r"^[0-9_-]").expect("Invalid regexp"));
 
@@ -69,7 +69,7 @@ impl<'a> LocalIdentOptions<'a> {
       }
       let hash = hasher.digest(&output.hash_digest);
       LEADING_DIGIT_REGEX
-        .replace_all(hash.rendered(output.hash_digest_length), "")
+        .replace(hash.rendered(output.hash_digest_length), "_${1}")
         .into_owned()
     };
     LocalIdentNameRenderOptions {

diff --git a/packages/rspack-test-tools/tests/__snapshots__/Config.test.js.snap b/packages/rspack-test-tools/tests/__snapshots__/Config.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`config config/builtin-lightningcss-loader/basic-include exported tests should transform css correct 1`] = `
 body {
-  & ._-ec1c834ac8cc99e-used {
+  & ._-_6ec1c834ac8cc99e-used {
     color: #00f;
   }
 }
@@ -12,7 +12,7 @@ exports[`config config/builtin-lightningcss-loader/minify exported tests css con
 
 exports[`config config/builtins/css-auto exported tests css/auto can handle css module correctly 1`] = `
 Object {
-  style: -ec1c834ac8cc99e-style,
+  style: -_6ec1c834ac8cc99e-style,
 }
 `;
 
@@ -27,21 +27,21 @@ exports[`config config/builtins/css-modules-composes-preprocessers exported test
 Object {
   class: -bd00b1e0e0954270-class -a700d75440d0c95b-lessClass,
   ghi: -bd00b1e0e0954270-ghi,
-  other: -bd00b1e0e0954270-other -c82bab3b83825a-scssClass,
+  other: -bd00b1e0e0954270-other -_59c82bab3b83825a-scssClass,
   otherClassName: -bd00b1e0e0954270-otherClassName globalClassName,
 }
 `;
 
 exports[`config config/builtins/css-modules-composes-sass exported tests css modules in scss 1`] = `
 Object {
-  bar: -f71ebaec3a61562-bar -d2e32b33f9cd5760-foo,
+  bar: -_6f71ebaec3a61562-bar -d2e32b33f9cd5760-foo,
 }
 `;
 
 exports[`config config/builtins/css-modules-dedupe exported tests css modules dedupe 1`] = `
 Object {
-  backButton: -f9dde4a2b9fd39e-backButton -c0cdf795e5ee8e4-secondaryButton -ff2973456bd9e-button,
-  nextButton: -f9dde4a2b9fd39e-nextButton -fe530a949364eca-primaryButton -ff2973456bd9e-button,
+  backButton: -_1f9dde4a2b9fd39e-backButton -_3c0cdf795e5ee8e4-secondaryButton -_542ff2973456bd9e-button,
+  nextButton: -_1f9dde4a2b9fd39e-nextButton -_7fe530a949364eca-primaryButton -_542ff2973456bd9e-button,
 }
 `;
 
@@ -55,53 +55,53 @@ Object {
 exports[`config config/builtins/css-modules-local-ident-name-hash exported tests css modules localIdentName with hash 1`] = `
 Object {
   #: ab5b3430521fed0b,
-  ##: cb547534b9bb8e,
-  #.#.#: a4c570203a26b7a,
-  #fake-id: f7b6eb7b0e0c18,
+  ##: _94cb547534b9bb8e,
+  #.#.#: _8a4c570203a26b7a,
+  #fake-id: _48f7b6eb7b0e0c18,
   ++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.: c40d0c7abfea21c2,
-  -a-b-c-: b1d2002fed1364,
-  -a0-34a___f: bd6992764ef,
-  .: aba9a87983bb4,
-  123: fc0eed74768cf0,
-  1a2b3c: cd4a1680594,
+  -a-b-c-: _41b1d2002fed1364,
+  -a0-34a___f: _76004bd6992764ef,
+  .: _562aba9a87983bb4,
+  123: _44fc0eed74768cf0,
+  1a2b3c: _45189cd4a1680594,
   :): f173228435cfb0b1,
-  :\`(: c028ead51dd2190,
-  :hover: bcf55b240a0c8c3,
+  :\`(: _2c028ead51dd2190,
+  :hover: _4bcf55b240a0c8c3,
   :hover:focus:active: a9b6b582b414966b,
-  <><<<>><>: c75f56ad7787952,
+  <><<<>><>: _2c75f56ad7787952,
   <p>: aeefcae4950d33f5,
-  ?: e40713fc7c65c3f,
-  @: cd391b9e31254d,
-  B&W?: daaf197c50aa167,
-  [attr=value]: fa72982cc3b312,
-  _: bd050c4fe,
-  _test: f95d7802389a,
-  className: b88ec9c3ddaa088,
-  f!o!o: ae3ae8c7841a7dc,
-  f'o'o: df77f78fe66aae2,
+  ?: _5e40713fc7c65c3f,
+  @: _81cd391b9e31254d,
+  B&W?: _8daaf197c50aa167,
+  [attr=value]: _64fa72982cc3b312,
+  _: _7814922bd050c4fe,
+  _test: _4011f95d7802389a,
+  className: _8b88ec9c3ddaa088,
+  f!o!o: _6ae3ae8c7841a7dc,
+  f'o'o: _1df77f78fe66aae2,
   f*o*o: a7fec00e3ce42886,
-  f+o+o: eb6cf0061b2d78e,
+  f+o+o: _6eb6cf0061b2d78e,
   f/o/o: d0e703c722b26d0c,
   f\\o\\o: a496c6306a14d13d,
   foo.bar: cd2e4302e8b6edf3,
-  foo/bar: cd90db0f2125295,
+  foo/bar: _7cd90db0f2125295,
   foo/bar/baz: f253f688730bc76e,
-  foo\\bar: eb2a9acb231,
+  foo\\bar: _47141eb2a9acb231,
   foo\\bar\\baz: b41adbd8ba363134,
-  f~o~o: b5f0b0aac1e4e,
+  f~o~o: _104b5f0b0aac1e4e,
   m_x_@: deacd91fcb5633e3,
   someId: f39bfe4a4606a57c,
   subClass: dbb85e97d7af8a70,
   test: db0a8ac9537cb87c,
-  {}: b674276dd02fd15,
-  ©: fc4038317,
-  “‘’”: b1f8cf023766,
-  ⌘⌥: cad802,
-  ☺☃: a5266303d99e4a3,
-  ♥: b3f2fd830,
+  {}: _0b674276dd02fd15,
+  ©: _4721925fc4038317,
+  “‘’”: _6295b1f8cf023766,
+  ⌘⌥: _5464233501cad802,
+  ☺☃: _8a5266303d99e4a3,
+  ♥: _8573640b3f2fd830,
   𝄞♪♩♫♬: c573deb3b242a81b,
-  💩: f17b76fb4694950,
-  😍: d57d2641b441,
+  💩: _0f17b76fb4694950,
+  😍: _5653d57d2641b441,
 }
 `;
 
@@ -205,7 +205,7 @@ Object {
 
 exports[`config config/builtins/css-modules-simple exported tests css modules simple test 1`] = `
 Object {
-  style: -ec1c834ac8cc99e-style,
+  style: -_6ec1c834ac8cc99e-style,
 }
 `;
 

diff --git a/...ools/tests/builtinCases/plugin-css-modules/modules-composes/__snapshots__/output.snap.txt b/...ools/tests/builtinCases/plugin-css-modules/modules-composes/__snapshots__/output.snap.txt
@@ -14,10 +14,10 @@
 
 }
 
-.\.\/_b\.module_\.\/_b-1--\/__f794ca5c2\<f79 {
+.\.\/_b\.module_\.\/_b-1--\/___4907546f794ca5c2\<_49 {
     color: red;
 }
-.\.\/_b\.module_\.\/_b--\/__f794ca5c2\<f79 {
+.\.\/_b\.module_\.\/_b--\/___4907546f794ca5c2\<_49 {
 
 }
 .\.\/_style\.module_\.\/_chain2--\/__d8ad836b5119c8e8\<d8a {
@@ -55,8 +55,8 @@ __webpack_require__.r(__webpack_exports__);
 }),
 "./b.module.css": (function (module, __unused_webpack_exports, __webpack_require__) {
 var exports = {
-  "b-1": "./_b.module_./_b-1--/__f794ca5c2<f79",
-  "b": "./_b.module_./_b--/__f794ca5c2<f79" + " " + "./_b.module_./_b-1--/__f794ca5c2<f79",
+  "b-1": "./_b.module_./_b-1--/___4907546f794ca5c2<_49",
+  "b": "./_b.module_./_b--/___4907546f794ca5c2<_49" + " " + "./_b.module_./_b-1--/___4907546f794ca5c2<_49",
 };
 
 __webpack_require__.r(module.exports = exports);

diff --git a/packages/rspack-test-tools/tests/treeShakingCases/css/__snapshots__/treeshaking.snap.txt b/packages/rspack-test-tools/tests/treeShakingCases/css/__snapshots__/treeshaking.snap.txt
@@ -12,9 +12,9 @@ _index_module_css__WEBPACK_IMPORTED_MODULE_0__.compose;
 }),
 "./index.module.css": (function (module, __unused_webpack_exports, __webpack_require__) {
 var exports = {
-  "foo": "__rspack_test__-ec1c834ac8cc99e-foo",
-  "bar": "__rspack_test__-ec1c834ac8cc99e-bar",
-  "compose": "__rspack_test__-ec1c834ac8cc99e-compose" + " " + "__rspack_test__-ec1c834ac8cc99e-bar",
+  "foo": "__rspack_test__-_6ec1c834ac8cc99e-foo",
+  "bar": "__rspack_test__-_6ec1c834ac8cc99e-bar",
+  "compose": "__rspack_test__-_6ec1c834ac8cc99e-compose" + " " + "__rspack_test__-_6ec1c834ac8cc99e-bar",
 };
 
 module.exports = exports;

diff --git a/tests/webpack-test/__snapshots__/ConfigTestCases.basictest.js.snap b/tests/webpack-test/__snapshots__/ConfigTestCases.basictest.js.snap
@@ -412,6 +412,6 @@ Object {
 
 exports[`ConfigTestCases css large exported tests should allow to create css modules: prod 1`] = `
 Object {
-  "placeholder": "-d72b53b84605386-placeholder-gray-700",
+  "placeholder": "-_6d72b53b84605386-placeholder-gray-700",
 }
 `;