babel-plugin-react-css-modules is not matching styles with styleName

Question

Issue

I am trying to use babel-plugin-react-css-modules in my React project for better performance as opposed to React CSS Modules.

However, the styles are being not applied correctly.

Cause

The version in <style> tag is wrapped with weird hypen, for example:

• In the <style> tag: -components-Foo-___Foo__foo___1fcIZ-
• On the DOM element class name: components-Foo-___Foo__foo___1fcIZ

Even if we are using the same localIdentName, the generated results are different from selectors in css and className on DOM element.

(Note: In babel-plugin-react-css-modules, the localIdentName is [path]___[name]__[local]___[hash:base64:5] as hard-coded in options.generateScopedName)

Any idea why there is a hypen-wrapper?

Answer 1

Found the solution myself after some struggling.

Cause

This is due to a quirk of css-loader: if there are double quotes around localIdentName option, it will wrap the generated class name with hyphens.

Working Examples

So instead of doing this in webpack config:

{
    test: /\.(scss|sass)$/,
    use: [
        'style-loader?sourceMap',
        'css-loader?modules="true"&importLoaders="1"&localIdentName="[path]___[name]__[local]___[hash:base64:5]"',
        'sass-loader?sourceMap',
    ],
},

Do this:

{
    test: /\.(scss|sass)$/,
    use: [
        'style-loader?sourceMap',
        'css-loader?modules="true"&importLoaders="1"&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
        'sass-loader?sourceMap',
    ],
},

Or event better if you are using Webpack 2+

{
        test: /\.(scss|sass$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,    
              modules: true,
              sourceMap: true,
              localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
            }
          },
          'sass-loader'
        ]
}