Next.js: Allow users to configure options of css-loader

Created on 19 Feb 2020 · 8Comments · Source: vercel/next.js

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.

Source

loteoo

👍28 🚀11

Most helpful comment

Yes! localIdentName name please!

neo on 1 May 2020

👍17 ❤1

All 8 comments

Looks like a duplicate of https://github.com/zeit/next.js/issues/10339

martpie on 26 Feb 2020

@martpie #10339 and the related PR adds support for scss loader options but not css loader options. This would help solve many of the open issues regarding the enforced pure css modules option.

davidgolden on 10 Apr 2020

👍3

Yes! localIdentName name please!

neo on 1 May 2020

👍17 ❤1

the same problem for me. I'm migrating CRA project to nextjs, I have encountered the camelCase of css module problem

wangzhe1995 on 6 Jun 2020

@wangzhe1995

module.exports = {
    ...nextConfig,
    webpack(config, { dev, isServer }) {
        config.module.rules[1].oneOf.forEach((moduleLoader, i) => {
            Array.isArray(moduleLoader.use) && moduleLoader.use.forEach((l) => {
                if(l.loader.includes("css-loader")) {
                    l.options = {
                        ...l.options,
                        localsConvention: "camelCaseOnly"
                    }
                }
            });
        });
        config.node = { fs: "empty" };
        return config;
    },
}