BUG: postcss module generates wrong hashes

[laurib]

This a 🐛 bug report

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

postcss.config.js

module.exports = {
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true,
      "browsers": [
        ">1%",
        "last 2 versions",
        "not ie < 10"
      ],
      "flexbox": "no-2009"
    },
    "postcss-modules": {
      "generateScopedName": "[local]__[hash:base64:4]"
    }
  }
}

package.json

{
  "name": "react-project",
  "version": "1.0.0",
  "description": "Small test",
  "main": "index.js",
  "scripts": {
    "start": "parcel public/index.html -p 4000 --no-cache",
    "build": "parcel build public/index.html --out-dir build --no-cache --public-url ./",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {},
  "author": "",
  "license": "ISC",
  "homepage": "",
  "dependencies": {
    "apollo-boost": "^0.1.2",
    "babel-eslint": "^7.2.3",
    "classnames": "^2.2.5",
    "graphql": "^0.13.1",
    "react": "^16.2.0",
    "react-apollo": "^2.0.4",
    "react-dom": "^16.2.0",
    "react-loadable": "^5.3.1",
    "react-router-dom": "^4.2.2"
  },
  "devDependencies": {
    "autoprefixer": "^8.1.0",
    "babel-core": "^6.26.0",
    "babel-plugin-module-resolver": "^3.1.0",
    "babel-preset-react-app": "^3.1.1",
    "eslint": "^4.18.2",
    "eslint-config-react-app": "^2.1.0",
    "eslint-plugin-flowtype": "^2.46.1",
    "eslint-plugin-import": "^2.9.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.7.0",
    "node-sass": "^4.7.2",
    "postcss-modules": "^1.1.0",
    "postcss-scss": "^1.0.4"
  }
}

.babelrc

{
  "plugins": [
    ["module-resolver", {
      "root": [
        "./src/**/components"
      ],
      "alias": {}
    }]
  ],
  "presets": [
    "react-app"
  ]
}

🤔 Expected Behavior

Classnames in generated .css file should have hash which is 4 chars long and :global classname should not contain hash

😯 Current Behavior

Seems working correctly after restarting parcel.
Example:
.page-header {} is converted to .page-header__1x8y {} and :global .app-root is converted to .app-root {}

Classnames are generated incorrectly after changing and saving css file
.page-header {} is converted to ._page-header__1x8y_1dxnl_1 {} and :global .app-root is converted to ._app-root_1dxnl_12

When saving again then classnames are converted as shown below
.page-header {} -> ._page-header__1x8y_15rqa_1 {}
:global .app-root -> ._app-root_15rqa_12

💁 Possible Solution

🔦 Context

This is blocker bug.

💻 Code Sample

🌍 Your Environment

Software	Version(s)
Parcel	1.62
Node	8.1.3
npm/Yarn	npm 5.7.1
Operating System	macOS High Sierra

[kidandcat]

Same here, this is a stopper for us, we cannot run our project which uses css modules at all.

[iocat]

Second this

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    },
    "postcss-modules": {
       "generateScopedName": "[name]__[local]___[hash:base64:3]"
    }
  }
}

My generateScopedName never gets applied for some reason :(

[lpython]

@iocat @laurib @kidandcat May have found something...

///!!! Just saw #2865

I could not get my package.json to work, specifficaly, the ["postcss-modules"].generateScopedName , until .....

"babel": {  
   "presets": [  
     "@babel/preset-env"  
   ],  
   "plugins": [  
     "@babel/plugin-proposal-class-properties",  
     [  
       "@babel/plugin-transform-react-jsx",  
       { 
         "pragmaFrag": "React.Fragment"  
       }  
     ],  
     [  
       "react-css-modules",  
       {  
         "generateScopedName": "[path]__[name]__[local]__",  
         "handleMissingStyleName": "warn"    
       }  
     ] 
   ]  
 },
 "postcss": {
   "modules": true,
   "plugins": {
     "postcss-modules": {
       "generateScopedName": "[path]__[name]__[local]__",
       "globalModulePaths": [
         ".global."
       ],
       "root": "."
     },
     "autoprefixer": {
       "grid": true
     }
   }
 }

.... until I modified /src/transforms/postcss.js : SWITCHED LINES 55 / 56

File: node_modules\parcel-bundler\src\transforms\postcss.js
45: 
46:   let postcssModulesConfig = {
47:     getJSON: (filename, json) => (asset.cssModules = json),
48:     Loader: createLoader(asset),
49:     generateScopedName: (name, filename) =>
50:       `_${name}_${md5(filename).substr(0, 5)}`
51:   };
52: 
53:   if (config.plugins && config.plugins['postcss-modules']) {
54:     postcssModulesConfig = Object.assign(
55:       postcssModulesConfig,
56:       config.plugins['postcss-modules']
57:     );
58:     delete config.plugins['postcss-modules'];
59:   }

The original order of line 55 / 56 prevent anyone from overriding generateScopedName on line 49. It cannot be overrided via package.json | .postcssrc | .postcssrc.js | etc....
This isn't desired behavior, is it?

[kidandcat]

Bump @devongovett the PR is already created

[rfgamaral]

Any chance we can get this fix into the current v1.x branch?