Allow users to configure options of css-loader

Feature request

Allow users to configure options of css-loader or override options of postcss-modules.

Is your feature request related to a problem? Please describe.

With the previous release of Next.js (9.1), I was using the next-css plugin to use CSS modules and the cssLoaderOptions as seen here.

My config looks like this:

module.exports = withCSS({
    cssModules: true,
    cssLoaderOptions: {
        localIdentName: '[local]__[hash:base64:5]',
        camelCase: true,
    },

Moving to 9.2, I would like to stop using the next-css plugin and instead use the out-of-the-box support from the new release, but I have not found a way to set the camelCase option to true, which breaks my app without it. (I use the camelCase transform everywhere)

The localIdentName would also be nice to be able to configure, since it gives users opportunity to change the resulting CSS class names that end users see, but it’s more of a “nice to have” at this point. Not a deal breaker.

Describe the solution you’d like

Doing something like what Gatsby.js does would be great: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-postcss#postcss-plugins (scroll down at the end)

In Next.js, this could be by supporting a cssLoaderOptions object to the postcss.config.js file. Example:

postcss.config.js

module.exports = {
    cssLoaderOptions: {
        localIdentName: '[local]__[hash:base64:5]',  // Easier debug
        camelCase: true,  // Respect common style guides in both CSS and JS
        // More options could go here...
    },
    plugins: {
        'postcss-preset-env': {},
        'postcss-nested': {},
    }
};

Describe alternatives you’ve considered

Being able to change the configuration of postcss-modules in the postcss.config.js file would also cover most cases. It is currently “already configured by next.js”, but being able to override it could give users many more options to play with, such as camelCase, generateScopedName, globalModulePaths which are all very sensible options with real use cases.

More context and motivation behind this request

I know Next.js is trying to make life easier for it’s users by making a lot of choices for them, but it should always be possible for the users to override those choices if needed. Going too far in this direction will be like CRA all over again. I don’t want to start “ejecting” out of parts of Next.js.

I will keep using next-css until these configurations are supported, but dropping it from my app would be very appreciated as it sounds like it is going to be deprecated in the future.

Bonus: why do I care about the camelCase option

Using dashes in CSS class names is a solid convention that has been around since the beginning of time in the land of CSS. Using camelCase properties in javascript is also the way to go (common style-guides and linters will enforce this). Since CSS modules bridges the gap between the two worlds, it makes a lot of sense to give this option.

[neo]

Yes! localIdentName name please!

[ShanonJackson]

Again you’ll want to do something like this just modify your webpack config in next.config.js to whatever you want, this is my personal one I use to modify exportLocalsConvention so i can use kebab-case in .scss files and camelCase in my components.

This version should work on the latest version of NextJS, the previous version will only work on versions below 10 I believe.

webpack(config, { dev }) {
  config.module.rules[1].oneOf.forEach((moduleLoader, i) => {
    Array.isArray(moduleLoader.use) &&
      moduleLoader.use.forEach((l) => {
        if (l.loader.includes("css-loader") && !l.loader.includes("postcss-loader")) {
          l.options = {
            ...l.options,
            modules: {
              ...l.options.modules,
              exportLocalsConvention: "camelCaseOnly",
            },
          };
        }
      });