gajus / babel-plugin-react-css-modules

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

CSS className Hash difference between Webpack.config.js and .babelrc #282

Closed marcraft2 closed 4 years ago

marcraft2 commented 4 years ago

Hello, I want to use a hash generated by webpack, here is my configuration file:

webpack.config.js

      {
        test: /\.css$/,
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            modules: {
              mode: 'local',
              localIdentName: '[hash:base64:5]',
              context: path.resolve(__dirname, 'src'),
              hashPrefix: 'my-custom-hash',
            },
          },
        }]
      },

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-export-default-from",
    ["react-css-modules", {
      "generateScopedName": "[hash:base64:5]"
    }],
  ]
}

And my component:

import React, { Component } from 'react';
import Timeline from './Timeline';
import Competence from './Competence';
import Projet from './Projet';
import Interet from './Interet';
import Reseaux from './Reseaux';
import Plus from './Plus';
import './BrowserViewApp.css';

export default class BrowserViewApp extends Component {
  render() {
    return (
      <div>
          <div styleName="annecy">
            <div styleName="title">Marc Dubois</div>
            <div styleName="texte">Etudiant, en alternance.</div>
            <div styleName="info">?<div styleName="info2">Lac d'Annecy</div>
          </div>
         </div>
         <Timeline />
         <Competence />
         <Projet />
         <Interet />
         <Reseaux />
         <Plus />
      </div>
    );
  }
}

I think the problem comes from hashPrefix: 'my-custom-hash', which is not taken into account to generate the name of the class in the HTML.

Do you have a repair path, or is this function not possible today?

Thank you Marc Dubois,

marcraft2 commented 4 years ago

The problem : The hash is different between the one generated by webpack (in