improved config

jaredpalmer · Dec 20, 2017 · 23f45ed · 23f45ed
1 parent 263b5a1
commit 23f45ed
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 146 deletions.
diff --git a/examples/with-css-modules/package.json b/examples/with-css-modules/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "razzle-cssmodules",
+  "name": "razzle-examples-with-cssmodules",
   "version": "0.1.0",
   "license": "MIT",
   "scripts": {

diff --git a/examples/with-css-modules/razzle.config.js b/examples/with-css-modules/razzle.config.js
@@ -8,9 +8,6 @@ module.exports = {
   modify(config, { target, dev }, webpack) {
     const appConfig = Object.assign({}, config);
     const isServer = target !== "web";
-
-    // Options for PostCSS as we reference these options twice
-    // Adds vendor prefixing to support IE9 and above
     const postCSSLoaderOptions = {
       ident: "postcss", // https://webpack.js.org/guides/migrating/#complex-options
       plugins: () => [
@@ -27,102 +24,44 @@ module.exports = {
       ]
     };
 
-    if (dev) {
-      appConfig.module.rules = appConfig.module.rules.map(rule => {
-        if (rule.test && !!".css".match(rule.test)) {
-          return {
-            test: /\.css$/,
-            exclude: /\.module\.css$/,
-            use: isServer
-              ? [
-                  {
-                    loader: "css-loader",
-                    options: {
-                      importLoaders: 1
-                    }
-                  }
-                ]
-              : [
-                  require.resolve("style-loader"),
-                  {
-                    loader: require.resolve("css-loader"),
-                    options: {
-                      importLoaders: 1
-                    }
-                  },
-                  {
-                    loader: require.resolve("postcss-loader"),
-                    options: postCSSLoaderOptions
-                  }
-                ]
-          };
+    const cssConfig = modules =>
+      [
+        {
+          loader: require.resolve("css-loader"),
+          options: {
+            importLoaders: 1,
+            minimize: !dev,
+            sourceMap: !dev,
+            modules: modules,
+            localIdentName: modules ? "[path]__[name]___[local]" : undefined
+          }
+        },
+        isServer && {
+          loader: require.resolve("postcss-loader"),
+          options: postCSSLoaderOptions
         }
-        return rule;
-      });
+      ].filter(x => !!x);
+    const css = cssConfig(false);
+    const cssModules = cssConfig(true);
 
-      appConfig.module.rules.push({
-        test: /\.module\.css$/,
-        use: isServer
-          ? [
-              "isomorphic-style-loader",
-              {
-                loader: require.resolve("css-loader"),
-                options: {
-                  importLoaders: 1,
-                  modules: true,
-                  localIdentName: "[path]__[name]___[local]"
-                }
-              }
-            ]
-          : [
-              require.resolve("style-loader"),
-              {
-                loader: require.resolve("css-loader"),
-                options: {
-                  importLoaders: 1,
-                  modules: true,
-                  localIdentName: "[path]__[name]___[local]"
-                }
-              },
-              {
-                loader: require.resolve("postcss-loader"),
-                options: postCSSLoaderOptions
-              }
-            ]
-      });
-    } else if (!dev && !isServer) {
-      appConfig.module.rules = appConfig.module.rules.map(rule => {
-        if (rule.test && !!".css".match(rule.test)) {
-          return {
-            test: /\.css$/,
-            exclude: /\.module\.css$/,
-            use: ExtractTextPlugin.extract({
-              fallback: {
-                loader: require.resolve("style-loader"),
-                options: {
-                  hmr: false
-                }
-              },
-              use: [
-                {
-                  loader: require.resolve("css-loader"),
-                  options: {
-                    importLoaders: 1,
-                    minimize: true,
-                    sourceMap: true
-                  }
-                },
-                {
-                  loader: require.resolve("postcss-loader"),
-                  options: postCSSLoaderOptions
-                }
-              ]
-            })
-          };
-        }
-        return rule;
-      });
+    const i = appConfig.module.rules.findIndex(
+      rule => rule.test && !!".css".match(rule.test)
+    );
 
+    if (!dev && !isServer) {
+      appConfig.module.rules[i] = {
+        test: /\.css$/,
+        exclude: /\.module\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: {
+            loader: require.resolve("style-loader"),
+            options: {
+              hmr: false
+            }
+          },
+          use: css
+        })
+      };
       appConfig.module.rules.push({
         test: /\.module\.css$/,
         use: ExtractTextPlugin.extract({
@@ -132,67 +71,44 @@ module.exports = {
               hmr: false
             }
           },
-          use: [
-            {
-              loader: require.resolve("css-loader"),
-              options: {
-                importLoaders: 1,
-                minimize: true,
-                sourceMap: true,
-                modules: true,
-                localIdentName: "[path]__[name]___[local]"
-              }
-            },
-            {
-              loader: require.resolve("postcss-loader"),
-              options: postCSSLoaderOptions
-            }
-          ]
+          use: cssModules
         })
       });
-
       appConfig.plugins.push(
         new ExtractTextPlugin("static/css/[name].[contenthash:8].css")
       );
     } else if (!dev && isServer) {
-      appConfig.module.rules = appConfig.module.rules.map(rule => {
-        if (rule.test && !!".css".match(rule.test)) {
-          return {
-            test: /\.css$/,
-            exclude: /\.module\.css$/,
-            use: [
-              {
-                loader: require.resolve("css-loader"),
-                options: {
-                  importLoaders: 1,
-                  minimize: true,
-                  sourceMap: true
-                }
-              }
-            ]
-          };
-        }
-        return rule;
+      appConfig.module.rules[i] = {
+        test: /\.css$/,
+        exclude: /\.module\.css$/,
+        use: css
+      };
+      appConfig.module.rules.push({
+        test: /\.module\.css$/,
+        use: [
+          !isServer && require.resolve("isomorphic-style-loader"),
+          ...cssModules
+        ].filter(x => !!x)
       });
-
+    } else {
+      appConfig.module.rules[i] = {
+        test: /\.css$/,
+        exclude: /\.module\.css$/,
+        use: [!isServer && require.resolve("style-loader"), ...css].filter(
+          x => !!x
+        )
+      };
       appConfig.module.rules.push({
         test: /\.module\.css$/,
         use: [
-          "isomorphic-style-loader",
-          {
-            loader: require.resolve("css-loader"),
-            options: {
-              importLoaders: 1,
-              minimize: true,
-              sourceMap: true,
-              modules: true,
-              localIdentName: "[path]__[name]___[local]"
-            }
-          }
-        ]
+          isServer
+            ? require.resolve("isomorphic-style-loader")
+            : require.resolve("style-loader"),
+          ...cssModules
+        ].filter(x => !!x)
       });
     }
 
-    loader: return appConfig;
+    return appConfig;
   }
 };