babel-plugin-react-css-modules | Transforms styleName to className using compile time CSS

releted to https://github.com/babel/babel/issues/8462, runtime issues can be solved by upgrading the @babel/runtime pkg version above 7.12.0

I don't know what you have done with your configuration but you would define the config things inside .storybook/main.js. And for global style css is supposed to be included in preview.js file.

In short, you have to do the few things:

• Remove your .storybook/config.js and add .storybook/main.js with following content:

Sounds like I forgot to tell you babel-plugin-react-css-modules has an option to configure the scoped name too which is called generateScopedName.

As long as you configured this as same as css-loader, it should work then:

• .babelrc

That's interesting issue which requires us to do a few more things to make it work as following:

• babel-plugin-react-css-modules isn't working properly with css-loader in case of generating the name. But luckily we have a work around by using a temporary fix of someone @dr.pogodin/babel-plugin-react-css-modules. So just install needed packages:

The problem here is the generated hash name between babel-plugin-react-css-modules vs css-loader are now different in pattern.

In order to fix this, since babel-plugin-react-css-modules is now using this pattern [path]___[name]__[local]___[hash:base64:5] by default, you just fix by configure css-loader using the same pattern as following:

Rant: One of the many reasons I'm against the create-react-app (CRA) is because of how inflexible it can be when it comes to customization. If you're looking to include features, I'd recommend creating your own webpack configuration. Why? You'll become more familiar with Webpack, how to configure it, how to work within its limits, and how to add/change/adjust packages to your needs.

That said, the CRA comes preconfigured with both global and local (module) CSS imports and it conflicts with babel-plugin-react-css-modules (BPRCM). The CRA expects .css files without module.css to be normal global imports. Meanwhile, BPRCM expects .css files to be local imports. Not only is that a conflict, but the localIdentNames are mismatched. By default, CRA looks for App.module.css where module.css specifies it's a modulated import, like so: import { App } from "./App.module.css";. As such it assigns localIdentNames as [file/folder]_[local]_[hash] as mentioned here, here and within an ejected config/webpack.config.js (Lines 432-456 -- it utilizes the react-dev-utils/getCSSModuleLocalIdent package).

In order to resolve these conflicts, you'll need to establish a localIdentName (by default BPCRM uses this generateScopedName: [path]___[name]__[local]___[hash:base64:5] (4th option in the table), so I'll be using it for my example below), then you'll need to add BPRCM to the webpack.config.js under babel-loader because the CRA doesn't look for a babel configuration, then you'll have to remove the CSS module imports rule, and lastly, you'll need to add some options to their global CSS rule to make it local and utilize the localIdentName.

Here's a working example: https://github.com/mattcarlotta/cra-css-modules

To utilize the repo above:

• open a terminal window on the ~/Desktop and clone the repo: git clone git@github.com:mattcarlotta/cra-css-modules.git
• cd into the cra-css-modules folder and type yarn install or npm install
• type yarn start or npm start to run the example

What I changed:

• Declared a localIdentName to match BPRCM's default scoped class name (you can change this name to whatever you like and it'll still work with the example repo above).
• Added BPRCM to the babel-loader rule.
• Added a modules configuration to switch the global CSS rule to a local CSS rule
• Removed the local modules CSS rule.
• Changed all classNames to styleName in the App.js file.