[v2] fix a bunch of things

docs/docs/add-custom-webpack-config.md

@@ -42,37 +42,39 @@ e.g. [Sass](/packages/gatsby-plugin-sass/),
 Here is an example that configures **flexboxgrid** when processing css files. Add this in `gatsby-node.js`:
 
 ```js
-exports.modifyWebpackConfig = ({ config, stage }) => {
-  switch (stage) {
-    case "develop":
-      config.loader("css", {
-        include: /flexboxgrid/,
-      });
-
-      break;
-
-    case "build-css":
-      config.loader("css", {
-        include: /flexboxgrid/,
-      });
-
-      break;
-
-    case "build-html":
-      config.loader("css", {
-        include: /flexboxgrid/,
-      });
-
-      break;
-
-    case "build-javascript":
-      config.loader("css", {
-        include: /flexboxgrid/,
-      });
-
-      break;
-  }
-
-  return config;
+exports.modifyWebpackConfig = ({
+  stage,
+  rules,
+  loaders,
+  plugins,
+  actions,
+}) => {
+  actions.setWebpackConfig({
+    module: {
+      rules: [
+        {
+          test: /\.less$/,
+          // We don't need to add the matching ExtractText plugin
+          // because gatsby already includes it and makes sure its only
+          // run at the appropriate stages, e.g. not in development
+          use: plugins.extractText.extract({
+            fallback: loaders.style(),
+            use: [
+              loaders.css({ importLoaders: 1 }),
+              // the postcss loader comes with some nice defaults
+              // including autoprefixer for our configured browsers
+              loaders.postcss(),
+              `less-loader`,
+            ],
+          }),
+        },
+      ],
+    },
+    plugins: [
+      plugins.define({
+        __DEVELOPMENT__: stage === `develop` || stage === `develop-html`,
+      }),
+    ],
+  });
 };
 ```

packages/gatsby-cli/src/reporter/index.js

