How to export class names from CSS Modules that follow BEM naming convention?

338 Views Asked by At

I want to have ability to import class names from css modules in BEM naming convention like that:

import {
  block,
  block__element,
  block__element_modifier
} from '@styles/name.module.css';

But MiniCssExtractPlugin documentation says:

Named export for CSS Modules ⚠ Names of locals are converted to camelCase.

So it basically works this way:

//styles.css

.foo-baz {
  color: red;
}
.bar {
  color: blue;
}

//index.js

import { fooBaz, bar } from "./styles.css";

console.log(fooBaz, bar);

So is there any workaround to preserve the underscrore (_) for those classes exported from css modules and avoid the convertion to camelCase?

Piece of my webpack config that processes css (in case you need it):

      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              esModule: true,
              modules: {
                auto: true,
                localIdentName: isDev ? '[local]___[path][name]' : '[hash:base64]',
                namedExport: true,
                exportGlobals: true,
              },              
            },
          },
        ]        
      },

p.s. Yes, I am aware that those imported css class variables contain hashed unique values, I just want to follow the BEM convention for better development experience.

0

There are 0 best solutions below