CRA CSS-parity: postcss-flexbox-bugs

jaredpalmer · Jun 7, 2017 · e1a374b · e1a374b
1 parent 32370ce
commit e1a374b
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 13 deletions.
diff --git 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,49 +135,53 @@ 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%',
  'last 4 versions',
  '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%',
  'last 4 versions',
  '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
@@ -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
@@ -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"