@@ -27,6 +27,13 @@ module.exports = Object.assign(reporter, {
     process.exit(1)
   },
 
+  panicOnBuild(...args) {
+    this.error(...args)
+    if (process.env.gatsby_executing_command !== `build`) {
+      process.exit(1)
+    }
+  },
+
   error(message, error) {
     if (arguments.length === 1 && typeof message !== `string`) {
       error = message

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

@@ -8,15 +8,13 @@ export function resolvableExtensions() {
 }
 
 export function modifyWebpackConfig({ loaders, actions }) {
-  const coffeeLoader = [loaders.js(), resolve(`coffee-loader`)]
-
   // We need to use Babel to get around the ES6 export issue.
   actions.setWebpackConfig({
     module: {
       rules: [
         {
           test: COFFEE,
-          use: coffeeLoader,
+          use: [loaders.js(), resolve(`coffee-loader`)],
         },
       ],
     },

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

@@ -17,7 +17,7 @@ exports.modifyWebpackConfig = (
     test: /\.less$/,
     exclude: /\.module\.less$/,
     use: plugins.extractText.extract({
-      fallback: loaders.style,
+      fallback: loaders.style(),
       use: [
         loaders.css({ importLoaders: 1 }),
         loaders.postcss({ plugins: postCssPlugins }),
@@ -28,7 +28,7 @@ exports.modifyWebpackConfig = (
   const lessRuleModules = {
     test: /\.module\.less$/,
     use: plugins.extractText.extract({
-      fallback: loaders.style,
+      fallback: loaders.style(),
       use: [
         loaders.css({ modules: true, importLoaders: 1 }),
         loaders.postcss({ plugins: postCssPlugins }),
@@ -51,7 +51,7 @@ exports.modifyWebpackConfig = (
       configRules = configRules.concat([
         {
           ...lessRule,
-          use: loaders.null,
+          use: [loaders.null()],
         },
         lessRuleModules,
       ])

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

@@ -17,7 +17,7 @@ exports.modifyWebpackConfig = (
     test: /\.s(a|c)ss$/,
     exclude: /\.module\.s(a|c)ss$/,
     use: plugins.extractText.extract({
-      fallback: loaders.style,
+      fallback: loaders.style(),
       use: [
         loaders.css({ importLoaders: 1 }),
         loaders.postcss({ plugins: postCssPlugins }),
@@ -28,7 +28,7 @@ exports.modifyWebpackConfig = (
   const sassRuleModules = {
     test: /\.module\.s(a|c)ss$/,
     use: plugins.extractText.extract({
-      fallback: loaders.style,
+      fallback: loaders.style(),
       use: [
         loaders.css({ modules: true, importLoaders: 1 }),
         loaders.postcss({ plugins: postCssPlugins }),
@@ -51,7 +51,7 @@ exports.modifyWebpackConfig = (
       configRules = configRules.concat([
         {
           ...sassRule,
-          use: loaders.null,
+          use: [loaders.null()],
         },
         sassRuleModules,
       ])

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

@@ -38,7 +38,7 @@ exports.modifyWebpackConfig = (
     test: /\.styl$/,
     exclude: /\.module\.styl$/,
     use: plugins.extractText.extract({
-      fallback: loaders.style,
+      fallback: loaders.style(),
       use: [
         loaders.css({ importLoaders: 1 }),
         loaders.postcss({ plugins: postCssPlugins }),
@@ -50,7 +50,7 @@ exports.modifyWebpackConfig = (
   const stylusRuleModules = {
     test: /\.module\.styl$/,
     use: plugins.extractText.extract({
-      fallback: loaders.style,
+      fallback: loaders.style(),
       use: [
         loaders.css({ modules: true, importLoaders: 1 }),
         loaders.postcss({ plugins: postCssPlugins }),
@@ -73,7 +73,7 @@ exports.modifyWebpackConfig = (
       configRules = configRules.concat([
         {
           ...stylusRule,
-          use: loaders.null,
+          use: [loaders.null()],
         },
         stylusRuleModules,
       ])

packages/gatsby/.npmignore

@@ -1,2 +1,3 @@
 src
 flow-typed
+**/__tests__/**

packages/gatsby/package.json

@@ -77,7 +77,6 @@
     "node-libs-browser": "^2.0.0",
     "normalize-path": "^2.1.1",
     "null-loader": "^0.1.1",
-    "nyc": "^11.4.1",
     "opn": "^5.1.0",
     "parse-filepath": "^1.0.1",
     "path-exists": "^3.0.0",
@@ -123,6 +122,7 @@
     "@babel/cli": "^7.0.0-beta.38",
     "@babel/core": "^7.0.0-beta.38",
     "@babel/plugin-proposal-class-properties": "^7.0.0-beta.39",
+    "@babel/preset-flow": "^7.0.0-beta.40",
     "chokidar": "^2.0.0",
     "cross-env": "^5.0.5",
     "nyc": "^7.0.0",
@@ -162,7 +162,7 @@
     "build": "rimraf dist && npm run build:src && npm run build:internal-plugins && npm run build:rawfiles",
     "build:internal-plugins": "copyfiles -u 1 src/internal-plugins/**/package.json dist",
     "build:rawfiles": "copyfiles -u 1 src/internal-plugins/**/raw_* dist",
-    "build:src": "babel src --out-dir dist --source-maps --ignore gatsby-cli.js,raw_*,__tests__",
+    "build:src": "babel src --out-dir dist --source-maps --ignore **/gatsby-cli.js,**/raw_*,**/__tests__/***",
     "clean-test-bundles": "find test/ -type f -name bundle.js* -exec rm -rf {} +",
     "prepublish": "cross-env NODE_ENV=production npm run build",
     "test-coverage": "node_modules/.bin/nyc --reporter=lcov --reporter=text npm test",

packages/gatsby/src/utils/api-node-docs.js

@@ -187,7 +187,7 @@ exports.modifyBabelrc = true
  *       rules: [
  *         {
  *           test: 'my-css',
- *           use: [loaders.style, loaders.css()]
+ *           use: [loaders.style(), loaders.css()]
  *         },
  *       ],
  *     },

packages/gatsby/src/utils/babel-config.js

@@ -4,6 +4,7 @@ import fs from "fs"
 import path from "path"
 import json5 from "json5"
 import _ from "lodash"
+const report = require(`gatsby-cli/lib/reporter`)
 import apiRunnerNode from "./api-runner-node"
 
 // TODO update this to store Babelrc config in Redux store.
@@ -18,12 +19,35 @@ function findBabelrc(directory) {
     const babelrc = fs.readFileSync(path.join(directory, `.babelrc`), `utf-8`)
     return json5.parse(babelrc)
   } catch (error) {
-    if (error.code === `ENOENT`) {
+    if (error.code !== `ENOENT`) throw error
+  }
+  return null
+}
+
+/**
+ * Locates a .babelrc.js in the Gatsby site root directory.
+ * requires it and unwraps any esm default export
+ */
+function findBabelrcJs(directory, stage) {
+  try {
+    // $FlowFixMe
+    let babelrc = require(path.join(directory, `.babelrc.js`))
+    babelrc =
+      babelrc && babelrc.__esModule ? babelrc.default || undefined : babelrc
+
+    // TODO support this
+    if (typeof babelrc === `function`) {
+      report.error(
+        `.babelrc.js files that export a function are not supported in Gatsby`
+      )
       return null
-    } else {
-      throw error
     }
+
+    return babelrc
+  } catch (error) {
+    if (error.code !== `ENOENT`) throw error
   }
+  return null
 }
 
 /**
@@ -32,7 +56,7 @@ function findBabelrc(directory) {
  */
 function findBabelPackage(directory) {
   try {
-    // $FlowIssue - https://github.com/facebook/flow/issues/1975
+    // $FlowFixMe - https://github.com/facebook/flow/issues/1975
     const packageJson = require(path.join(directory, `package.json`))
     return packageJson.babel
   } catch (error) {
@@ -51,7 +75,10 @@ function findBabelPackage(directory) {
 module.exports = async function babelConfig(program, stage) {
   const { directory } = program
 
-  let babelrc = findBabelrc(directory) || findBabelPackage(directory)
+  let babelrc =
+    findBabelrc(directory) ||
+    findBabelrcJs(directory) ||
+    findBabelPackage(directory)
 
   // If user doesn't have a custom babelrc, add defaults.
   if (!babelrc) {
@@ -73,21 +100,26 @@ module.exports = async function babelConfig(program, stage) {
         [
           require.resolve(`@babel/preset-react`),
           {
+            useBuiltIns: true,
             pragma: `React.createElement`,
+            development: stage === `develop`,
           },
         ],
         require.resolve(`@babel/preset-flow`),
       ],
       plugins: [
-        require.resolve(`@babel/plugin-proposal-class-properties`),
+        [
+          require.resolve(`@babel/plugin-proposal-class-properties`),
+          { loose: true },
+        ],
         require.resolve(`@babel/plugin-syntax-dynamic-import`),
         // Polyfills the runtime needed for async/await and generators
         [
           require.resolve(`@babel/plugin-transform-runtime`),
           {
-            helpers: false,
-            polyfill: false,
+            helpers: true,
             regenerator: true,
+            polyfill: false,
           },
         ],
       ],
@@ -103,10 +135,6 @@ module.exports = async function babelConfig(program, stage) {
   if (stage === `develop`) {
     // TODO: maybe this should be left to the user?
     babelrc.plugins.unshift(require.resolve(`react-hot-loader/babel`))
-    // TODO figure out what this was — if left in it breaks builds
-    // babelrc.plugins.unshift(
-    // require.resolve(`@babel/transform-react-jsx-source`)
-    // )
   }
 
   babelrc.plugins.unshift(