Make browsers list configurable

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',
                 }),
               ],

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',
                       }),
                     ],

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)

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;  
 }
 ```