From ef48f7a2ad995e5501c4ff5c5932c3c3b7613fe3 Mon Sep 17 00:00:00 2001 From: Cristian Rosescu Date: Wed, 8 Mar 2017 16:16:24 +1300 Subject: [PATCH 1/2] Adding postcss-flexbugs-fixes Using postcss-flexbugs-fixes to fix all flexbug's issues. --- packages/react-scripts/config/webpack.config.dev.js | 1 + packages/react-scripts/config/webpack.config.prod.js | 1 + packages/react-scripts/package.json | 1 + 3 files changed, 3 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index c7948b66f6e..1f5e3f72718 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.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%', diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 979ed4e4d6d..d9e2c47036c 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -207,6 +207,7 @@ module.exports = { options: { ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options plugins: () => [ + require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 5389aa90efb..91cb0f36e34 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -23,6 +23,7 @@ "react-scripts": "./bin/react-scripts.js" }, "dependencies": { + "postcss-flexbugs-fixes": "2.1.0", "autoprefixer": "6.7.5", "babel-core": "6.23.1", "babel-eslint": "7.1.1", From ed9cf0f791e140617035e7e9a73f22d1052dc5bd Mon Sep 17 00:00:00 2001 From: Cristian Rosescu Date: Thu, 9 Mar 2017 14:24:44 +1300 Subject: [PATCH 2/2] Adding flexbox: 'no-2009' to Autoprefixer It will add flexbox prefixes only for final and IE versions of specification. --- packages/react-scripts/config/webpack.config.dev.js | 1 + packages/react-scripts/config/webpack.config.prod.js | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 1f5e3f72718..3fb04586a79 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -210,6 +210,7 @@ module.exports = { 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], + flexbox: 'no-2009', }), ], }, diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index d9e2c47036c..0561c2d903c 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -215,6 +215,7 @@ module.exports = { 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], + flexbox: 'no-2009', }), ], },