How to hash CSS class names in Nextjs?

Question

How can I edit localIdentName field of css-loader in Webpack configuration in Nextjs so that I can hash/hide/obfuscate css class names?

The example below is from the New York Times. Note the class names:

I created a proposal to add this to Next.js here: github.com/vercel/next.js/discussions/69956 — jantimon
– jantimon, Commented Sep 11, 2024 at 9:42

brc-dd · Accepted Answer · 2022-12-04 14:54:40Z

30

None of the answers on this thread will work on newer Next.js versions (v11.1.3-canary.2 and above), because in PR#28529, the Next.js team has switched to a customized version of css-loader that has no defaultGetLocalIdent, nor does it checks if getLocalIndent is null or undefined.

Any solution that ultimately removes getLocalIdent from the loader configuration will lead to TypeError: getLocalIdent is not a function. In other words, it is now mandatory to provide a function as getLocalIdent. Here is an example:

const path = require('path');
const loaderUtils = require('loader-utils');

// based on https://github.com/vercel/next.js/blob/992c46e63bef20d7ab7e40131667ed3debaf67de/packages/next/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent.ts
const hashOnlyIdent = (context, _, exportName) =>
  loaderUtils
    .getHashDigest(
      Buffer.from(
        `filePath:${path
          .relative(context.rootContext, context.resourcePath)
          .replace(/\\+/g, '/')}#className:${exportName}`,
      ),
      'md4',
      'base64',
      6,
    )
    .replace(/[^a-zA-Z0-9-_]/g, '_')
    .replace(/^(-?\d|--)/, '_$1');

module.exports = {
  webpack(config, { dev }) {
    const rules = config.module.rules
      .find((rule) => typeof rule.oneOf === 'object')
      .oneOf.filter((rule) => Array.isArray(rule.use));

    if (!dev)
      rules.forEach((rule) => {
        rule.use.forEach((moduleLoader) => {
          if (
            moduleLoader.loader?.includes('css-loader') &&
            !moduleLoader.loader?.includes('postcss-loader')
          )
            moduleLoader.options.modules.getLocalIdent = hashOnlyIdent;

            // earlier below statements were sufficient:
            // delete moduleLoader.options.modules.getLocalIdent;
            // moduleLoader.options.modules.localIdentName = '[hash:base64:6]';
        });
      });

    return config;
  },
};

This works on Next v12 and v13 (without TurboPack) too.

Demo:

While development -

On production -

Demo with Experimental App Directory:

edited Dec 4, 2022 at 14:54

answered Sep 13, 2021 at 16:51

brc-dd

13.5k3 gold badges63 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

21 Comments

CodingMeSwiftly Over a year ago

I love you. What a superb, up-to-date, concise and informative answer.

Bharadwaj Giridhar Over a year ago

@agoumi Here's a great example that helped me out setting up twin.macro for obfuscating tailwind CSS (with next js) in production - github.com/ben-rogerson/twin.examples/tree/master/… Source: reddit.com/r/nextjs/comments/r9dp2c/comment/hq8zdxu

Michael Sherris Caley Over a year ago

This is not working for me with next 12.1.6

Herlon Aguiar Over a year ago

This worked for me on nextjs 12.2.0 but I needed to replace + and / with _ from the final hash. Here's my full file if anyone want's to try: gist.github.com/herlon214/7da6a39b885014a5d5f51716f6530ce4

brc-dd Over a year ago

@mayank1513 can you test this: github.com/brc-dd/next-hash-classnames/blob/with-appdir/… ?

|

user9408899 · Accepted Answer · 2021-08-29 10:49:49Z

6

Unfortunately there is no build in support in Nextjs to pass custom configuration to Webpack loaders. But we can work around it by using next.config.js.

First, create next.config.js in the root of your project directory.

For Nextjs 11

module.exports = {
  webpack(config, { buildId, dev, isServer, defaultLoaders, webpack }) {
    config.module.rules[3].oneOf.forEach((moduleLoader, i) => {
      Array.isArray(moduleLoader.use) &&
        moduleLoader.use.forEach((l) => {
          if (
            l.loader.includes("\\css-loader") &&
            !l.loader.includes("postcss-loader")
          ) {
            const { getLocalIdent, ...others } = l.options.modules;

            l.options = {
              ...l.options,
              modules: {
                ...others,
                localIdentName: "[hash:base64:6]",
              },
            };
          }
        });
    });
    return config;
  },
};

