Migrate babelrc and postcssrc to js (#1822)

docs/assets.md

@@ -56,12 +56,12 @@ You can also use [babel-plugin-module-resolver](https://github.com/tleunen/babel
 yarn add babel-plugin-module-resolver
 ```
 
-Specify the plugin in your `.babelrc` with the custom root or alias. Here's an example:
+Specify the plugin in your `babel.config.js` with the custom root or alias. Here's an example:
 
-```json
+```js
 {
-  "plugins": [
-    ["module-resolver", {
+  plugins: [
+    [require("module-resolver").default, {
       "root": ["./app"],
       "alias": {
         "assets": "./assets"

docs/css.md

@@ -102,13 +102,22 @@ Or in your app/javascript/app.sass file:
 
 Webpacker out-of-the-box provides CSS post-processing using
 [postcss-loader](https://github.com/postcss/postcss-loader)
-and the installer sets up a standard `.postcssrc.yml`
+and the installer sets up a standard `postcss.config.js`
 file in your app root with standard plugins.
 
-```yml
-plugins:
-  postcss-import: {}
-  postcss-preset-env: {}
+```js
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-flexbugs-fixes'),
+    require('postcss-preset-env')({
+      autoprefixer: {
+        flexbox: 'no-2009'
+      },
+      stage: 3
+    })
+  ]
+}
 ```
 
 ## Using CSS with [vue-loader](https://github.com/vuejs/vue-loader)

docs/es6.md

@@ -5,7 +5,7 @@
 
 Webpacker ships with [babel](https://babeljs.io/) - a JavaScript compiler so
 you can use next generation JavaScript, today. The Webpacker installer sets up a
-standard `.babelrc` file in your app root, which will work great in most cases
+standard `babel.config.js` file in your app root, which will work great in most cases
 because of [@babel/preset-env](https://github.com/babel/babel/tree/master/packages/babel-preset-env).
 
 Following ES6/7 features are supported out of the box:

lib/install/config/babel.config.js

@@ -0,0 +1,70 @@
+module.exports = function(api) {
+  var validEnv = ['development', 'test', 'production']
+  var currentEnv = api.env()
+  var isDevelopmentEnv = api.env('development')
+  var isProductionEnv = api.env('production')
+  var isTestEnv = api.env('test')
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(
+      'Please specify a valid `NODE_ENV` or ' +
+        '`BABEL_ENV` environment variables. Valid values are "development", ' +
+        '"test", and "production". Instead, received: ' +
+        JSON.stringify(env) +
+        '.'
+    )
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        require('@babel/preset-env').default,
+        {
+          targets: {
+            node: 'current'
+          }
+        }
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        require('@babel/preset-env').default,
+        {
+          forceAllTransforms: true,
+          useBuiltIns: 'entry',
+          modules: false,
+          exclude: ['transform-typeof-symbol']
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      require('babel-plugin-macros'),
+      require('@babel/plugin-syntax-dynamic-import').default,
+      isTestEnv && require('babel-plugin-dynamic-import-node'),
+      require('@babel/plugin-transform-destructuring').default,
+      [
+        require('@babel/plugin-proposal-class-properties').default,
+        {
+          loose: true
+        }
+      ],
+      [
+        require('@babel/plugin-proposal-object-rest-spread').default,
+        {
+          useBuiltIns: true
+        }
+      ],
+      [
+        require('@babel/plugin-transform-runtime').default,
+        {
+          helpers: false,
+          regenerator: true
+        }
+      ],
+      [
+        require('@babel/plugin-transform-regenerator').default,
+        {
+          async: false
+        }
+      ]
+    ].filter(Boolean)
+  }
+}

lib/install/config/postcss.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-flexbugs-fixes'),
+    require('postcss-preset-env')({
+      autoprefixer: {
+        flexbox: 'no-2009'
+      },
+      stage: 3
+    })
+  ]
+}

lib/install/examples/react/babel.config.js

@@ -0,0 +1,83 @@
+module.exports = function(api) {
+  var validEnv = ['development', 'test', 'production']
+  var currentEnv = api.env()
+  var isDevelopmentEnv = api.env('development')
+  var isProductionEnv = api.env('production')
+  var isTestEnv = api.env('test')
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(
+      'Please specify a valid `NODE_ENV` or ' +
+        '`BABEL_ENV` environment variables. Valid values are "development", ' +
+        '"test", and "production". Instead, received: ' +
+        JSON.stringify(env) +
+        '.'
+    )
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        require('@babel/preset-env').default,
+        {
+          targets: {
+            node: 'current'
+          }
+        }
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        require('@babel/preset-env').default,
+        {
+          forceAllTransforms: true,
+          useBuiltIns: 'entry',
+          modules: false,
+          exclude: ['transform-typeof-symbol']
+        }
+      ],
+      [
+        require('@babel/preset-react').default,
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      require('babel-plugin-macros'),
+      require('@babel/plugin-syntax-dynamic-import').default,
+      isTestEnv && require('babel-plugin-dynamic-import-node'),
+      require('@babel/plugin-transform-destructuring').default,
+      [
+        require('@babel/plugin-proposal-class-properties').default,
+        {
+          loose: true
+        }
+      ],
+      [
+        require('@babel/plugin-proposal-object-rest-spread').default,
+        {
+          useBuiltIns: true
+        }
+      ],
+      [
+        require('@babel/plugin-transform-runtime').default,
+        {
+          helpers: false,
+          regenerator: true
+        }
+      ],
+      [
+        require('@babel/plugin-transform-regenerator').default,
+        {
+          async: false
+        }
+      ],
+      isProductionEnv && [
+        require('babel-plugin-transform-react-remove-prop-types').default,
+        {
+          removeImport: true
+        }
+      ]
+    ].filter(Boolean)
+  }
+}

