Modules names added but CSS isn't generated

[Undistraction]

I'm trying to switch from React CSS Modules (which I have working fine) to this plugin. I'm using Gatsby which is using Webpack under the hood. Although I have the CSS module names being rendered to the rendered component's 'class' attribute correctly, the styles themselves are not being compiled.

My components look like this using Anonymous reference:

import React from 'react';
import SiteTitle from '../SiteTitle/SiteTitle';
import './SiteHeader.module.css';

const SiteHeader = () => (
  <header styleName="base">
    <SiteTitle styleName="title" />
  </header>
);

export default SiteHeader;

With the styles like this:

.base {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: red;
}

.title {
  color: blue;
}

I've tried being more explicit, using Named references, but the problem is the same.

In my babelrc I've checked that Gatsby uses the same Webpack context and it uses the current directory like this plugin's default context value. I have also set webpackHotModuleReloading to true

{
  "presets": ["react", "es2015", "stage-0"],
  "plugins": [
    "add-module-exports",
    "transform-object-assign",
    [
      "react-css-modules",
      {
        "webpackHotModuleReloading": true
      }
    ]
  ]
}

To reiterate, things are working perfectly using React CSS Modules.

[shawnmclean]

Have you gotten this to work?

[shawnmclean]

Check to make sure your css-loader is using the same localIdentName naming as the react-css-modules generateScopedName name. The defaults for both are different.

[Undistraction]

No. I never got this working, but I actually ended up replacing CSS Modules with Styled Components which greatly reduced the amount of boilerplate I was writing related to styling.

[dmeehan1968]

I think you can fix this with the following config in webpack:

      {
        test: /\.css$/,
        use: [ 
          'style-loader', 
          'css-loader?importLoader=1&modules&localIdentName=[path]___[name]__[local]___[hash:base64:5]' 
        ]
      }

The important part is the query string after css-loader. The modules and localIdentName seem to be the important bit, the former enables module processing, and the latter has the same format as used by babel-plugin-react-css-modules for how it names the classes after converting from styleNames.

I don't think this is made obvious in the docs.

[kavare]

Experience the same issue, tried the approach @dmeehan1968 and @shawnmclean mentioned here but still not able to get it work.

The root cause is this: Even if we are using the same localIdentName, the generated results are different from selectors in css and className on DOM element

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

Any idea why there is a hypen-wrapper?

[dmeehan1968]

@kavare Can you post the relevant bits of your webpack/babel config?

[dmeehan1968]

@kavare I changed from using the query string format to the JSON format which is a bit clearer:

      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,    // if specifying more loaders
              modules: true,
              sourceMap: true,
              localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
            }
          },
          'postcss-loader'
        ]

I've subsequently added sourceMap and postcss to my config.

[kavare]

Here's my config (without postcss, with sass-loader)

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

[kavare]

Found the issue:
Somehow, if you remove the double quotes around the localIdentName, it will work.

So instead of this:
'css-loader?modules&importLoaders="1"&localIdentName="[path]___[name]__[local]___[hash:base64:5]"'

Do this:
'css-loader?modules&importLoaders="1"&localIdentName=[path]___[name]__[local]___[hash:base64:5]'

Maybe just a quirk from css-loader. Also a good reason to move to a more modern Webpack sytax I suppose...

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

Thank you @dmeehan1968 for providing the inspiration :)

[dmeehan1968]

I don't think the quotes are necessary on a query string (its effectively a URI) and css-loader has converted them to hyphens to make them in to a valid CSS class name. The behaviour seems sane, and I suspect that the query string format is historical from when webpack didn't take options for plugins. Plus the JSON format is much more readable! Glad you sorted it :-)

[daelmaak]

Thanks @dmeehan1968 and @kavare for solving this problem for me :). Btw it would be great to mention in the documentation that the css-loader's option localIdentName has to be configured this particular way, because right now there is only "Note: The default configuration should work out of the box with the css-loader." which sounds like there is no need to configure anything else.

[dthree]

I'm still having this issue. The random base64 hash is not the same.

[didi0613]

I'm having this issue too. The localIdentName is the same as [hash:base64:5] for both webpack and babalrc in my case. However, i still get different random base64 hash.

After some investigation, the reason is because the context field does not being set properly.

[jcw007]

I was having the mismatching hash issue as well. What solved it for me was setting the context property on webpack config and also referencing it in react-css-modules plugin option.

// in my webpack.config.js
const context = path.resolve(__dirname, 'react-app');
// ...
module.exports = {
  context, // <--- context referenced here
  // ...
  module: {
    rules: [
      {
        test: /\.(js)$/,
        include: path.resolve(__dirname, './react-app'),
        loader: 'babel-loader',
        options: { // this acts as my babelrc
          plugins: [
            // ...
            ['react-css-modules', {
              context, // <--- same context referenced here
              generateScopedName: '[hash:base64:5]', // make sure it's the same as localIdentName in css-loader option
              // ...
            }],
            // ...
          ],
          // ...
        },
        // ...
      },
      {
        test: /\.css$/,
        include: path.resolve(__dirname, './react-app'),
        use: [
          // ...
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[hash:base64:5]' // same as in react-css-modules option above
            }
          }
        ]
      },
      // ...
    ]
  }
  // ...
}

[liquidslr]

Facing still the same issue even though have followed the same above configuration, any idea how to fix it ?

[liquidslr]

Ok was able to get around with the code provide by @jcw007 , but i must say the documentation does not explains the steps clearly, would like to make a pr for updating the documentation