Version 5.2.6 hashes are different on Windows (Ok on Mac)

[dmh19900611]

Dear auth:

bundle.css
.index__my-node___4029n{

Applied class name
class=".index__my-node___503l9"

package.json

"dependencies": {
"antd": "^3.19.5",
"babel-plugin-react-css-modules": "^5.2.6",
"dva": "^2.6.0-beta.6",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-components": "^4.3.2",
"umi-request": "^1.2.6"
},
"devDependencies": {
"babel-eslint": "^9.0.0",
"eslint": "^5.4.0",
"eslint-config-umi": "^1.4.0",
"eslint-plugin-flowtype": "^2.50.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.11.1",
"husky": "^0.14.3",
"lint-staged": "^7.2.2",
"postcss-less": "^3.1.4",
"react-test-renderer": "^16.7.0",
"umi": "^2.7.7",
"umi-plugin-react": "^1.8.4"
},

babelPlugin config:
["react-css-modules", {
"filetypes": {
".less": {"syntax": "postcss-less"}
},
"generateScopedName": '[name]__[local]___[hash:base64:5]'
}]

css-loader version:
└─┬ umi@2.11.3
└─┬ umi-build-dev@1.15.1
└─┬ af-webpack@1.13.1
└── css-loader@2.1.1

generic-names version:
└─┬ babel-plugin-react-css-modules@5.2.6
├── generic-names@2.0.1
└─┬ postcss-modules@1.4.1
└── generic-names@1.0.3

what else do you need ? please contact me.

thank you.

[gajus]

Sounds like an issue somewhere with converting paths. As I don't use Windows, I won't be able to help. PRs welcome.

[ahwgs]

I have the same problem,Is there any way to solve this problem?

[avaforvr]

In a project with Next.js and Scss, I suffered the same problem. Hope the following method can help you.

Solution:

1. Install plugins:

npm install generic-names path

2. Add a function that generates scoped name with generic-names

const path = require('path');
const genericNames = require('generic-names');

// change the scope rule as you need
const generate = genericNames('[local]__[hash:base64:5]', {
    context: process.cwd()
});

const generateScopedName = (localName, filePath) => {
    var relativePath = path.relative(process.cwd(), filePath);
    return generate(localName, relativePath);
};

3. Config css-loader options

{
    importLoaders: 1,
    // scoped class 格式
    // localIdentName: "[local]__[hash:base64:5]",
    getLocalIdent: (context, localIdentName, localName) => {
        return generateScopedName(localName, context.resourcePath)
    }
}

Reason：

The documentation requires that context must match webpack context configuration. Because the hash conversion requires two parameters, local class name and the scss file path (context is related to file path). For example, a class .local-container in a file components/Example/style.scss, When converting the hash value, it needs to be combined into a string like components/Example/style.scss+local-container.

In Mac system, slash in file path is /, and in windows is \, generic-names converts the slash into /, css-loader does not do that.

Therefore, css-loader generates different hash values in mac and windows. Converting slashes is more reasonable. So I think it's a bug of css-loader.

getLocalIdent in css-loader options can return any value you need. Using generic-names can solve the problem.

[xuxinhang]

Its seems that generic-names has the different behavior on the Windows path slash \ after this version. (To be honest, I really cannot catch the motivation to do such a change.)

css-loader uses its own function to generate a scope name, however, babel-plugin-react-css-modules indirectly uses generic-names to generate a scope name.

[SHERlocked93]

it still not work for me T.T