Update the css loader to simplifty the CSS modules classnames (#246)

gsoft-inc · Apr 24, 2024 · 782ff9b · 782ff9b
2 parents 6b0c0ae + 1fbe8ce
commit 782ff9b
Showing 1 changed file with 25 additions and 0 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -58,8 +58,33 @@ const storybookConfig: StorybookConfig = {
             })
         ].filter(Boolean);
 
+        // Modify the css-loader options to simplify the class names
+        // By default, with the config, the classnames are like this: GETEs8cGi4WwwvV1ooFy MUs8LC8twKwy5uAnhOWJ PafTkO4uwI6M3m4HX7JI
+        // With this new config, the classnames are like this: hop-Button___GETEs hop-Button--primary___MUs8L hop-Button--md___PafTk
+        for (const rule of config.module?.rules || []) {
+            if (typeof rule === "object" && rule?.use && Array.isArray(rule.use)) {
+                for (const loader of rule.use) {
+                    if (typeof loader === "object" && loader?.loader?.includes("css-loader")) {
+                        const cssLoader = loader;
+                        if (cssLoader && typeof cssLoader === "object") {
+                            const previousOptions = typeof cssLoader.options === "string" ? { } : cssLoader.options;
+                            cssLoader.options = {
+                                ...previousOptions,
+                                modules: {
+                                    ...((typeof previousOptions?.modules === "string" ? { mode: previousOptions?.modules } : previousOptions?.modules)),
+                                    auto: true,
+                                    localIdentName: "[local]___[hash:base64:5]"
+                                }
+                            };
+                        }
+                    }
+                }
+            }
+        }
+
         return config;
     }
 };
 
+
 export default storybookConfig;