Bundle Netlify CMS styles (gatsbyjs#3611)

* define webpack loader.exclude with array for extensibility

* generate separate CSS bundle for Netlify CMS plugin

packages/gatsby-plugin-netlify-cms/src/gatsby-node.js

@@ -1,34 +1,70 @@
 const HtmlWebpackPlugin = require(`html-webpack-plugin`)
 const HtmlWebpackIncludeAssetsPlugin = require(`html-webpack-include-assets-plugin`)
+const ExtractTextPlugin = require(`extract-text-webpack-plugin`)
+
+function plugins(stage) {
+  const commonPlugins = [
+    // Output /admin/index.html
+    new HtmlWebpackPlugin({
+      title: `Content Manager`,
+      filename: `admin/index.html`,
+      chunks: [`cms`],
+    }),
+
+    // Include the identity widget script in the html file
+    new HtmlWebpackIncludeAssetsPlugin({
+      assets: [`https://identity.netlify.com/v1/netlify-identity-widget.js`],
+      append: false,
+      publicPath: false,
+    }),
+  ]
 
-exports.modifyWebpackConfig = (
-  { config, stage },
-  { modulePath = `${__dirname}/cms.js` }
-) => {
   switch (stage) {
     case `develop`:
+      return commonPlugins
+    case `build-javascript`:
+      return [...commonPlugins, new ExtractTextPlugin(`cms.css`)]
+    default:
+      return []
+  }
+}
+
+function module(config, stage) {
+  switch (stage) {
     case `build-javascript`:
-      config.merge({
-        entry: {
-          cms: modulePath,
-        },
-        plugins: [
-          new HtmlWebpackPlugin({
-            title: `Content Manager`,
-            filename: `admin/index.html`,
-            chunks: [`cms`],
-          }),
-          new HtmlWebpackIncludeAssetsPlugin({
-            assets: [
-              `https://identity.netlify.com/v1/netlify-identity-widget.js`,
-            ],
-            append: false,
-            publicPath: false,
-          }),
-        ],
+      // Exclude Netlify CMS styles from Gatsby CSS bundle. This relies on
+      // Gatsby using webpack-configurator for webpack config extension, and
+      // also on the target loader key being named "css" in Gatsby's webpack
+      // config.
+      config.loader(`css`, {
+        exclude: [/\/node_modules\/netlify-cms\//],
+      })
+
+      // Exclusively extract Netlify CMS styles to /cms.css (filename configured
+      // above with plugin instantiation).
+      config.loader(`cms-css`, {
+        test: /\.css$/,
+        include: [/\/node_modules\/netlify-cms\//],
+        loader: ExtractTextPlugin.extract([`css`]),
       })
       return config
     default:
       return config
   }
 }
+
+exports.modifyWebpackConfig = (
+  { config, stage },
+  { modulePath = `${__dirname}/cms.js` }
+) => {
+  config.merge({
+    entry: {
+      cms: modulePath,
+    },
+    plugins: plugins(stage),
+  })
+
+  module(config, stage)
+
+  return config
+}

packages/gatsby/src/utils/webpack.config.js

@@ -372,7 +372,7 @@ module.exports = async (
     // Common config for every env.
     config.loader(`js`, {
       test: /\.jsx?$/, // Accept either .js or .jsx files.
-      exclude: /(node_modules|bower_components)/,
+      exclude: [/(node_modules|bower_components)/],
       loader: `babel`,
       query: babelConfig,
     })
@@ -409,7 +409,7 @@ module.exports = async (
       case `develop`:
         config.loader(`css`, {
           test: /\.css$/,
-          exclude: /\.module\.css$/,
+          exclude: [/\.module\.css$/],
           loaders: [`style`, `css`, `postcss`],
         })
 
@@ -434,7 +434,7 @@ module.exports = async (
       case `build-css`:
         config.loader(`css`, {
           test: /\.css$/,
-          exclude: /\.module\.css$/,
+          exclude: [/\.module\.css$/],
           loader: ExtractTextPlugin.extract([`css?minimize`, `postcss`]),
         })
 
@@ -464,7 +464,7 @@ module.exports = async (
 
         config.loader(`css`, {
           test: /\.css$/,
-          exclude: /\.module\.css$/,
+          exclude: [/\.module\.css$/],
           loader: `null`,
         })
 
@@ -489,7 +489,7 @@ module.exports = async (
 
         config.loader(`css`, {
           test: /\.css$/,
-          exclude: /\.module\.css$/,
+          exclude: [/\.module\.css$/],
           // loader: `null`,
           loader: ExtractTextPlugin.extract([`css`]),
         })