add extract-text-webpack-plugin helper package (#4532)

packages/gatsby-1-config-extract-plugin/.gitignore

@@ -0,0 +1,3 @@
+/*.js
+!src/index.js
+yarn.lock

packages/gatsby-1-config-extract-plugin/.npmignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+*.un~
+yarn.lock
+src
+flow-typed
+coverage
+decls
+examples

packages/gatsby-1-config-extract-plugin/README.md

@@ -0,0 +1,38 @@
+# gatsby-1-config-extract-plugin
+
+extract-text-webpack-plugin instance getter for Gatsby v1 plugins. Allows all plugins to share the
+same instance. Should only be used by plugins that output styles for the main entry point and
+bundle (which is the vast majority of style plugins).
+
+## Install
+
+`npm install gatsby-1-config-extract-plugin --save-dev`
+
+## How to use
+
+This module exports two named functions, `extractTextPlugin` and `extractTextFilename`. Note that
+Gatsby's webpack config includes the extract plugin instances in the `plugins` array, so plugins
+that use this module don't need to - just use it's `extract` method in your loaders.
+
+**`extractTextPlugin(stage)`**
+
+Accepts the current stage name and returns the appropriate extract-text-webpack-plugin instance.
+Anywhere you would normally use `new ExtractTextPlugin()`, use this instead.
+
+**`extractTextFilename(stage)`**
+
+Accepts the current stage name and returns the name of the extracted text output file. Not required
+for most use cases.
+
+```javascript
+// in gatsby-node.js
+const { extractTextPlugin } = require(`gatsby-1-config-extract-plugin`)
+
+exports.modifyWebpackConfig = ({ config, stage }) => {
+ switch(stage) {
+ case `build-css`: {
+ loader: extractTextPlugin(stage).extract(`style`, `css`)
+ }
+ }
+};
+```

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

@@ -0,0 +1,29 @@
+{
+ "name": "gatsby-1-config-extract-plugin",
+ "description": "extract-text-webpack-plugin instance getter for Gatsby v1 plugins",
+ "version": "1.0.0",
+ "author": "Shawn Erquhart<shawn@erquh.art>",
+ "bugs": {
+ "url": "https://github.com/gatsbyjs/gatsby/issues"
+ },
+ "dependencies": {
+ "babel-runtime": "^6.26.0",
+ "extract-text-webpack-plugin": "^3.0.2"
+ },
+ "devDependencies": {
+ "babel-cli": "^6.26.0",
+ "cross-env": "^5.0.5"
+ },
+ "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-1-config-extract-plugin#readme",
+ "keywords": [
+ "gatsby"
+ ],
+ "license": "MIT",
+ "main": "index.js",
+ "repository": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-1-config-extract-plugin",
+ "scripts": {
+ "build": "babel src --out-dir . --ignore __tests__",
+ "prepublish": "cross-env NODE_ENV=production npm run build",
+ "watch": "babel -w src --out-dir . --ignore __tests__"
+ }
+}

packages/gatsby-1-config-extract-plugin/src/__tests__/index.js

@@ -0,0 +1,34 @@
+const { extractTextPlugin, extractTextFilename } = require(`../index`)
+
+describe(`gatsby-1-config-extract-plugin`, () => {
+ ;[
+ {
+ stages: [`develop`, `non-existent-stage`],
+ expectPlugin: false,
+ },
+ {
+ stages: [`develop-html`, `build-css`, `build-html`, `build-javascript`],
+ expectPlugin: true,
+ },
+ ].forEach(({ stages, expectPlugin }) => {
+ stages.forEach(stage => {
+ describe(`stage: ${stage}`, () => {
+ if (expectPlugin) {
+ it(`should return plugin`, () => {
+ expect(typeof extractTextPlugin(stage)).toBe(`object`)
+ })
+ it(`should return plugin with correct filename for current stage`, () => {
+ expect(extractTextPlugin(stage)).toHaveProperty(
+ `filename`,
+ extractTextFilename(stage)
+ )
+ })
+ } else {
+ it(`should throw`, () => {
+ expect(() => extractTextPlugin(stage)).toThrow()
+ })
+ }
+ })
+ })
+ })
+})

packages/gatsby-1-config-extract-plugin/src/index.js

@@ -0,0 +1,59 @@
+import ExtractTextPlugin from "extract-text-webpack-plugin"
+
+const extractDevelopHtml = new ExtractTextPlugin(
+ extractTextFilename(`develop-html`)
+)
+const extractBuildHtml = new ExtractTextPlugin(
+ extractTextFilename(`build-html`),
+ {
+ allChunks: true,
+ }
+)
+const extractBuildCss = new ExtractTextPlugin(
+ extractTextFilename(`build-css`),
+ { allChunks: true }
+)
+const extractBuildJavascript = new ExtractTextPlugin(
+ extractTextFilename(`build-javascript`),
+ {
+ allChunks: true,
+ }
+)
+
+const errorMsg = `
+gatsby-1-config-extract-plugin:
+ stage must be one of: "develop-html", "build-html", "build-css", "build-javascript".
+ Note that the "develop" stage does not use extract-text-webpack-plugin.
+`
+
+function extractTextFilename(stage) {
+ switch (stage) {
+ case `develop-html`:
+ case `build-html`:
+ return `build-html-styles.css`
+ case `build-css`:
+ return `styles.css`
+ case `build-javascript`:
+ return `build-js-styles.css`
+ default:
+ throw Error(errorMsg)
+ }
+}
+
+function extractTextPlugin(stage) {
+ switch (stage) {
+ case `develop-html`:
+ return extractDevelopHtml
+ case `build-html`:
+ return extractBuildHtml
+ case `build-css`:
+ return extractBuildCss
+ case `build-javascript`:
+ return extractBuildJavascript
+ default:
+ throw Error(errorMsg)
+ }
+}
+
+exports.extractTextPlugin = extractTextPlugin
+exports.extractTextFilename = extractTextFilename