diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 987e7a3570c..a3c918b6053 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -32,6 +32,14 @@ const publicUrl = ''; // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); +// Get supported browsers list +let supportedBrowsers = require(paths.appPackageJson).browserslist; +if (!supportedBrowsers || Object.keys(supportedBrowsers).length === 0) { + // Assign default browsers when browserslist is not specified + supportedBrowsers = + "browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway]"; +} + // This is the development configuration. // It is focused on developer experience and fast rebuilds. // The production configuration is different and lives in a separate file. @@ -225,12 +233,7 @@ module.exports = { plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ - browsers: [ - '>1%', - 'last 4 versions', - 'Firefox ESR', - 'not ie < 9', // React doesn't support IE8 anyway - ], + supportedBrowsers, flexbox: 'no-2009', }), ], diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 1ba1307bb3e..be85077a8f5 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -23,6 +23,14 @@ const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); const paths = require('./paths'); const getClientEnvironment = require('./env'); +// Get supported browsers list +let supportedBrowsers = require(paths.appPackageJson).browserslist; +if (!supportedBrowsers || Object.keys(supportedBrowsers).length === 0) { + // Assign default browsers when browserslist is not specified + supportedBrowsers = + "browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway]"; +} + // Webpack uses `publicPath` to determine where the app is being served from. // It requires a trailing slash, or the file assets will get an incorrect path. const publicPath = paths.servedPath; @@ -234,12 +242,7 @@ module.exports = { plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ - browsers: [ - '>1%', - 'last 4 versions', - 'Firefox ESR', - 'not ie < 9', // React doesn't support IE8 anyway - ], + supportedBrowsers, flexbox: 'no-2009', }), ], diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js index 0a62cc4a976..e1867f75e7d 100644 --- a/packages/react-scripts/scripts/init.js +++ b/packages/react-scripts/scripts/init.js @@ -45,6 +45,12 @@ module.exports = function( eject: 'react-scripts eject', }; + // Add the supported browsers list + appPackage.browserslist = { + production: ['> 1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'], + development: ['last 1 version'], + }; + fs.writeFileSync( path.join(appPath, 'package.json'), JSON.stringify(appPackage, null, 2) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 5775028406e..4a6cc2c5b0d 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -495,16 +495,12 @@ becomes this: ```css .App { - display: -webkit-box; display: -ms-flexbox; display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + align-items: center; } ``` diff --git a/tasks/local-test.sh b/tasks/local-test.sh old mode 100755 new mode 100644