Make browsers list configurable - revisited

packages/react-scripts/config/webpack.config.dev.js

@@ -32,6 +32,18 @@ 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 = [
+      '>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.
@@ -204,12 +216,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
-                      ],
+                      browsers: supportedBrowsers,
                       flexbox: 'no-2009',
                     }),
                   ],

packages/react-scripts/config/webpack.config.prod.js

@@ -23,6 +23,18 @@ 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 = [
+      '>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;
@@ -218,12 +230,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
-                            ],
+                            browsers: supportedBrowsers,
                             flexbox: 'no-2009',
                           }),
                         ],