For Next.js 10.2 or a newer version:

module.exports = {
  webpack(config, { buildId, dev, isServer, defaultLoaders, webpack }) {
    config.module.rules[3].oneOf.forEach((moduleLoader, i) => {
      Array.isArray(moduleLoader.use) &&
        moduleLoader.use.forEach((l) => {
          if (
            l.loader.includes("\\css-loader") &&
            !l.loader.includes("postcss-loader")
          ) {
            const { getLocalIdent, ...others } = l.options.modules;

            l.options = {
              ...l.options,
              modules: {
                ...others,
                localIdentName: "[hash:base64:6]",
              },
            };
          }
        });
    });
    return config;
  },
};

Otherwise use this:

module.exports = {
  webpack(config, { buildId, dev, isServer, defaultLoaders, webpack }) {
    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')
          ) {
            const { getLocalIdent, ...others } = l.options.modules;

            l.options = {
              ...l.options,
              modules: {
                ...others,
                localIdentName: '[hash:base64:6]',
              },
            };
          }
        });
    });
    return config;
  },
};

If you want to hash the class names only in production, you can use process.env.NODE_ENV with an if statement. Like this:

module.exports = {
  webpack(config, { buildId, dev, isServer, defaultLoaders, webpack }) {
    if (process.env.NODE_ENV === "production") {
      ...
      ...

      return config;
    } else {
      return config;
    }
  },
};

edited Aug 29, 2021 at 10:49

answered Mar 22, 2021 at 11:02

user9408899

4,5805 gold badges21 silver badges33 bronze badges

5 Comments

jebbie Over a year ago

does anybody know how this should look for webpack 5?

user9408899 Over a year ago

@jebbie Edited the answer. Check it out.

Hieu Nguyen Trung Over a year ago

@user9408899 just tested it and it outputs the css with hashed name, but the html is still the same, so the classnames do not match between html and css, do you have any idea?

HuseyinUslu Over a year ago

any solution for next 12?

ImBIOS Over a year ago

This answer is awesome!

George Hulpoi · Accepted Answer · 2023-08-07 14:54:27Z

4

For those who use Next.js v13 and the accepted answer doesn't work. You have to change a little bit the moduleLoader condition:

if (
    moduleLoader.loader?.includes('css-loader') &&
    !moduleLoader.loader?.includes('postcss-loader') &&
    moduleLoader.options !== undefined &&
    moduleLoader.options.modules !== undefined
) {

answered Aug 7, 2023 at 14:54

George Hulpoi

6671 gold badge10 silver badges25 bronze badges

1 Comment

Richard Herries Over a year ago

If you're running node 14+ you can use optional chaining instead. moduleLoader?.options?.modules

Rukshan Jayasekara · Accepted Answer · 2021-06-28 07:16:25Z

0

This worked for me using Next.js 11:

module.exports = {
        webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
        config.module.rules[3].oneOf.forEach((moduleLoader, i) => {
          Array.isArray(moduleLoader.use) &&
            moduleLoader.use.forEach((l) => {
              if (
                l.loader.includes('\\css-loader') &&
                !l.loader.includes('postcss-loader')
              ) {
                const { getLocalIdent, ...others } = l.options.modules;
    
                l.options = {
                  ...l.options,
                  modules: {
                    ...others,
                    localIdentName: '[hash:base64:6]',
                  },
                };
              }
            });
        });
          return config;
      },
    };

edited Jun 28, 2021 at 7:16

Rukshan Jayasekara

1,9851 gold badge9 silver badges27 bronze badges

answered Jun 26, 2021 at 2:18

ImBIOS

1,1232 gold badges15 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to hash CSS class names in Nextjs?

4 Answers 4

This works on Next v12 and v13 (without TurboPack) too.

21 Comments

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

This works on Next v12 and v13 (without TurboPack) too.

21 Comments

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related