Built-in CSS Class Name Minification for Production

[jantimon]

Goals

1. Smaller bundle sizes
2. Improved load times
3. Built-in obfuscation of class names
4. Simplified developer experience (no need for custom hacks or plugins)

Background

For years, Next.js developers have been looking for ways to minify CSS class names in production builds. This feature would help us to reduce the bundle sizes, especially for larger applications

Currently, developers resort to various hacks and workarounds to achieve this, as evidenced by numerous StackOverflow questions and GitHub discussions:

• [2020] Optimize CSS class names in production builds. #14197
• [2020] Is there a way to obfuscate CSS classes on production environment? #13942
• [2020] Optimize CSS class names in production builds #62360
• [2020] nextjs-plugin-minify-classnames #17684
• [2020] how do I set up next.config.js so that the class name only contains hash? #14156
• [2021] StackOverflow: How to hash CSS class names in Next.js >17.000 views
• [2021] What's the correct way to override the CSS modules default "localIdentName"? #20876
• [2021] How to get random classnames #28572
• [2022] How can I change the format of class names generated by CSS Modules in Next.js? #37196
• [2023] It's useful to custom css module 'localIdentName' or just use hashed css name in production. #44781
• [2023] next.config.js localIdentName 13.04 #53302
• [2024] Optimize CSS Modules classnames #62731
• [2024] CSS Modules hash and next/font error #60851

Those solutions always try to change the configuration of the css-loader of the default next.js webpack config to inject a custom localIdentName:

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

Proposal

With the introduction of the experimental Lightning CSS loader, we have an excellent opportunity to implement this feature officially. I propose adding CSS class name minification as a built-in feature for production builds when using Lightning CSS.

Implementation Suggestion

Currently, the Lightning CSS loader uses the pattern '[name]__[hash]__[local]' for class names:

next.js/packages/next/src/build/webpack/loaders/lightningcss-loader/src/loader.ts

Lines 365 to 370 in 2a87b33

	cssModules: options.modules
	? {
	pattern: process.env.__NEXT_TEST_MODE
	? '[name]__[local]'
	: '[name]__[hash]__[local]',
	}

For production builds, we could change this to _[hash].

This approach is safe because CSS class names must begin with an underscore (_) or a letter (a–z), followed by any number of hyphens, underscores, letters, or numbers.