fix netlify-cms and sass plugin css extraction (#4379)

Author: erquhart

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

@@ -1,6 +1,8 @@
 const HtmlWebpackPlugin = require(`html-webpack-plugin`)
 const ExtractTextPlugin = require(`extract-text-webpack-plugin`)
 
+const extractCmsCss = new ExtractTextPlugin(`cms.css`)
+
 function plugins(stage) {
   const commonPlugins = [
     // Output /admin/index.html
@@ -15,7 +17,7 @@ function plugins(stage) {
     case `develop`:
       return commonPlugins
     case `build-javascript`:
-      return [...commonPlugins, new ExtractTextPlugin(`cms.css`)]
+      return [...commonPlugins, extractCmsCss]
     default:
       return []
   }
@@ -52,7 +54,7 @@ function module(config, stage) {
       config.loader(`cms-css`, {
         test: /\.css$/,
         include: [/\/node_modules\/netlify-cms\//],
-        loader: ExtractTextPlugin.extract([`css`]),
+        loader: extractCmsCss.extract([`css`]),
       })
       return config
     default:

packages/gatsby-plugin-sass/src/__tests__/gatsby-node.js

@@ -1,9 +1,7 @@
 describe(`gatsby-plugin-sass`, () => {
-  jest.mock(`extract-text-webpack-plugin`, () => {
-    return {
-      extract(...args) {
-        return { extractTextCalledWithArgs: args }
-      },
+  jest.mock(`extract-text-webpack-plugin`, () => class {
+    extract(...args) {
+      return { extractTextCalledWithArgs: args }
     }
   })
 
@@ -77,7 +75,7 @@ describe(`gatsby-plugin-sass`, () => {
           const stringified = JSON.stringify(options)
 
           it(`modifies webpack config for ${stringified}`, () => {
-            const config = { loader: jest.fn() }
+            const config = { loader: jest.fn(), merge: jest.fn() }
             const modified = modifyWebpackConfig({ config, stage }, options)
 
             expect(modified).toBe(config)

packages/gatsby-plugin-sass/src/gatsby-node.js

@@ -1,6 +1,8 @@
 const ExtractTextPlugin = require(`extract-text-webpack-plugin`)
 const { cssModulesConfig } = require(`gatsby-1-config-css-modules`)
 
+const extractSass = new ExtractTextPlugin(`styles.css`, { allChunks: true })
+
 exports.modifyWebpackConfig = ({ config, stage }, options) => {
   const sassFiles = /\.s[ac]ss$/
   const sassModulesFiles = /\.module\.s[ac]ss$/
@@ -24,16 +26,21 @@ exports.modifyWebpackConfig = ({ config, stage }, options) => {
       config.loader(`sass`, {
         test: sassFiles,
         exclude: sassModulesFiles,
-        loader: ExtractTextPlugin.extract([`css?minimize`, sassLoader]),
+        loader: extractSass.extract([`css?minimize`, sassLoader]),
       })
 
       config.loader(`sassModules`, {
         test: sassModulesFiles,
-        loader: ExtractTextPlugin.extract(`style`, [
+        loader: extractSass.extract(`style`, [
           cssModulesConfig(stage),
           sassLoader,
         ]),
       })
+
+      config.merge({
+        plugins: [extractSass],
+      })
+
       return config
     }
     case `develop-html`:
@@ -47,11 +54,16 @@ exports.modifyWebpackConfig = ({ config, stage }, options) => {
 
       config.loader(`sassModules`, {
         test: sassModulesFiles,
-        loader: ExtractTextPlugin.extract(`style`, [
+        loader: extractSass.extract(`style`, [
           cssModulesConfig(stage),
           sassLoader,
         ]),
       })
+
+      config.merge({
+        plugins: [extractSass],
+      })
+
       return config
     }
     default: {