kebab-case to camelCase via localsConvention in css-loader 3.4.2 not working

Question

For testing/learning purposes I am using an ejected version of create-react-app 3.4.1 which comes with css-loader 3.4.2, and I am trying to reproduce these results where the css selectors are written in kebab-case, but the js styles object converts them to camelCase:

styles.css

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

index.js

import styles from './styles.css';

console.log(styles);
// expected result: { fooBaz, bar }
// actual, default results: { foo-baz, bar }

According to the css-loader changelog in version 3.0.0:

exportLocalsStyle option was remove in favor localsConvention option, also it is accept only {String} value (use 'camelCase' value if you previously value was true and 'asIs' if you previously value was false)

So I tried to do that:

webpack.config.js

...
{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction && shouldUseSourceMap,
    localsConvention: "camelCase", // my only addition is this line
  }),
  sideEffects: true,
},
...

Running npm start and npm run build both work successfully, however the conversion does not happen and I am still stuck with kebab-case in my js files, even when adding a console.log(styles) on my App.js file, the output object printed to the console is still kebab-case keys and subsequent kebab-case values.

Am I missing something here? Perhaps It's very possible I don't have a clear understanding on the pre/post css compiling process and I am attempting to inject this logic in the wrong place? Does anyone have a working example of utilizing this kebab to camelCase capabilities in css-loader 3.*?

Sidenote: I do not want to update the css-loader package to it's latest version, I am intending on bringing this information back into a non-ejected create-react-app and then update the config with craco - the less I have to change the better.

Answer 1

I got this fixed by exportLocalsConvention in modules section:

{
    loader: 'css-loader',
    options: {
        modules: {
            localIdentName: '[name]_[local]_[hash:base64:6]',
            exportLocalsConvention: 'camelCase'
        }
    }
},

Answer 2

I got this working by specifying localsConvention option as,

{
    loader: 'css-loader',
     options: { 
        modules: {
            localIdentName: '[name]_[local]_[hash:base64:5]',
        },
        localsConvention: 'camelCase'
     }
},

Hope this helps someone, as I had to spend few hours to find the correct fix.