How do react-css-modules (babel) and css-loader (webpack) work together?

Question

When using webpack and babel together, one needs to configure both in order to use React CSS Modules. For example:

webpack.config.js will need a rule like this:

{
  // Translates CSS into CommonJS modules
  loader: 'css-loader',
  options: {
    modules: {
      mode: "local",
      localIdentName: CSS_CLASS_NAME_PATTERN,
    },
  sourceMap: true
}

babel.config.js will need a plugin like this:

[
  'react-css-modules',
  {
    generateScopedName: CSS_CLASS_NAME_PATTERN,
    filetypes: {
      '.scss': {
        syntax: 'postcss-scss',
        plugins: ['postcss-nested']
      }
    },
  }
]

Why the need to configure CSS Modules in two places? How the two work together? I.e. what happens in what order?

Sergey Pogodin · Accepted Answer · 2021-04-24 10:47:44Z

7

They don't. css-loader does its own thing: class name transformation in CSS, and replacement of CSS imports in JS code by mappings between original and generated names.

babel-plugin-react-css-modules works independently, and it replaces styleName attributes of react components by className with correct generated names. To do so it calculates class name mappings independently from css-loader, that's why it needs separate configuration matching that of css-loader, and that's why after a few years being abandoned by its creators it has compatibility issues with latest css-loader (css-loader changed internal class name generation logic).

Shameless self-promo: I maintain an up-to-date fork of babel-plugin-react-css-modules which solves compatibility issues with latest css-loader versions.

answered Apr 24, 2021 at 10:47

Sergey Pogodin

4152 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Meglio Over a year ago

Why not send a PR into the poorly maintained original repo? The current maintainer reviews PRs from my recent experience.

Sergey Pogodin Over a year ago

Nah... the original plugin lost its compatibility with css-loader in August 2020, with release of [email protected], and it took the "maintainer" four months even to comment on the thread where it was reported: github.com/gajus/babel-plugin-react-css-modules/issues/291 It took me just a few days to fork, fix, and release my own version ¯\_(ツ)_/¯

Akaisteph7 Over a year ago

There's been no more releases of the old version since May 2019 so I'll be trying this.

Collectives™ on Stack Overflow

How do react-css-modules (babel) and css-loader (webpack) work together?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related