Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: [hash] for css modules (experiments.css) doesn't match Webpack #6435

Closed
daveskybet opened this issue May 2, 2024 · 1 comment · Fixed by #6444
Closed

[Bug]: [hash] for css modules (experiments.css) doesn't match Webpack #6435

daveskybet opened this issue May 2, 2024 · 1 comment · Fixed by #6444
Assignees
Labels
bug Something isn't working

Comments

@daveskybet
Copy link

System Info

System:
OS: macOS 14.3
CPU: (10) arm64 Apple M1 Pro
Memory: 105.77 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.12.2 - ~/.asdf/installs/nodejs/20.12.2/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 10.5.0 - ~/.asdf/plugins/nodejs/shims/npm
Watchman: 2024.01.22.00 - /opt/homebrew/bin/watchman
Browsers:
Chrome: 124.0.6367.94
Safari: 17.3
npmPackages:
@rspack/cli: latest => 0.6.1
@rspack/core: latest => 0.6.1

Details

Using the new experiments.css approach (generator) for css modules generates different hashes to Webpack as can be seen on the below screenshot (left Rspack, right Webpack), this was reproduced by using the https://github.com/rspack-contrib/rspack-examples/tree/main/rspack/css-parser-generator-options example and adding an identical weback.config.js (only changing Rspack imports to Webpack equivalents).

Screenshot 2024-05-02 at 10 11 29

This isn't particularly impacting me, but discovered when trying to generate a mappings json file of the classes using postcss/postcss-modules (our existing solution) and getting different hashes to the ones produced by Rspack. They are also different to the Webpack generated ones too, and am struggling to see how both Rspack and Webpack are generating these hashes (as don't seem to just be a simple md4 hash like you'd be able to regenerate using https://github.com/webpack/loader-utils for example).

Any help understanding how these are generated and/or how I could generate matching mapping files would be appreciated.

Reproduce link

No response

Reproduce Steps

  1. Clone https://github.com/rspack-contrib/rspack-examples/tree/main/rspack/css-parser-generator-options
  2. Update the css modules generator.localIdentName to [hash]-[local] (anything containing [hash] will do)
  3. Duplicate rspack.config.js as webpack.config.js and update the imports (Rspack & HtmlRspackPlugin) to Webpack equivalents
  4. Run each and take note of the generated hash
@daveskybet daveskybet added bug Something isn't working pending triage The issue/PR is currently untouched. labels May 2, 2024
@LingyuCoder
Copy link
Collaborator

Rspack uses output.hashFunction(default: md4) and output.hashDigest(default: hex) to cacluate hash of localNameIdent, just the same as webpack. But there are some bugs here that make the hash result different. I will try to fix this.

@LingyuCoder LingyuCoder removed the pending triage The issue/PR is currently untouched. label May 6, 2024
@LingyuCoder LingyuCoder self-assigned this May 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants