From 9aef740866331ce6e5aa8af7d512b09b0f050bac Mon Sep 17 00:00:00 2001
From: Andreas Richter <andy@selfstudy.plus>
Date: Wed, 20 Jun 2018 17:20:00 -0400
Subject: [PATCH] WIP Update netlify-cms plugin to work in v2.

This currently works fine when using "gatsby develop" but fails in production when using "gatsy build".
In a production site the cms code is affected by the webpackJsonP wrappings and dynamic loading.
I added a template to specify the config file location and define a page context to make the script loader happy.
---
 .../gatsby-plugin-netlify-cms/package.json    |  4 +-
 .../src/gatsby-node.js                        | 98 +++++++++----------
 .../gatsby-plugin-netlify-cms/template.html   | 11 +++
 3 files changed, 60 insertions(+), 53 deletions(-)
 create mode 100644 packages/gatsby-plugin-netlify-cms/template.html

diff --git a/packages/gatsby-plugin-netlify-cms/package.json b/packages/gatsby-plugin-netlify-cms/package.json
index a80b0c52c2fff..deeac8497bc3c 100644
--- a/packages/gatsby-plugin-netlify-cms/package.json
+++ b/packages/gatsby-plugin-netlify-cms/package.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "@babel/runtime": "7.0.0-beta.51",
     "html-webpack-include-assets-plugin": "^1.0.4",
-    "html-webpack-plugin": "^2.30.1",
+    "html-webpack-plugin": "^3.2.0",
     "netlify-cms": "^1.3.5",
     "netlify-identity-widget": "^1.4.11"
   },
@@ -29,7 +29,7 @@
   "license": "MIT",
   "main": "index.js",
   "peerDependencies": {
-    "extract-text-webpack-plugin": "^1.0.1",
+    "mini-css-extract-plugin": "^0.4.0",
     "gatsby": ">2.0.0-alpha",
     "netlify-cms": "^1.0.0"
   },
diff --git a/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js b/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js
index dfe485112b478..d2212779caba9 100644
--- a/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js
+++ b/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js
@@ -1,74 +1,70 @@
 const HtmlWebpackPlugin = require(`html-webpack-plugin`)
-const ExtractTextPlugin = require(`extract-text-webpack-plugin`)
+const ExtractTextPlugin = require(`mini-css-extract-plugin`)
+const path = require(`path`)
 
-const extractCmsCss = new ExtractTextPlugin(`cms.css`)
+const extractCmsCss = new ExtractTextPlugin({
+  filename: `cms.css`,
+})
 
-function plugins(stage) {
+function plugins(stage, rules) {
   const commonPlugins = [
     // Output /admin/index.html
     new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, `./template.html`),
       title: `Content Manager`,
       filename: `admin/index.html`,
-      chunks: [`cms`],
+      entryPoint: `cms`,
     }),
   ]
 
   switch (stage) {
     case `develop`:
-      return commonPlugins
+      return {
+        plugins: commonPlugins,
+        rules: [],
+      }
     case `build-javascript`:
-      return [...commonPlugins, extractCmsCss]
+      return {
+        plugins: [...commonPlugins, extractCmsCss],
+        rules: [
+          {
+            test: /\.css$/,
+            include: [/\/node_modules\/netlify-cms\//],
+            loader: extractCmsCss.loader,
+          },
+        ],
+      }
+
     default:
       return []
   }
 }
 
-/**
- * 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.
- */
-function excludeFromLoader(key, config) {
-  config.loader(key, ({ exclude, ...configRest }) => {
-    const regex = /\/node_modules\/netlify-cms\//
-    if (!exclude) {
-      return { ...configRest, exclude: regex }
-    }
-    if (Array.isArray(exclude)) {
-      return { ...configRest, exclude: [...exclude, regex] }
+exports.onCreateWebpackConfig = ({ actions, stage, rules, getConfig }, { modulePath }) => {
+  const info = plugins(stage, rules)
+  const config = getConfig()
+  let update = false
+  config.module.rules.forEach((rule) => {
+    if (rule.test && (rule.test.toString() === `.css$`)) {
+      rule.exclude = rule.exclude || []
+      rule.exclude.push(/\/node_modules\/netlify-cms\//)
+      update = true
     }
-    return { ...configRest, exclude: [exclude, regex] }
   })
-}
-
-function module(config, stage) {
-  switch (stage) {
-    case `build-css`:
-      excludeFromLoader(`css`, config)
-      return config
-    case `build-javascript`:
-      excludeFromLoader(`css`, config)
-
-      // 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: extractCmsCss.extract([`css`]),
-      })
-      return config
-    default:
-      return config
+  if (info.rules && info.rules.length) {
+    info.rules.forEach((rule) => {
+      config.module.rules.push(rule)
+      update = true
+    })
+  }
+  if (info.plugins && info.plugins.length) {
+    info.plugins.forEach((plugin) => {
+      config.plugins.push(plugin)
+      update = true
+    })
+  }
+  if (update) {
+    config.entry.cms = [`${__dirname}/cms.js`, modulePath].filter((d) => d)
+    actions.replaceWebpackConfig(config)
   }
-}
-
-exports.onCreateWebpackConfig = ({ actions, stage }, { modulePath }) => {
-  const config = actions.setWebpackConfig({
-    entry: {
-      cms: [`${__dirname}/cms.js`, modulePath].filter(p => p),
-    },
-    plugins: plugins(stage),
-  })
-
-  module(config, stage)
 }
diff --git a/packages/gatsby-plugin-netlify-cms/template.html b/packages/gatsby-plugin-netlify-cms/template.html
new file mode 100644
index 0000000000000..9837b6ada2bd1
--- /dev/null
+++ b/packages/gatsby-plugin-netlify-cms/template.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link type="text/yaml" rel="cms-config-url" href="/admin/config.yml"/>
+    <script type="text/javascript">window.page={jsonName:'cms'};</script>
+  </head>
+  <body>
+  </body>
+</html>
\ No newline at end of file