From e1a374b914d0ebb784244237e5393a5b82f260cb Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Wed, 7 Jun 2017 13:02:47 -0400
Subject: [PATCH] CRA CSS-parity: postcss-flexbox-bugs

---
 packages/razzle/config/create-config.js | 48 ++++++++++++++++++-------
 packages/razzle/package.json            |  1 +
 packages/razzle/yarn.lock               |  6 ++++
 3 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/packages/razzle/config/create-config.js b/packages/razzle/config/create-config.js
index 110ef7479..abb3a59d1 100644
--- a/packages/razzle/config/create-config.js
+++ b/packages/razzle/config/create-config.js
@@ -78,20 +78,38 @@ module.exports = (
         // Transform ES6 with Babel
         {
           test: /\.js?$/,
-          loader: 'babel-loader',
+          loader: require.resolve('babel-loader'),
           include: [paths.appSrc],
           options: mainBabelOptions,
         },
-        // Handle files with url-loader. It will inline files into a data-uri
-        // if they are smaller than 20000 bytes.
         {
-          test: /\.(jpg|jpeg|png|gif|eot|svg|ttf|woff|woff2)$/,
-          loader: 'url-loader',
-          exclude: [paths.appNodeModules, paths.appBuild],
+          exclude: [
+            /\.html$/,
+            /\.(js|jsx)$/,
+            /\.css$/,
+            /\.json$/,
+            /\.bmp$/,
+            /\.gif$/,
+            /\.jpe?g$/,
+            /\.png$/,
+          ],
+          loader: require.resolve('file-loader'),
           options: {
-            limit: 20000,
+            name: 'static/media/[name].[hash:8].[ext]',
           },
         },
+        // "url" loader works like "file" loader except that it embeds assets
+        // smaller than specified limit in bytes as data URLs to avoid requests.
+        // A missing `test` is equivalent to a match.
+        {
+          test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+          loader: require.resolve('url-loader'),
+          options: {
+            limit: 10000,
+            name: 'static/media/[name].[hash:8].[ext]',
+          },
+        },
+
         // "postcss" loader applies autoprefixer to our CSS.
         // "css" loader resolves paths in CSS and adds assets as dependencies.
         // "style" loader turns CSS into JS modules that inject <style> tags.
@@ -107,7 +125,7 @@ module.exports = (
               // magic. Luckily we just need css-loader.
               [
                 {
-                  loader: 'css-loader',
+                  loader: require.resolve('css-loader'),
                   options: {
                     importLoaders: 1,
                   },
@@ -117,16 +135,17 @@ module.exports = (
                 ? [
                     'style-loader',
                     {
-                      loader: 'css-loader',
+                      loader: require.resolve('css-loader'),
                       options: {
                         importLoaders: 1,
                       },
                     },
                     {
-                      loader: 'postcss-loader',
+                      loader: require.resolve('postcss-loader'),
                       options: {
                         ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
                         plugins: () => [
+                          require('postcss-flexbugs-fixes'),
                           autoprefixer({
                             browsers: [
                               '>1%',
@@ -134,25 +153,27 @@ module.exports = (
                               'Firefox ESR',
                               'not ie < 9', // React doesn't support IE8 anyway
                             ],
+                            flexbox: 'no-2009',
                           }),
                         ],
                       },
                     },
                   ]
                 : ExtractTextPlugin.extract({
-                    fallback: 'style-loader',
+                    fallback: require.resolve('style-loader'),
                     use: [
                       {
-                        loader: 'css-loader',
+                        loader: require.resolve('css-loader'),
                         options: {
                           importLoaders: 1,
                         },
                       },
                       {
-                        loader: 'postcss-loader',
+                        loader: require.resolve('postcss-loader'),
                         options: {
                           ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
                           plugins: () => [
+                            require('postcss-flexbugs-fixes'),
                             autoprefixer({
                               browsers: [
                                 '>1%',
@@ -160,6 +181,7 @@ module.exports = (
                                 'Firefox ESR',
                                 'not ie < 9', // React doesn't support IE8 anyway
                               ],
+                              flexbox: 'no-2009',
                             }),
                           ],
                         },
diff --git a/packages/razzle/package.json b/packages/razzle/package.json
index 9f76b9c7c..3ffc5d6ef 100644
--- a/packages/razzle/package.json
+++ b/packages/razzle/package.json
@@ -29,6 +29,7 @@
     "file-loader": "^0.11.1",
     "fs-extra": "^3.0.1",
     "minimist": "^1.2.0",
+    "postcss-flexbugs-fixes": "^3.0.0",
     "postcss-loader": "^2.0.5",
     "react-dev-utils": "^1.0.2",
     "start-server-webpack-plugin": "^2.2.0",
diff --git a/packages/razzle/yarn.lock b/packages/razzle/yarn.lock
index 1b16c28ed..818598399 100644
--- a/packages/razzle/yarn.lock
+++ b/packages/razzle/yarn.lock
@@ -2986,6 +2986,12 @@ postcss-filter-plugins@^2.0.0:
     postcss "^5.0.4"
     uniqid "^4.0.0"
 
+postcss-flexbugs-fixes@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-3.0.0.tgz#7b31cb6c27d0417a35a67914c295f83c403c7ed4"
+  dependencies:
+    postcss "^6.0.1"
+
 postcss-load-config@^1.x:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"