refactor: 💡 Shared CSS modules scoped name pattern

Author: punkbit

plugins/css-colocate/css-preprocess.ts

@@ -2,9 +2,7 @@ import fs from 'fs-extra';
 import path from 'path';
 import postcss from 'postcss';
 import postcssModules from 'postcss-modules';
-import { getTempDir, findFiles } from './utils';
-
-const generateScopedName = '[hash:base64:8]_[local]';
+import { getTempDir, findFiles, generateScopedName } from './utils';
 
 export async function preprocessCssModules(rootDir: string): Promise<void> {
   const srcDir = path.join(rootDir, 'src');

plugins/css-colocate/utils.ts

@@ -2,6 +2,12 @@ import fs from 'fs-extra';
 import { glob } from 'glob';
 import path from 'path';
 
+/**
+ * Shared CSS modules scoped name pattern.
+ * Used by both Vite config and CSS preprocessing to ensure consistency.
+ */
+export const generateScopedName = '[local]__[hash:base64:5]';
+
 export const fileExists = async (filePath: string): Promise<boolean> => {
   try {
     await fs.access(filePath);

vite.config.ts

@@ -7,6 +7,7 @@ import { externalizeDeps } from 'vite-plugin-externalize-deps';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import { visualizer } from 'rollup-plugin-visualizer';
 import { cssColocatePlugin } from './plugins/css-colocate';
+import { generateScopedName } from './plugins/css-colocate/utils';
 
 const srcDir = path.resolve(__dirname, 'src').replace(/\\/g, '/');
 
@@ -81,10 +82,7 @@ const viteConfig = defineConfig({
   css: {
     modules: {
       // Generate predictable class names for debugging in dev
-      generateScopedName:
-        process.env.NODE_ENV === 'production'
-          ? '[hash:base64:8]'
-          : '[name]__[local]__[hash:base64:5]',
+      generateScopedName,
     },
   },
   plugins: [