Parcel: 🐛 CSS Module class names change, but aren't updated in markup

[Tam]

The generated class names change when a LESS file is changed, but the class names in the markup don't.

🎛 Configuration (.babelrc, package.json, cli command)

.babelrc

{
  "presets": ["env", "react"],
  "plugins": ["react-hot-loader/babel"]
}

.postcssrc

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

package.json

{
  "license": "MIT",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.2.2"
  },
  "devDependencies": {
    "autoprefixer": "^7.2.5",
    "babel-eslint": "^8.2.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "eslint": "^4.16.0",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-plugin-import": "^2.8.0",
    "less": "^2.7.3",
    "parcel-bundler": "^1.5.0",
    "parcel-plugin-eslint": "^1.0.0",
    "postcss-less": "^1.1.3",
    "postcss-modules": "^1.1.0",
    "react-hot-loader": "^3.1.3"
  },
  "scripts": {
    "start": "parcel src/index.html -p 8080",
    "build": "parcel build src/index.html -d build"
  }
}

🤔 Expected Behavior

Class names should be in-sync across compiled CSS and markup.

😯 Current Behavior

The generated class names in the compiled CSS update as the file is changed, but the classes are not updated in markup.

💁 Possible Solution

Temporary solution involves either hard-refreshing the page or triggering a re-build of the JS the class is referenced in.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.5.0 |
| Node | 9.4.0 |
| Yarn | 1.3.2 |
| Operating System | macOS High Sierra 10.13.2 |

[joye61]

Because of css-modules,2 ways to resolve:
1、use :global {} syntax to wrap your css code
2、in your .postcssrc file , set "modules": false

[JorritPosthuma]

It might also be possible to fix https://github.com/css-modules/postcss-modules. I don't know the side effects of this, but it results in a more predictable generated classname.

If you change the following in https://github.com/css-modules/postcss-modules/blob/master/src/generateScopedName.js:

const hash = (0, _stringHash2.default)(css).toString(36).substr(0, 5);
return `_${name}_${hash}_${lineNumber}`;

To

const hash = (0, _stringHash2.default)(filename).toString(36).substr(0, 5);
return `_${name}_${hash}`;

[hayeah]

I figured out how to get postcss-modules to generate predictable css names. You must use the .postcssrc config file (config in postcss.config.js format won't work).

Then set the generateScopedName option. The .postcssrc file looks like:

{
  "modules": true,
  "plugins": {
    "postcss-modules": {
      "generateScopedName": "_[path]_[name]__[local]"
    }
  }
}

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.