feat: Allow setting localIdentName in css-loader

reintroducing · Aug 23, 2019 · 2a502f8 · 2a502f8
1 parent 340bdb1
commit 2a502f8
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -51,9 +51,24 @@ You can use the mode passed to set options based on the environment. All options
 ### analyzer
 [Options object](https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin) to pass through to the bundle analyzer.
 
+**default:**
+```js
+{
+    analyzerMode: isDev ? 'static' : 'disabled',
+    openAnalyzer: false,
+}
+```
+
+### cssModulesIdentName
+Allows changing the [localIdentName](https://github.com/webpack-contrib/css-loader#localidentname) that the selectors in CSS modules receive during output generation.
+
+**default:** `'[name]-[local]'`
+
 ### devServerPort
 The port to run the dev server on.
 
+**default:** `3000`
+
 ### devServerProxy
 Adds a [proxy middleware](https://webpack.js.org/configuration/dev-server/#devserverproxy) to the dev server.
 
@@ -68,3 +83,5 @@ An array of additional [rules](https://webpack.js.org/configuration/module/#modu
 
 ### sourceMap
 The style of [source map](https://webpack.js.org/configuration/devtool/#devtool) to use. Set to false for any mode to disable.
+
+**default:** `isDev ? 'cheap-module-source-map' : 'source-map'`
diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -104,9 +104,7 @@ module.exports = (mode = 'development') => {
                             options: {
                                 importLoaders: 2,
                                 modules: {
-                                    localIdentName: `[name]-[local]${
-                                        isDev ? '' : '-[hash:base64]'
-                                    }`,
+                                    localIdentName: '[name]-[local]',
                                 },
                                 sourceMap: isDev,
                             },

diff --git a/scripts/utils/get-webpack-config.js b/scripts/utils/get-webpack-config.js
@@ -7,6 +7,7 @@ function getWebpackConfig({webpack, mode, userConfig}) {
     if (userConfig) {
         const {
             analyzer,
+            cssModulesIdentName,
             devServerPort,
             devServerProxy,
             optimization,
@@ -44,17 +45,21 @@ function getWebpackConfig({webpack, mode, userConfig}) {
         };
 
         if (analyzer) {
-            const analyzerIndex = config.plugins.findIndex(plugin => {
+            const analyzerIndex = plugins.findIndex(plugin => {
                 return plugin.constructor.name === 'BundleAnalyzerPlugin';
             });
 
             if (analyzerIndex !== -1) {
                 config.plugins[analyzerIndex].opts = {
-                    ...config.plugins[analyzerIndex].opts,
+                    ...plugins[analyzerIndex].opts,
                     ...analyzer,
                 };
             }
         }
+
+        if (cssModulesIdentName) {
+            config.module.rules[1].use[1].options.modules.localIdentName = cssModulesIdentName;
+        }
     }
 
     return {