CSS modules classname output format

[KarimBenn22]

Summary

I'm looking to modify the format of the css scope name, for example this is what i'm currently getting "FormContainer-module__AS2HxW__FormContainer" and say for example i just want it as hash "AS2HxW" (just an example)

Additional information

currently using postcss, turbopack, 15.2.1-canary.2, and all configs are default from the create@next-app. I've seen alot of repos getting this format "[file]_[classname]__[hash]" but i'm not sure how did they achieve it. I also tried extending webpack 
`import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* your existing config options here */

  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
      config.module.rules.push({
        test: /\.css$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: "[path][name]__[local]",
              },
            },
          },
        ],
      });
    return config;
  },
};

export default nextConfig;
`

Example

No response

[LucasMalagueta]

To achieve a custom CSS module class name format like the one you're aiming for (e.g., "AS2HxW" instead of "FormContainer-module__AS2HxW__FormContainer"), you need to modify the localIdentName in your css-loader configuration, which controls how class names are generated in CSS Modules.

You're on the right track with extending the Webpack configuration in next.config.js. However, it looks like you're not using the correct format for the localIdentName in css-loader. You should be using localIdentName: "[local]__[hash]" to get the hash alone, and not the file or class name.

Here’s how you can modify your next.config.js to achieve this:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* your existing config options here */

  webpack: (config, { isServer }) => {
    // Modify CSS loader settings for CSS Modules
    config.module.rules.push({
      test: /\.css$/i,
      use: [
        "style-loader",
        {
          loader: "css-loader",
          options: {
            modules: {
              // Change the localIdentName format
              localIdentName: "[local]__[hash:base64:5]", // This will generate only the hash part, e.g., "AS2HxW"
            },
          },
        },
      ],
    });

    return config;
  },
};

export default nextConfig;

Explanation:

localIdentName: "[local]__[hash:base64:5]":
"[local]" is the original class name.
"[hash:base64:5]" generates a 5-character hash (you can adjust the length as needed).

CSS Modules are activated by default when you use the next setup with PostCSS, so you only need to modify the localIdentName within the css-loader options.

The base64 hash length (in this example 5) can be changed depending on how long you want your hash to be.
With this change, your class names will now follow the pattern "Classname__[hash]" (e.g., "FormContainer__AS2HxW"), without including the file or full classname in the output.

If possible, could you kindly validate my answer when you have a moment? I really appreciate your attention, and I hope I was able to help!

[icyJoseph]

🤔 I am not sure that's gonna cut it... generally, what we need to do is find the rule, rather, and then mutate it. See these threads, where people try all kinds of approaches:

• Allow users to configure options of css-loader #10584
• Possibility to pass options to css-loader and sass-loader when using (s)css modules #10339

The tricky part is that, the loader is compiled by Next.js IIRC. Perhaps one could unshift, rather than push, but I haven't tested that myself.

Also, OP is using Next 15, which supports TypeScript, and typing this stuff is really fun! 😅

[KarimBenn22]

To achieve a custom CSS module class name format like the one you're aiming for (e.g., "AS2HxW" instead of "FormContainer-module__AS2HxW__FormContainer"), you need to modify the localIdentName in your css-loader configuration, which controls how class names are generated in CSS Modules.

You're on the right track with extending the Webpack configuration in next.config.js. However, it looks like you're not using the correct format for the localIdentName in css-loader. You should be using localIdentName: "[local]__[hash]" to get the hash alone, and not the file or class name.

Here’s how you can modify your next.config.js to achieve this:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* your existing config options here */

  webpack: (config, { isServer }) => {
    // Modify CSS loader settings for CSS Modules
    config.module.rules.push({
      test: /\.css$/i,
      use: [
        "style-loader",
        {
          loader: "css-loader",
          options: {
            modules: {
              // Change the localIdentName format
              localIdentName: "[local]__[hash:base64:5]", // This will generate only the hash part, e.g., "AS2HxW"
            },
          },
        },
      ],
    });

    return config;
  },
};

export default nextConfig;

Explanation:

localIdentName: "[local]__[hash:base64:5]": "[local]" is the original class name. "[hash:base64:5]" generates a 5-character hash (you can adjust the length as needed).

CSS Modules are activated by default when you use the next setup with PostCSS, so you only need to modify the localIdentName within the css-loader options.

The base64 hash length (in this example 5) can be changed depending on how long you want your hash to be. With this change, your class names will now follow the pattern "Classname__[hash]" (e.g., "FormContainer__AS2HxW"), without including the file or full classname in the output.

If possible, could you kindly validate my answer when you have a moment? I really appreciate your attention, and I hope I was able to help!

After further digging further in nextjs docs, i've came across this
"""
Good to know:

Turbopack for Next.js does not require loaders nor loader configuration for built-in functionality. Turbopack has built-in support for CSS and compiling modern JavaScript, so there's no need for css-loader, postcss-loader, or babel-loader if you're using @babel/preset-env. """
and this
"""
Only loaders that return JavaScript code are supported. Loaders that transform files like stylesheets or images are not currently supported.
"""
So i guess it's not currently possible with turbopack, atleast on the dev server?