Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

aschorr's avatar

babel-plugin-react-css-modules not transforming styleName in react

In an attempt to get babel-plugin-react-css-modules working, I can't seem to get the styleName prop on react elements to be transformed to the correct thing. Regular CSS modules work fine, so when the DOM looks like:

    <div className={style.a}>hello</div>

The complied code looks like:

    <div class="_-_-_-_-resources-assets-js-components- ___index__a___1TazJ">hello</div> 

However, switching it to:

    <div styleName='a'>hello</div>  

Doesn't transform it at all... I'm using laravel mix, on top of laravel so my CSS loader looks like:

     // CSS Compilation.
    rules.push({
        test: /\.css$/,
        exclude: Config.preprocessors.postCss ? Config.preprocessors.postCss.map(postCss => postCss.src.path()) : [],
        loaders: ['style-loader', 'css-loader?importLoader=1&modules&localIdentName=[path]___[name]__[local]___[hash:base64:5]']
    });

What in the world am I missing!?

0 likes
0 replies

Please or to participate in this conversation.