Implement extract text plugin helper (#4559)

* fix extract-text-webpack-plugin version

* migrate Gatsby core to extract text plugin helper

* migrate Sass plugin to extract text plugin helper

packages/gatsby-1-config-extract-plugin/package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "extract-text-webpack-plugin": "^3.0.2"
+    "extract-text-webpack-plugin": "^1.0.1"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

packages/gatsby-plugin-sass/package.json

@@ -8,15 +8,15 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "extract-text-webpack-plugin": "^1.0.1",
     "gatsby-1-config-css-modules": "^1.0.10",
     "node-sass": "^4.5.2",
     "sass-loader": "^4.1.1",
     "webpack": "^1.13.3"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "cross-env": "^5.0.5"
+    "cross-env": "^5.0.5",
+    "gatsby-1-config-extract-plugin": "^1.0.1"
   },
   "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sass#readme",
   "keywords": [

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

@@ -1,7 +1,11 @@
 describe(`gatsby-plugin-sass`, () => {
-  jest.mock(`extract-text-webpack-plugin`, function ExtractTextPlugin() {
-    this.extract = (...args) => {return { extractTextCalledWithArgs: args }}
-  })
+  jest.mock(`gatsby-1-config-extract-plugin`, () => {return {
+    extractTextPlugin: () => {return {
+      extract: (...args) => {
+        return { extractTextCalledWithArgs: args }
+      },
+    }},
+  }})
   const { modifyWebpackConfig } = require(`../gatsby-node`)
   const cssLoader = expect.stringMatching(/^css/)
   ;[
@@ -75,15 +79,6 @@ describe(`gatsby-plugin-sass`, () => {
             const config = {
               loader: jest.fn(),
               merge: jest.fn(),
-              resolve: jest.fn(() => {return {
-                plugins: [
-                  new function ExtractTextPlugin() {
-                    this.extract = (...args) => {return {
-                      extractTextCalledWithArgs: args,
-                    }}
-                  }(),
-                ],
-              }}),
             }
             const modified = modifyWebpackConfig({ config, stage }, options)
 

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

@@ -1,22 +1,11 @@
 const { cssModulesConfig } = require(`gatsby-1-config-css-modules`)
+const { extractTextPlugin } = require(`gatsby-1-config-extract-plugin`)
 
 exports.modifyWebpackConfig = ({ config, stage }, options) => {
   const sassFiles = /\.s[ac]ss$/
   const sassModulesFiles = /\.module\.s[ac]ss$/
   const sassLoader = `sass?${JSON.stringify(options)}`
 
-  /**
-   * Get the first instance of `ExtractTextPlugin` from the plugins array. This
-   * relies on other plugins not intentionally inserting their own instance of
-   * `ExtractTextPlugin` before Gatsby's own.
-   */
-  const extractPlugin = config
-    .resolve()
-    .plugins.find(
-      plugin =>
-        plugin.constructor && plugin.constructor.name === `ExtractTextPlugin`
-    )
-
   switch (stage) {
     case `develop`: {
       config.loader(`sass`, {
@@ -35,12 +24,12 @@ exports.modifyWebpackConfig = ({ config, stage }, options) => {
       config.loader(`sass`, {
         test: sassFiles,
         exclude: sassModulesFiles,
-        loader: extractPlugin.extract([`css?minimize`, sassLoader]),
+        loader: extractTextPlugin(stage).extract([`css?minimize`, sassLoader]),
       })
 
       config.loader(`sassModules`, {
         test: sassModulesFiles,
-        loader: extractPlugin.extract(`style`, [
+        loader: extractTextPlugin(stage).extract(`style`, [
           cssModulesConfig(stage),
           sassLoader,
         ]),
@@ -59,7 +48,7 @@ exports.modifyWebpackConfig = ({ config, stage }, options) => {
 
       config.loader(`sassModules`, {
         test: sassModulesFiles,
-        loader: extractPlugin.extract(`style`, [
+        loader: extractTextPlugin(stage).extract(`style`, [
           cssModulesConfig(stage),
           sassLoader,
         ]),

packages/gatsby/package.json

@@ -42,7 +42,6 @@
     "dotenv": "^4.0.0",
     "express": "^4.14.0",
     "express-graphql": "^0.6.6",
-    "extract-text-webpack-plugin": "^1.0.1",
     "fast-levenshtein": "~2.0.4",
     "file-loader": "^0.9.0",
     "flat": "^2.0.1",
@@ -123,6 +122,7 @@
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "cross-env": "^5.0.5",
+    "gatsby-1-config-extract-plugin": "^1.0.1",
     "nyc": "^7.0.0",
     "rimraf": "^2.6.1"
   },

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

@@ -6,11 +6,11 @@ import path from "path"
 import webpack from "webpack"
 import dotenv from "dotenv"
 import Config from "webpack-configurator"
-import ExtractTextPlugin from "extract-text-webpack-plugin"
 import StaticSiteGeneratorPlugin from "static-site-generator-webpack-plugin"
 import { StatsWriterPlugin } from "webpack-stats-plugin"
 import FriendlyErrorsWebpackPlugin from "friendly-errors-webpack-plugin"
 import { cssModulesConfig } from "gatsby-1-config-css-modules"
+import { extractTextPlugin } from "gatsby-1-config-extract-plugin"
 
 // This isn't working right it seems.
 // import WebpackStableModuleIdAndHash from 'webpack-stable-module-id-and-hash'
@@ -25,16 +25,6 @@ const genBabelConfig = require(`./babel-config`)
 const { withBasePath } = require(`./path`)
 const HashedChunkIdsPlugin = require(`./hashed-chunk-ids-plugin`)
 
-// Use separate extract-text-webpack-plugin instances for each stage per the docs
-const extractDevelopHtml = new ExtractTextPlugin(`build-html-styles.css`)
-const extractBuildHtml = new ExtractTextPlugin(`build-html-styles.css`, {
-  allChunks: true,
-})
-const extractBuildCss = new ExtractTextPlugin(`styles.css`, { allChunks: true })
-const extractBuildJavascript = new ExtractTextPlugin(`build-js-styles.css`, {
-  allChunks: true,
-})
-
 // Five stages or modes:
 //   1) develop: for `gatsby develop` command, hot reload and CSS injection into page
 //   2) develop-html: same as develop without react-hmre in the babel config for html renderer
@@ -213,7 +203,7 @@ module.exports = async (
             __PATH_PREFIX__: JSON.stringify(store.getState().config.pathPrefix),
             __POLYFILL__: store.getState().config.polyfill,
           }),
-          extractDevelopHtml,
+          extractTextPlugin(stage),
         ]
       case `build-css`:
         return [
@@ -223,7 +213,7 @@ module.exports = async (
             __PATH_PREFIX__: JSON.stringify(store.getState().config.pathPrefix),
             __POLYFILL__: store.getState().config.polyfill,
           }),
-          extractBuildCss,
+          extractTextPlugin(stage),
         ]
       case `build-html`:
         return [
@@ -237,7 +227,7 @@ module.exports = async (
             __PATH_PREFIX__: JSON.stringify(store.getState().config.pathPrefix),
             __POLYFILL__: store.getState().config.polyfill,
           }),
-          extractBuildHtml,
+          extractTextPlugin(stage),
         ]
       case `build-javascript`: {
         // Get array of page template component names.
@@ -314,7 +304,7 @@ module.exports = async (
             __POLYFILL__: store.getState().config.polyfill,
           }),
           // Extract CSS so it doesn't get added to JS bundles.
-          extractBuildJavascript,
+          extractTextPlugin(stage),
           // Write out mapping between chunk names and their hashed names. We use
           // this to add the needed javascript files to each HTML page.
           new StatsWriterPlugin(),
@@ -451,13 +441,13 @@ module.exports = async (
         config.loader(`css`, {
           test: /\.css$/,
           exclude: /\.module\.css$/,
-          loader: extractBuildCss.extract([`css?minimize`, `postcss`]),
+          loader: extractTextPlugin(stage).extract([`css?minimize`, `postcss`]),
         })
 
         // CSS modules
         config.loader(`cssModules`, {
           test: /\.module\.css$/,
-          loader: extractBuildCss.extract(`style`, [
+          loader: extractTextPlugin(stage).extract(`style`, [
             cssModulesConfig(stage),
             `postcss`,
           ]),
@@ -487,10 +477,10 @@ module.exports = async (
         // CSS modules
         config.loader(`cssModules`, {
           test: /\.module\.css$/,
-          loader: (stage === `build-html`
-            ? extractBuildHtml
-            : extractDevelopHtml
-          ).extract(`style`, [cssModulesConfig(stage), `postcss`]),
+          loader: extractTextPlugin(stage).extract(`style`, [
+            cssModulesConfig(stage),
+            `postcss`,
+          ]),
         })
 
         return config
@@ -507,13 +497,13 @@ module.exports = async (
           test: /\.css$/,
           exclude: /\.module\.css$/,
           // loader: `null`,
-          loader: extractBuildJavascript.extract([`css`]),
+          loader: extractTextPlugin(stage).extract([`css`]),
         })
 
         // CSS modules
         config.loader(`cssModules`, {
           test: /\.module\.css$/,
-          loader: extractBuildJavascript.extract(`style`, [
+          loader: extractTextPlugin(stage).extract(`style`, [
             cssModulesConfig(stage),
             `postcss`,
           ]),