lib/install/react.rb

@@ -1,24 +1,10 @@
 require "webpacker/configuration"
+require "fileutils"
 
-babelrc = Rails.root.join(".babelrc")
-babel_react_preset = ["@babel/preset-react", { "useBuiltIns": true }]
+replace_babel_config = FileUtils.compare_file(Rails.root.join("babel.config.js"), "#{__dir__}/config/babel.config.js")
 
-if File.exist?(babelrc)
-  react_babelrc = JSON.parse(File.read(babelrc))
-  react_babelrc["presets"] ||= []
-
-  unless react_babelrc["presets"].flatten.include?("@babel/preset-react")
-    react_babelrc["presets"].push(babel_react_preset)
-    say "Copying react preset to your .babelrc file"
-
-    File.open(babelrc, "w") do |f|
-      f.puts JSON.pretty_generate(react_babelrc)
-    end
-  end
-else
-  say "Copying .babelrc to app root directory"
-  copy_file "#{__dir__}/examples/react/.babelrc", ".babelrc"
-end
+say "Copying babel.config.js to app root directory"
+copy_file "#{__dir__}/examples/react/babel.config.js", "babel.config.js", force: replace_babel_config
 
 say "Copying react example entry file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/react/hello_react.jsx", "#{Webpacker.config.source_entry_path}/hello_react.jsx"
@@ -27,6 +13,6 @@
 insert_into_file Webpacker.config.config_path, "- .jsx\n".indent(4), after: /extensions:\n/
 
 say "Installing all react dependencies"
-run "yarn add react react-dom @babel/preset-react prop-types"
+run "yarn add react react-dom @babel/preset-react prop-types babel-plugin-transform-react-remove-prop-types"
 
 say "Webpacker now supports react.js 🎉", :green

lib/install/template.rb

@@ -4,11 +4,11 @@
 puts "Copying webpack core config"
 directory "#{__dir__}/config/webpack", "config/webpack"
 
-say "Copying .postcssrc.yml to app root directory"
-copy_file "#{__dir__}/config/.postcssrc.yml", ".postcssrc.yml"
+say "Copying postcss.config.js to app root directory"
+copy_file "#{__dir__}/config/postcss.config.js", "postcss.config.js"
 
-say "Copying .babelrc to app root directory"
-copy_file "#{__dir__}/config/.babelrc", ".babelrc"
+say "Copying babel.config.js to app root directory"
+copy_file "#{__dir__}/config/babel.config.js", "babel.config.js"
 
 say "Copying .browserslistrc to app root directory"
 copy_file "#{__dir__}/config/.browserslistrc", ".browserslistrc"

package.json

@@ -22,8 +22,9 @@
     "@babel/polyfill": "^7.0.0",
     "@babel/preset-env": "^7.1.6",
     "@babel/runtime": "^7.1.5",
-    "babel-core": "^7.0.0-bridge",
     "babel-loader": "^8.0.4",
+    "babel-plugin-dynamic-import-node": "^2.2.0",
+    "babel-plugin-macros": "^2.4.2",
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "compression-webpack-plugin": "^2.0.0",
     "css-loader": "^1.0.1",
@@ -34,9 +35,11 @@
     "node-sass": "^4.10.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "path-complete-extname": "^1.0.0",
+    "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.4.0",
+    "postcss-safe-parser": "^4.0.1",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "terser-webpack-plugin": "^1.1.0",