search

gajus / babel-plugin-react-css-modules

Transforms styleName to className using compile time CSS module resolution.
Other
2.05k stars 162 forks source link

Version 3.4.4 not working on Windows (OK on Mac) #214

Closed jacoporicare closed 5 years ago

jacoporicare commented 5 years ago

I know there's already an issue that 3.4.3 has a breaking change regarding babel-core.

Anyway, I'm using the latest @babel/core 7.x and after I upgraded babel-plugin-react-css-modules to 3.4.4 everything seemed fine on my MacOS machine. However when the app was built on the Windows machine (TFS build agent) the hashes at the end of the generated class names are different in CSS and in the JS bundle itself, thus the styles are not applied.

bundle.css .src-modules-Standalone-components-Layout-styles-___Layout__container___2yslH{

Applied class name class="src-modules-Standalone-components-Layout-styles-___Layout__container___219n4"

I'm not using any special options in the babel config. { exclude: 'node_modules' },

When I pinned it to 3.4.2 everything keeps working on both MacOS and Windows machine.

I'd love to provide more info but I'm not sure what could help you 😞. Thank you.

sthzg commented 5 years ago

I can check this tonight on a windows machine. From first thoughts I am wondering if the context directory resolves to the expected value on a windows file system. If the option is not set in the babel-plugin-react-css-modules config object then it defaults to process.cwd(), which from the top of my head would be the entry point to start debugging this issue.

Update: From first checks the context seems to be fine and the differing hashes can be reproduced in the ./demo directory. If you find some time could you post your babel-loader, css-loader, and webpack version?

borisding commented 5 years ago

Hi @sthzg

I'm having same issue on Windows after upgrading to 3.4.4:

If you find some time could you post your babel-loader, css-loader, and webpack version?

"babel-loader": "^8.0.4", "css-loader": "^1.0.1", "webpack": "^4.26.0",

for my context. Hope it would help.

Thanks!

alexesDev commented 5 years ago

@jacoporicare thanks, 3.4.2 works fine :+1:

sthzg commented 5 years ago

Thanks @borisding for sharing your versions.

Both the css-loader and this plugin (through a package named generic-names) use a function called interpolateName from Webpack's loader-utils to build the hash.

This function takes three arguments with the third one being an object called loaderOptions. This object contains the context and the content key.

On macOS the content key on both is e.g. something like e.g. components/table.css+table

On windows the key generated by the babel plugin is components/table.css+table, in the css-loader however it is components\\table.css+table (notice the backslashes there), which leads to generating differing hashes.

generic-names replaces the backslashes with a regex manually which was intorduced in 2.0.1: https://github.com/css-modules/generic-names/blob/master/index.js#L33-L40

Update: As a first measure I posted a PR that pins the generic-names dependency to 2.0.0. Depending on the update frequency of that package there might be some more long-term solutions to this problem.

optimatex commented 5 years ago

Hi @jacoporicare Did you find a way to solve this? I can confirm the same bug

jacoporicare commented 5 years ago

Hi @optimatex, I have fixed the version in my package.json to 3.4.2, that solved it. Unfortunately I don't have a Windows machine available directly (only as a build agent), so I cannot help with PR.

"babel-plugin-react-css-modules": "3.4.2",

optimatex commented 5 years ago

thanks @jacoporicare i downgraded it to 3.3.3 and it starts work

borisding commented 5 years ago

Hi @gajus @sthzg

Update: As a first measure I posted a PR that pins the generic-names dependency to 2.0.0. Depending on the update frequency of that package there might be some more long-term solutions to this problem.

Any chance to get this PR #216 merged and published without having to pin it to 3.4.2?

Thanks!

sthzg commented 5 years ago

👍 In case it should be merged I rebased the PR to the latest master.

borisding commented 5 years ago

Yes, I expect the PR will be merged as this issue has been closed. Apparently, it's still the same issue with v5.0.0 on Windows. (verified with demo this morning)

Thanks.

UPDATE Seems the v2 of css-loader has already fixed the inconsistent hash issue on different OS, which should be working fine on Windows with v5.

"babel-plugin-react-css-modules": "^5.0.0",
"css-loader": "^2.0.1",

pay attention to the breaking changes of css-loader, though