Configure the postcss module loader in Next.js to convert kebab case classes

Question

It seems like you can configure webpack's css loader to convert the classnames in stylesheets from kebab case to camel case (see here https://github.com/webpack-contrib/css-loader#localsconvention)

How can I configure Next.js to achieve this?

I've tried modifying the webpack config like this, but it breaks the app:

module.exports = {
  // Modify webpack config
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.module.rules.push({
      test: /\.module\.css$/i,
      use: [
        'style-loader',
        {
          loader: 'postcss-loader',
          options: {
            modules: true,
            localsConvention: 'camelCase',
          },
        },
      ],
    })

    return config
  },
}

Answer 1

I think it's a live issue in Next.js and there is an ongoing discussion about it (for a long time): CSS modules - converting class names to camelCase automatically #11267

I've just run into this issue recently and didn't find any solutions yet, unfortunately.