Bundle Netlify CMS styles

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`]),
  })