feat(babel-preset-gatsby): add babel-plugin-transform-react-remove-prop-types for production builds

packages/babel-preset-gatsby/README.md

@@ -12,6 +12,7 @@ For more information on how to customize the Babel configuration of your Gatsby
 - [`@babel/plugin-syntax-dynamic-import`](https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import)
 - [`@babel/plugin-transform-runtime`](https://babeljs.io/docs/en/babel-plugin-transform-runtime#docsNav)
 - [`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros)
+- [`babel-plugin-transform-react-remove-prop-types`](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types)
 
 ## Usage
 

packages/babel-preset-gatsby/package.json

@@ -8,7 +8,8 @@
     "@babel/plugin-transform-runtime": "^7.0.0",
     "@babel/preset-env": "^7.4.1",
     "@babel/preset-react": "^7.0.0",
-    "babel-plugin-macros": "^2.4.2"
+    "babel-plugin-macros": "^2.4.2",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0"

packages/babel-preset-gatsby/src/__tests__/index.js

@@ -119,3 +119,65 @@ it(`Allows to configure browser targets`, () => {
     },
   ])
 })
+
+describe(`in production mode`, () => {
+  beforeEach(() => {
+    process.env.BABEL_ENV = `production`
+    process.env.GATSBY_BUILD_STAGE = `test`
+  })
+
+  it(`specifies proper presets`, () => {
+    const targets = `last 1 version`
+    const { presets, plugins } = preset(null, { targets })
+
+    expect(presets).toEqual([
+      [
+        expect.stringContaining(path.join(`@babel`, `preset-env`)),
+        {
+          corejs: 2,
+          loose: true,
+          modules: `commonjs`,
+          useBuiltIns: `usage`,
+          targets,
+        },
+      ],
+      [
+        expect.stringContaining(path.join(`@babel`, `preset-react`)),
+        {
+          development: false,
+          pragma: `React.createElement`,
+          useBuiltIns: true,
+        },
+      ],
+    ])
+    expect(plugins).toEqual([
+      [
+        expect.stringContaining(
+          path.join(`@babel`, `plugin-proposal-class-properties`)
+        ),
+        { loose: true },
+      ],
+      expect.stringContaining(`babel-plugin-macros`),
+      expect.stringContaining(
+        path.join(`@babel`, `plugin-syntax-dynamic-import`)
+      ),
+      [
+        expect.stringContaining(
+          path.join(`@babel`, `plugin-transform-runtime`)
+        ),
+        {
+          helpers: true,
+          regenerator: true,
+        },
+      ],
+      [
+        expect.stringContaining(
+          path.join(`babel-plugin-transform-react-remove-prop-types`)
+        ),
+        {
+          removeImport: true,
+        },
+      ],
+    ])
+  })
+})

packages/babel-preset-gatsby/src/index.js

@@ -28,7 +28,10 @@ module.exports = function preset(_, options = {}) {
   let { targets = null } = options
 
   const pluginBabelConfig = loadCachedConfig()
-  const stage = process.env.GATSBY_BUILD_STAGE || `test`
+  const { NODE_ENV, BABEL_ENV, GATSBY_BUILD_STAGE } = process.env
+  const stage = GATSBY_BUILD_STAGE || `test`
+
+  const PRODUCTION = (BABEL_ENV || NODE_ENV) === `production`
 
   if (!targets) {
     if (stage === `build-html` || stage === `test`) {
@@ -40,6 +43,18 @@ module.exports = function preset(_, options = {}) {
     }
   }
 
+  const plugins = []
+
+  if (PRODUCTION) {
+    plugins.push([
+      // Remove PropTypes from production build
+      resolve(`babel-plugin-transform-react-remove-prop-types`),
+      {
+        removeImport: true,
+      },
+    ])
+  }
+
   return {
     presets: [
       [
@@ -77,6 +92,7 @@ module.exports = function preset(_, options = {}) {
           regenerator: true,
         },
       ],
+      ...plugins,
     ],
   }
 }