GithubHelp home page GithubHelp logo

[Bug]: CSS Class Name error. about rspack HOT 10 CLOSED

1yasa avatar 1yasa commented on June 22, 2024
[Bug]: CSS Class Name error.

from rspack.

Comments (10)

chenjiahan avatar chenjiahan commented on June 22, 2024 1

Thanks, we will add more e2e cases for CSS Modules.

from rspack.

1yasa avatar 1yasa commented on June 22, 2024

v0.6.4

from rspack.

1yasa avatar 1yasa commented on June 22, 2024

Same error when set module generator:

截屏2024-05-08 15 26 38 截屏2024-05-08 15 27 36

So where is [path]?

from rspack.

1yasa avatar 1yasa commented on June 22, 2024

Seem cause by https://github.com/web-infra-dev/rspack/pull/6444/files.

The testing ignore the deep dir cases.

from rspack.

ahabhgk avatar ahabhgk commented on June 22, 2024

Thanks for report, we will release the fix in today

from rspack.

daveskybet avatar daveskybet commented on June 22, 2024

Hi @ahabhgk, quick question on this hotfix.

I'm the reporter of the hashing issue in #6435 Which fixed my issue of css module hashes not matching Webpack/MD4 hashes generated elsewhere which was released in 0.6.4.

I did wonder about the missing deep path info so this addition is welcome, however it seems to have reintroduced the issue I reported above, where the hashes don't seem to match.

Using the https://github.com/rspack-contrib/rspack-examples/tree/main/rspack/css-parser-generator-options example an MD4 hash for a deep path of ./legacy/index.css should be 2c15d43fe622e87bbf5d (length limited to 20), but the class name generated using [hash] in the example (with v0.6.5) results in d7377dc02a1f125c4876

Is this a regression on the previous fix, or am i missing something?

Thanks

from rspack.

ahabhgk avatar ahabhgk commented on June 22, 2024

Webpack experiments css should have the same issue about the deep path info, so the hash result of rspack is actually correct, we will submit a fix to webpack soon

from rspack.

daveskybet avatar daveskybet commented on June 22, 2024

Correct @ahabhgk, Webpack also has the same issue with deep path which needs to be addressed, however my issue is unless there's something else going on in the hashing logic, the hash isn't a straightforward MD4/Hex hash of the deep path value, as the path in the example of ./legacy/index.css generates a different hash (with the default output.hashFunction and output.hashDigest values) than you get either using an MD4 generator (such as https://en.toolpage.org/tool/md4) or something like Webpack's loader-utils getHashDigest("./legacy/index.css", "md4", "hex", 20)

Screenshot 2024-05-09 at 17 02 08

from rspack.

ahabhgk avatar ahabhgk commented on June 22, 2024

We will take a look, but just curious, what's your use case which needs to have the same hash result of the className

from rspack.

daveskybet avatar daveskybet commented on June 22, 2024

Thanks @ahabhgk, our use case as mentioned in #6435 is the need to generate mapping json files of the classes which in our existing Webpack solution uses postcss & postcss-modules to generate these files, but moving to Rspack the hashes don't match (although they briefly did with the changes made for 0.6.4, but then broke again in 0.6.5).

If there's an alternative method you can think of to output these mappings then i'd be happy to hear it.

from rspack.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.