Adding plugin postcss-flexbugs-fixes and flexbox: 'no-2009' to Autoprefixer

Created by: cr101

This PR adds the postcss-flexbugs-fixes plugin to fix all flexbug's issues. It also adds flexbox: 'no-2009' to Autoprefixer which adds prefixes only for final and IE versions of specification. Currently this PR only partially avoids old CSS flexbox. In order to fully pass the Lighthouse 'Avoids old CSS flexbox' audit test as well as being able to match the targeted browser versions of a CSS framework (i.e. when compiling Bootstrap 4 SASS as per this comment we need to provide browserslist from package.json to Autoprefixer (this particular issue appears to be related to #892)

This PR partially fixes #1658 until #892 is fixed.

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

@@ -197,6 +197,7 @@ module.exports = {
             options: {
               ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
               plugins: () => [
+                require('postcss-flexbugs-fixes'),
                 autoprefixer({
                   browsers: [
                     '>1%',
@@ -204,6 +205,7 @@ module.exports = {
                     'Firefox ESR',
                     'not ie < 9', // React doesn't support IE8 anyway
                   ],
+                  flexbox: 'no-2009',
                 }),
               ],
             },

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

@@ -202,6 +202,7 @@ module.exports = {
                   options: {
                     ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
                     plugins: () => [
+                      require('postcss-flexbugs-fixes'),
                       autoprefixer({
                         browsers: [
                           '>1%',
@@ -209,6 +210,7 @@ module.exports = {
                           'Firefox ESR',
                           'not ie < 9', // React doesn't support IE8 anyway
                         ],
+                        flexbox: 'no-2009',
                       }),
                     ],
                   },

packages/react-scripts/package.json

@@ -51,6 +51,7 @@
     "inquirer": "3.0.6",
     "jest": "19.0.2",
     "object-assign": "4.1.1",
+    "postcss-flexbugs-fixes": "2.1.0",
     "postcss-loader": "1.3.3",
     "promise": "7.1.1",
     "react-dev-utils": "^0.5.2",