From 7594e876e0d4f92cba784e8670a3d0e16fb489b8 Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Wed, 10 Oct 2018 22:42:42 -0700
Subject: [PATCH 01/21] Support css-modules

---
 .../src/server/config/webpack.config.default.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/lib/core/src/server/config/webpack.config.default.js b/lib/core/src/server/config/webpack.config.default.js
index 4e1362300e72..16659146a2b7 100644
--- a/lib/core/src/server/config/webpack.config.default.js
+++ b/lib/core/src/server/config/webpack.config.default.js
@@ -1,5 +1,7 @@
 import autoprefixer from 'autoprefixer';
 
+const cssModuleRegex = /\.module\.css$/;
+
 export function createDefaultWebpackConfig(storybookBaseConfig) {
   return {
     ...storybookBaseConfig,
@@ -9,6 +11,7 @@ export function createDefaultWebpackConfig(storybookBaseConfig) {
         ...storybookBaseConfig.module.rules,
         {
           test: /\.css$/,
+          exclude: cssModuleRegex,
           use: [
             require.resolve('style-loader'),
             {
@@ -32,6 +35,20 @@ export function createDefaultWebpackConfig(storybookBaseConfig) {
             },
           ],
         },
+        {
+          test: cssModuleRegex,
+          loaders: [
+            require.resolve('style-loader'),
+            {
+              loader: require.resolve('css-loader'),
+              options: {
+                importLoaders: 1,
+                modules: true,
+                localIdentName: '[name]__[local]___[hash:base64:5]',
+              },
+            },
+          ],
+        },
         {
           test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
           loader: require.resolve('file-loader'),

From 0441fc5603037b064c1233659d5f4b11e6b5ad11 Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Tue, 16 Oct 2018 16:16:42 -0700
Subject: [PATCH 02/21] Add [module.]scss/sass loader support

---
 lib/core/package.json                         |   2 +-
 .../server/config/webpack.config.default.js   | 109 ++++++++++++------
 2 files changed, 77 insertions(+), 34 deletions(-)

diff --git a/lib/core/package.json b/lib/core/package.json
index 1b0d5a761969..1ed917294ab4 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -37,7 +37,6 @@
     "@storybook/node-logger": "4.0.0-alpha.24",
     "@storybook/ui": "4.0.0-alpha.24",
     "airbnb-js-shims": "^1 || ^2",
-    "autoprefixer": "^9.1.5",
     "babel-plugin-macros": "^2.4.2",
     "babel-preset-minify": "^0.5.0",
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
@@ -61,6 +60,7 @@
     "opn": "^5.4.0",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.1.1",
     "prop-types": "^15.6.2",
     "qs": "^6.5.2",
     "raw-loader": "^0.5.1",
diff --git a/lib/core/src/server/config/webpack.config.default.js b/lib/core/src/server/config/webpack.config.default.js
index 16659146a2b7..3ef8cd6740ce 100644
--- a/lib/core/src/server/config/webpack.config.default.js
+++ b/lib/core/src/server/config/webpack.config.default.js
@@ -1,6 +1,45 @@
-import autoprefixer from 'autoprefixer';
+import getCSSModuleLocalIdent from 'react-dev-utils/getCSSModuleLocalIdent';
 
+// style files regexes
+const cssRegex = /\.css$/;
 const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+// common function to get style loaders
+const getStyleLoaders = (cssOptions, preProcessor) => {
+  const loaders = [
+    require.resolve('style-loader'),
+    {
+      loader: require.resolve('css-loader'),
+      options: cssOptions,
+    },
+    {
+      // Options for PostCSS as we reference these options twice
+      // Adds vendor prefixing based on your specified browser support in
+      // package.json
+      loader: require.resolve('postcss-loader'),
+      options: {
+        // Necessary for external CSS imports to work
+        // https://github.com/facebook/create-react-app/issues/2677
+        ident: 'postcss',
+        plugins: () => [
+          require('postcss-flexbugs-fixes'), // eslint-disable-line
+          require('postcss-preset-env')({ // eslint-disable-line
+            autoprefixer: {
+              flexbox: 'no-2009',
+            },
+            stage: 3,
+          }),
+        ],
+      },
+    },
+  ];
+  if (preProcessor) {
+    loaders.push(require.resolve(preProcessor));
+  }
+  return loaders;
+};
 
 export function createDefaultWebpackConfig(storybookBaseConfig) {
   return {
@@ -9,45 +48,49 @@ export function createDefaultWebpackConfig(storybookBaseConfig) {
       ...storybookBaseConfig.module,
       rules: [
         ...storybookBaseConfig.module.rules,
+        // "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.
+        // In production, we use a plugin to extract that CSS to a file, but
+        // in development "style" loader enables hot editing of CSS.
+        // By default we support CSS Modules with the extension .module.css
         {
-          test: /\.css$/,
+          test: cssRegex,
           exclude: cssModuleRegex,
-          use: [
-            require.resolve('style-loader'),
-            {
-              loader: require.resolve('css-loader'),
-              options: {
-                importLoaders: 1,
-              },
-            },
-            {
-              loader: require.resolve('postcss-loader'),
-              options: {
-                ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
-                postcss: {},
-                plugins: () => [
-                  require('postcss-flexbugs-fixes'), // eslint-disable-line
-                  autoprefixer({
-                    flexbox: 'no-2009',
-                  }),
-                ],
-              },
-            },
-          ],
+          use: getStyleLoaders({ importLoaders: 1 }),
         },
+        // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+        // using the extension .module.css
         {
           test: cssModuleRegex,
-          loaders: [
-            require.resolve('style-loader'),
+          use: getStyleLoaders({
+            importLoaders: 1,
+            modules: true,
+            getLocalIdent: getCSSModuleLocalIdent,
+          }),
+        },
+        // Opt-in support for SASS (using .scss or .sass extensions).
+        // Chains the sass-loader with the css-loader and the style-loader
+        // to immediately apply all styles to the DOM.
+        // By default we support SASS Modules with the
+        // extensions .module.scss or .module.sass
+        {
+          test: sassRegex,
+          exclude: sassModuleRegex,
+          use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
+        },
+        // Adds support for CSS Modules, but using SASS
+        // using the extension .module.scss or .module.sass
+        {
+          test: sassModuleRegex,
+          use: getStyleLoaders(
             {
-              loader: require.resolve('css-loader'),
-              options: {
-                importLoaders: 1,
-                modules: true,
-                localIdentName: '[name]__[local]___[hash:base64:5]',
-              },
+              importLoaders: 2,
+              modules: true,
+              getLocalIdent: getCSSModuleLocalIdent,
             },
-          ],
+            'sass-loader'
+          ),
         },
         {
           test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,

From fefd86acc4726c6305a782fb73a717a77dac2b05 Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Tue, 16 Oct 2018 16:25:19 -0700
Subject: [PATCH 03/21] Update yarn.lock

---
 yarn.lock | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 72 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 5baab1c5925a..784b0e9dc233 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5416,6 +5416,15 @@ browserslist@^4.0.0, browserslist@^4.1.0, browserslist@^4.1.1:
     electron-to-chromium "^1.3.73"
     node-releases "^1.0.0-alpha.12"
 
+browserslist@^4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.2.1.tgz#257a24c879d1cd4016348eee5c25de683260b21d"
+  integrity sha512-1oO0c7Zhejwd+LXihS89WqtKionSbz298rJZKJgfrHIZhrV8AC15gw553VcB0lcEugja7IhWD7iAlrsamfYVPA==
+  dependencies:
+    caniuse-lite "^1.0.30000890"
+    electron-to-chromium "^1.3.79"
+    node-releases "^1.0.0-alpha.14"
+
 browserstack@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/browserstack/-/browserstack-1.5.1.tgz#e2dfa66ffee940ebad0a07f7e00fd4687c455d66"
@@ -5748,6 +5757,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000864, can
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000890.tgz#86a18ffcc65d79ec6a437e985761b8bf1c4efeaf"
   integrity sha512-4NI3s4Y6ROm+SgZN5sLUG4k7nVWQnedis3c/RWkynV5G6cHSY7+a8fwFyn2yoBDE3E6VswhTNNwR3PvzGqlTkg==
 
+caniuse-lite@^1.0.30000890:
+  version "1.0.30000892"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000892.tgz#344d2b51ee3ff5977537da4aa449c90eec40b759"
+  integrity sha512-X9rxMaWZNbJB5qjkDqPtNv/yfViTeUL6ILk0QJNxLV3OhKC5Acn5vxsuUvllR6B48mog8lmS+whwHq/QIYSL9w==
+
 capture-exit@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-1.2.0.tgz#1c5fcc489fd0ab00d4f1ac7ae1072e3173fbab6f"
@@ -7952,7 +7966,7 @@ ejson@^2.1.2:
   dependencies:
     underscore "1.8.x"
 
-electron-to-chromium@^1.3.47, electron-to-chromium@^1.3.62, electron-to-chromium@^1.3.73:
+electron-to-chromium@^1.3.47, electron-to-chromium@^1.3.62, electron-to-chromium@^1.3.73, electron-to-chromium@^1.3.79:
   version "1.3.79"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.79.tgz#774718f06284a4bf8f578ac67e74508fe659f13a"
   integrity sha512-LQdY3j4PxuUl6xfxiFruTSlCniTrTrzAd8/HfsLEMi0PUpaQ0Iy+Pr4N4VllDYjs0Hyu2lkTbvzqlG+PX9NsNw==
@@ -15574,6 +15588,13 @@ node-releases@^1.0.0-alpha.11, node-releases@^1.0.0-alpha.12:
   dependencies:
     semver "^5.3.0"
 
+node-releases@^1.0.0-alpha.14:
+  version "1.0.0-alpha.14"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.0.0-alpha.14.tgz#da9e2780add4bbb59ad890af9e2018a1d9c0034b"
+  integrity sha512-G8nnF9cP9QPP/jUmYWw/uUUhumHmkm+X/EarCugYFjYm2uXRMFeOD6CVT3RLdoyCvDUNy51nirGfUItKWs/S1g==
+  dependencies:
+    semver "^5.3.0"
+
 node-sass@^4.9.3:
   version "4.9.3"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.9.3.tgz#f407cf3d66f78308bb1e346b24fa428703196224"
@@ -16986,6 +17007,15 @@ postcss-color-functional-notation@^2.0.1:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
 
+postcss-color-gray@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz#532a31eb909f8da898ceffe296fdc1f864be8547"
+  integrity sha512-q6BuRnAGKM/ZRpfDascZlIZPjvwsRye7UDNalqVz3s7GDxMtqPY6+Q871liNxsonUw8oC61OG+PSaysYpl1bnw==
+  dependencies:
+    "@csstools/convert-colors" "^1.4.0"
+    postcss "^7.0.5"
+    postcss-values-parser "^2.0.0"
+
 postcss-color-hex-alpha@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.2.tgz#e9b1886bb038daed33f6394168c210b40bb4fdb6"
@@ -17030,14 +17060,14 @@ postcss-convert-values@^4.0.1:
     postcss "^7.0.0"
     postcss-value-parser "^3.0.0"
 
-postcss-custom-media@^7.0.4:
+postcss-custom-media@^7.0.4, postcss-custom-media@^7.0.6:
   version "7.0.6"
   resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-7.0.6.tgz#c6b00ff7fee6ddc7dfdd946d66ed65e7743db09b"
   integrity sha512-Txk5Ve0XWw105N6490xoq1aAHkLWIBGowBxHrLqbfsPfv/nzPvP2txyPMwn6OW87eeTO7H0a7P/BVJ4WMPEgJA==
   dependencies:
     postcss "^7.0.5"
 
-postcss-custom-properties@^8.0.5:
+postcss-custom-properties@^8.0.5, postcss-custom-properties@^8.0.8:
   version "8.0.8"
   resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-8.0.8.tgz#1812e2553805e1affce93164dd1709ef6b69c53e"
   integrity sha512-G3U8uSxj0B4jPJ1QBF5WYeW716n5HV/wcH2lOTV1V+EI+F0T0/ZOhl32MLLTMD79bN2mE77IOoclbCoLl4QtPA==
@@ -17459,6 +17489,45 @@ postcss-preset-env@6.0.6:
     postcss-selector-matches "^4.0.0"
     postcss-selector-not "^4.0.0"
 
+postcss-preset-env@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-6.1.1.tgz#c2c8038c3bdedb6b80cfc10f05ba90ff4612972a"
+  integrity sha512-+vf9llIUVtFNYG9FPMJrg6wyVbdR7q4pne8UmD81zLnBhyBdU2pio6Ao10IeiCPduX2q0MChsuqXB1Zv9ZJCgQ==
+  dependencies:
+    autoprefixer "^9.1.5"
+    browserslist "^4.2.0"
+    caniuse-lite "^1.0.30000890"
+    cssdb "^3.2.1"
+    postcss "^7.0.5"
+    postcss-attribute-case-insensitive "^4.0.0"
+    postcss-color-functional-notation "^2.0.1"
+    postcss-color-gray "^5.0.0"
+    postcss-color-hex-alpha "^5.0.2"
+    postcss-color-mod-function "^3.0.3"
+    postcss-color-rebeccapurple "^4.0.1"
+    postcss-custom-media "^7.0.6"
+    postcss-custom-properties "^8.0.8"
+    postcss-custom-selectors "^5.1.2"
+    postcss-dir-pseudo-class "^5.0.0"
+    postcss-env-function "^2.0.2"
+    postcss-focus-visible "^4.0.0"
+    postcss-focus-within "^3.0.0"
+    postcss-font-variant "^4.0.0"
+    postcss-gap-properties "^2.0.0"
+    postcss-image-set-function "^3.0.1"
+    postcss-initial "^3.0.0"
+    postcss-lab-function "^2.0.1"
+    postcss-logical "^3.0.0"
+    postcss-media-minmax "^4.0.0"
+    postcss-nesting "^7.0.0"
+    postcss-overflow-shorthand "^2.0.0"
+    postcss-page-break "^2.0.0"
+    postcss-place "^4.0.1"
+    postcss-pseudo-class-any-link "^6.0.0"
+    postcss-replace-overflow-wrap "^3.0.0"
+    postcss-selector-matches "^4.0.0"
+    postcss-selector-not "^4.0.0"
+
 postcss-pseudo-class-any-link@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz#2ed3eed393b3702879dec4a87032b210daeb04d1"

From f40b98c76ee0eeb14221c28ed6d2570801b2240b Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Tue, 16 Oct 2018 23:45:24 -0700
Subject: [PATCH 04/21] Add specific eslint ignore reasoning and fix default
 postcss

---
 lib/core/src/server/config/webpack.config.default.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/lib/core/src/server/config/webpack.config.default.js b/lib/core/src/server/config/webpack.config.default.js
index 3ef8cd6740ce..bb19bf793374 100644
--- a/lib/core/src/server/config/webpack.config.default.js
+++ b/lib/core/src/server/config/webpack.config.default.js
@@ -23,9 +23,11 @@ const getStyleLoaders = (cssOptions, preProcessor) => {
         // Necessary for external CSS imports to work
         // https://github.com/facebook/create-react-app/issues/2677
         ident: 'postcss',
+        postcss: {},
         plugins: () => [
-          require('postcss-flexbugs-fixes'), // eslint-disable-line
-          require('postcss-preset-env')({ // eslint-disable-line
+          require('postcss-flexbugs-fixes'), // eslint-disable-line global-require
+          // eslint-disable-next-line global-require
+          require('postcss-preset-env')({
             autoprefixer: {
               flexbox: 'no-2009',
             },

From b12ffae26259a0124fdf4279dcc400cdc6b3f498 Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Tue, 16 Oct 2018 23:59:05 -0700
Subject: [PATCH 05/21] Refactor webpack style rules to separate file

---
 .../src/server/config/styleWebpackRules.js    | 91 +++++++++++++++++++
 .../server/config/webpack.config.default.js   | 91 +------------------
 2 files changed, 94 insertions(+), 88 deletions(-)
 create mode 100644 lib/core/src/server/config/styleWebpackRules.js

diff --git a/lib/core/src/server/config/styleWebpackRules.js b/lib/core/src/server/config/styleWebpackRules.js
new file mode 100644
index 000000000000..ecf1a8e19170
--- /dev/null
+++ b/lib/core/src/server/config/styleWebpackRules.js
@@ -0,0 +1,91 @@
+import getCSSModuleLocalIdent from 'react-dev-utils/getCSSModuleLocalIdent';
+
+// style files regexes
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+// common function to get style loaders
+const getStyleLoaders = (cssOptions, preProcessor) => {
+  const loaders = [
+    require.resolve('style-loader'),
+    {
+      loader: require.resolve('css-loader'),
+      options: cssOptions,
+    },
+    {
+      // Options for PostCSS as we reference these options twice
+      // Adds vendor prefixing based on your specified browser support in
+      // package.json
+      loader: require.resolve('postcss-loader'),
+      options: {
+        // Necessary for external CSS imports to work
+        // https://github.com/facebook/create-react-app/issues/2677
+        ident: 'postcss',
+        postcss: {},
+        plugins: () => [
+          require('postcss-flexbugs-fixes'), // eslint-disable-line global-require
+          // eslint-disable-next-line global-require
+          require('postcss-preset-env')({
+            autoprefixer: {
+              flexbox: 'no-2009',
+            },
+            stage: 3,
+          }),
+        ],
+      },
+    },
+  ];
+  if (preProcessor) {
+    loaders.push(require.resolve(preProcessor));
+  }
+  return loaders;
+};
+
+export default [
+  // "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.
+  // In production, we use a plugin to extract that CSS to a file, but
+  // in development "style" loader enables hot editing of CSS.
+  // By default we support CSS Modules with the extension .module.css
+  {
+    test: cssRegex,
+    exclude: cssModuleRegex,
+    use: getStyleLoaders({ importLoaders: 1 }),
+  },
+  // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+  // using the extension .module.css
+  {
+    test: cssModuleRegex,
+    use: getStyleLoaders({
+      importLoaders: 1,
+      modules: true,
+      getLocalIdent: getCSSModuleLocalIdent,
+    }),
+  },
+  // Opt-in support for SASS (using .scss or .sass extensions).
+  // Chains the sass-loader with the css-loader and the style-loader
+  // to immediately apply all styles to the DOM.
+  // By default we support SASS Modules with the
+  // extensions .module.scss or .module.sass
+  {
+    test: sassRegex,
+    exclude: sassModuleRegex,
+    use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
+  },
+  // Adds support for CSS Modules, but using SASS
+  // using the extension .module.scss or .module.sass
+  {
+    test: sassModuleRegex,
+    use: getStyleLoaders(
+      {
+        importLoaders: 2,
+        modules: true,
+        getLocalIdent: getCSSModuleLocalIdent,
+      },
+      'sass-loader'
+    ),
+  },
+];
diff --git a/lib/core/src/server/config/webpack.config.default.js b/lib/core/src/server/config/webpack.config.default.js
index bb19bf793374..b0e4d8f2782d 100644
--- a/lib/core/src/server/config/webpack.config.default.js
+++ b/lib/core/src/server/config/webpack.config.default.js
@@ -1,47 +1,4 @@
-import getCSSModuleLocalIdent from 'react-dev-utils/getCSSModuleLocalIdent';
-
-// style files regexes
-const cssRegex = /\.css$/;
-const cssModuleRegex = /\.module\.css$/;
-const sassRegex = /\.(scss|sass)$/;
-const sassModuleRegex = /\.module\.(scss|sass)$/;
-
-// common function to get style loaders
-const getStyleLoaders = (cssOptions, preProcessor) => {
-  const loaders = [
-    require.resolve('style-loader'),
-    {
-      loader: require.resolve('css-loader'),
-      options: cssOptions,
-    },
-    {
-      // Options for PostCSS as we reference these options twice
-      // Adds vendor prefixing based on your specified browser support in
-      // package.json
-      loader: require.resolve('postcss-loader'),
-      options: {
-        // Necessary for external CSS imports to work
-        // https://github.com/facebook/create-react-app/issues/2677
-        ident: 'postcss',
-        postcss: {},
-        plugins: () => [
-          require('postcss-flexbugs-fixes'), // eslint-disable-line global-require
-          // eslint-disable-next-line global-require
-          require('postcss-preset-env')({
-            autoprefixer: {
-              flexbox: 'no-2009',
-            },
-            stage: 3,
-          }),
-        ],
-      },
-    },
-  ];
-  if (preProcessor) {
-    loaders.push(require.resolve(preProcessor));
-  }
-  return loaders;
-};
+import styleWebpackRules from './styleWebpackRules';
 
 export function createDefaultWebpackConfig(storybookBaseConfig) {
   return {
@@ -50,50 +7,8 @@ export function createDefaultWebpackConfig(storybookBaseConfig) {
       ...storybookBaseConfig.module,
       rules: [
         ...storybookBaseConfig.module.rules,
-        // "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.
-        // In production, we use a plugin to extract that CSS to a file, but
-        // in development "style" loader enables hot editing of CSS.
-        // By default we support CSS Modules with the extension .module.css
-        {
-          test: cssRegex,
-          exclude: cssModuleRegex,
-          use: getStyleLoaders({ importLoaders: 1 }),
-        },
-        // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
-        // using the extension .module.css
-        {
-          test: cssModuleRegex,
-          use: getStyleLoaders({
-            importLoaders: 1,
-            modules: true,
-            getLocalIdent: getCSSModuleLocalIdent,
-          }),
-        },
-        // Opt-in support for SASS (using .scss or .sass extensions).
-        // Chains the sass-loader with the css-loader and the style-loader
-        // to immediately apply all styles to the DOM.
-        // By default we support SASS Modules with the
-        // extensions .module.scss or .module.sass
-        {
-          test: sassRegex,
-          exclude: sassModuleRegex,
-          use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
-        },
-        // Adds support for CSS Modules, but using SASS
-        // using the extension .module.scss or .module.sass
-        {
-          test: sassModuleRegex,
-          use: getStyleLoaders(
-            {
-              importLoaders: 2,
-              modules: true,
-              getLocalIdent: getCSSModuleLocalIdent,
-            },
-            'sass-loader'
-          ),
-        },
+        //  Style rules heavily inspired by CRA v2.0
+        ...styleWebpackRules,
         {
           test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
           loader: require.resolve('file-loader'),

From 3f88f7421d70b252b579f36fa9fa6beb2a9eb8d9 Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Wed, 17 Oct 2018 08:21:57 -0700
Subject: [PATCH 06/21] Add sass-loader as core dependency

---
 lib/core/package.json |  3 ++-
 yarn.lock             | 12 ++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/lib/core/package.json b/lib/core/package.json
index 686df5db32a1..9f6cc55e4425 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -42,11 +42,11 @@
     "boxen": "^2.0.0",
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "chalk": "^2.4.1",
+    "cli-table3": "0.5.1",
     "commander": "^2.19.0",
     "common-tags": "^1.8.0",
     "core-js": "^2.5.7",
     "css-loader": "^1.0.0",
-    "cli-table3": "0.5.1",
     "detect-port": "^1.2.3",
     "dotenv-webpack": "^1.5.7",
     "ejs": "^2.6.1",
@@ -72,6 +72,7 @@
     "react-dev-utils": "^6.0.5",
     "redux": "^4.0.1",
     "resolve": "^1.8.1",
+    "sass-loader": "^7.1.0",
     "semver": "^5.6.0",
     "serve-favicon": "^2.5.0",
     "shelljs": "^0.8.2",
diff --git a/yarn.lock b/yarn.lock
index 538c7b9b85bd..9e205088068b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10499,12 +10499,12 @@ graphql-request@^1.5.0:
   dependencies:
     cross-fetch "2.2.2"
 
-graphql@^0.13.2, graphql@^14.0.2:
-  version "0.13.2"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.13.2.tgz#4c740ae3c222823e7004096f832e7b93b2108270"
-  integrity sha512-QZ5BL8ZO/B20VA8APauGBg3GyEgZ19eduvpLWoq5x7gMmWnHoy8rlQWPLmWgFvo1yNgjSEFMesmS4R6pPr7xog==
+graphql@^14.0.2:
+  version "14.0.2"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-14.0.2.tgz#7dded337a4c3fd2d075692323384034b357f5650"
+  integrity sha512-gUC4YYsaiSJT1h40krG3J+USGlwhzNTXSb4IOZljn9ag5Tj+RkoXrWp+Kh7WyE3t1NCfab5kzCuxBIvOMERMXw==
   dependencies:
-    iterall "^1.2.1"
+    iterall "^1.2.2"
 
 grizzly@^3.0.3:
   version "3.0.3"
@@ -12247,7 +12247,7 @@ istextorbinary@2.1.0:
     editions "^1.1.1"
     textextensions "1 || 2"
 
-iterall@^1.2.1:
+iterall@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7"
   integrity sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA==

From da0ad40d2648cc52c9cab399914780b3bfe9bfb2 Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Wed, 17 Oct 2018 08:32:52 -0700
Subject: [PATCH 07/21] Update yarn.lock with bootstrap

---
 yarn.lock | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 9e205088068b..538c7b9b85bd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10499,12 +10499,12 @@ graphql-request@^1.5.0:
   dependencies:
     cross-fetch "2.2.2"
 
-graphql@^14.0.2:
-  version "14.0.2"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-14.0.2.tgz#7dded337a4c3fd2d075692323384034b357f5650"
-  integrity sha512-gUC4YYsaiSJT1h40krG3J+USGlwhzNTXSb4IOZljn9ag5Tj+RkoXrWp+Kh7WyE3t1NCfab5kzCuxBIvOMERMXw==
+graphql@^0.13.2, graphql@^14.0.2:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.13.2.tgz#4c740ae3c222823e7004096f832e7b93b2108270"
+  integrity sha512-QZ5BL8ZO/B20VA8APauGBg3GyEgZ19eduvpLWoq5x7gMmWnHoy8rlQWPLmWgFvo1yNgjSEFMesmS4R6pPr7xog==
   dependencies:
-    iterall "^1.2.2"
+    iterall "^1.2.1"
 
 grizzly@^3.0.3:
   version "3.0.3"
@@ -12247,7 +12247,7 @@ istextorbinary@2.1.0:
     editions "^1.1.1"
     textextensions "1 || 2"
 
-iterall@^1.2.2:
+iterall@^1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7"
   integrity sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA==

From 76a668fb683608f422ecd84d986344cc2acaf2d6 Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Wed, 17 Oct 2018 08:43:43 -0700
Subject: [PATCH 08/21] Update angular-cli style filter

---
 app/angular/src/server/angular-cli_config.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/angular/src/server/angular-cli_config.js b/app/angular/src/server/angular-cli_config.js
index 498744ea30d6..d6a362bdab72 100644
--- a/app/angular/src/server/angular-cli_config.js
+++ b/app/angular/src/server/angular-cli_config.js
@@ -107,11 +107,14 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions
 
   const { cliCommonConfig, cliStyleConfig } = cliParts;
 
-  // Don't use storybooks .css/.scss rules because we have to use rules created by @angular-devkit/build-angular
-  // because @angular-devkit/build-angular created rules have include/exclude for global style files.
+  // Don't use storybooks .css/.scss/.sass rules because we have to use rules
+  // created by @angular-devkit/build-angular because
+  // @angular-devkit/build-angular created rules have include/exclude for global
+  // style files.
   const rulesExcludingStyles = baseConfig.module.rules.filter(
     rule =>
-      !rule.test || (rule.test.toString() !== '/\\.css$/' && rule.test.toString() !== '/\\.scss$/')
+      !rule.test ||
+      (!rule.test.test('.css') && !rule.test.test('.scss') && !rule.test.test('.sass'))
   );
 
   // cliStyleConfig.entry adds global style files to the webpack context

From 980f394be956cefa9d6c1bafbd09cbaab2c0637c Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Wed, 17 Oct 2018 21:30:31 -0700
Subject: [PATCH 09/21] Revert default webpack config changes

---
 app/angular/src/server/angular-cli_config.js  |  9 +-
 lib/core/package.json                         |  5 +-
 .../src/server/config/styleWebpackRules.js    | 91 -------------------
 .../server/config/webpack.config.default.js   | 29 +++++-
 yarn.lock                                     | 54 +----------
 5 files changed, 34 insertions(+), 154 deletions(-)
 delete mode 100644 lib/core/src/server/config/styleWebpackRules.js

diff --git a/app/angular/src/server/angular-cli_config.js b/app/angular/src/server/angular-cli_config.js
index d6a362bdab72..498744ea30d6 100644
--- a/app/angular/src/server/angular-cli_config.js
+++ b/app/angular/src/server/angular-cli_config.js
@@ -107,14 +107,11 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions
 
   const { cliCommonConfig, cliStyleConfig } = cliParts;
 
-  // Don't use storybooks .css/.scss/.sass rules because we have to use rules
-  // created by @angular-devkit/build-angular because
-  // @angular-devkit/build-angular created rules have include/exclude for global
-  // style files.
+  // Don't use storybooks .css/.scss rules because we have to use rules created by @angular-devkit/build-angular
+  // because @angular-devkit/build-angular created rules have include/exclude for global style files.
   const rulesExcludingStyles = baseConfig.module.rules.filter(
     rule =>
-      !rule.test ||
-      (!rule.test.test('.css') && !rule.test.test('.scss') && !rule.test.test('.sass'))
+      !rule.test || (rule.test.toString() !== '/\\.css$/' && rule.test.toString() !== '/\\.scss$/')
   );
 
   // cliStyleConfig.entry adds global style files to the webpack context
diff --git a/lib/core/package.json b/lib/core/package.json
index 7a07105f5951..e806c31b2087 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -37,16 +37,17 @@
     "@storybook/node-logger": "4.0.0-rc.0",
     "@storybook/ui": "4.0.0-rc.0",
     "airbnb-js-shims": "^1 || ^2",
+    "autoprefixer": "^9.1.5",
     "babel-plugin-macros": "^2.4.2",
     "babel-preset-minify": "^0.5.0",
     "boxen": "^2.0.0",
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "chalk": "^2.4.1",
-    "cli-table3": "0.5.1",
     "commander": "^2.19.0",
     "common-tags": "^1.8.0",
     "core-js": "^2.5.7",
     "css-loader": "^1.0.0",
+    "cli-table3": "0.5.1",
     "detect-port": "^1.2.3",
     "dotenv-webpack": "^1.5.7",
     "ejs": "^2.6.1",
@@ -65,14 +66,12 @@
     "opn": "^5.4.0",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.1.1",
     "prop-types": "^15.6.2",
     "qs": "^6.5.2",
     "raw-loader": "^0.5.1",
     "react-dev-utils": "^6.0.5",
     "redux": "^4.0.1",
     "resolve": "^1.8.1",
-    "sass-loader": "^7.1.0",
     "semver": "^5.6.0",
     "serve-favicon": "^2.5.0",
     "shelljs": "^0.8.2",
diff --git a/lib/core/src/server/config/styleWebpackRules.js b/lib/core/src/server/config/styleWebpackRules.js
deleted file mode 100644
index ecf1a8e19170..000000000000
--- a/lib/core/src/server/config/styleWebpackRules.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import getCSSModuleLocalIdent from 'react-dev-utils/getCSSModuleLocalIdent';
-
-// style files regexes
-const cssRegex = /\.css$/;
-const cssModuleRegex = /\.module\.css$/;
-const sassRegex = /\.(scss|sass)$/;
-const sassModuleRegex = /\.module\.(scss|sass)$/;
-
-// common function to get style loaders
-const getStyleLoaders = (cssOptions, preProcessor) => {
-  const loaders = [
-    require.resolve('style-loader'),
-    {
-      loader: require.resolve('css-loader'),
-      options: cssOptions,
-    },
-    {
-      // Options for PostCSS as we reference these options twice
-      // Adds vendor prefixing based on your specified browser support in
-      // package.json
-      loader: require.resolve('postcss-loader'),
-      options: {
-        // Necessary for external CSS imports to work
-        // https://github.com/facebook/create-react-app/issues/2677
-        ident: 'postcss',
-        postcss: {},
-        plugins: () => [
-          require('postcss-flexbugs-fixes'), // eslint-disable-line global-require
-          // eslint-disable-next-line global-require
-          require('postcss-preset-env')({
-            autoprefixer: {
-              flexbox: 'no-2009',
-            },
-            stage: 3,
-          }),
-        ],
-      },
-    },
-  ];
-  if (preProcessor) {
-    loaders.push(require.resolve(preProcessor));
-  }
-  return loaders;
-};
-
-export default [
-  // "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.
-  // In production, we use a plugin to extract that CSS to a file, but
-  // in development "style" loader enables hot editing of CSS.
-  // By default we support CSS Modules with the extension .module.css
-  {
-    test: cssRegex,
-    exclude: cssModuleRegex,
-    use: getStyleLoaders({ importLoaders: 1 }),
-  },
-  // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
-  // using the extension .module.css
-  {
-    test: cssModuleRegex,
-    use: getStyleLoaders({
-      importLoaders: 1,
-      modules: true,
-      getLocalIdent: getCSSModuleLocalIdent,
-    }),
-  },
-  // Opt-in support for SASS (using .scss or .sass extensions).
-  // Chains the sass-loader with the css-loader and the style-loader
-  // to immediately apply all styles to the DOM.
-  // By default we support SASS Modules with the
-  // extensions .module.scss or .module.sass
-  {
-    test: sassRegex,
-    exclude: sassModuleRegex,
-    use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
-  },
-  // Adds support for CSS Modules, but using SASS
-  // using the extension .module.scss or .module.sass
-  {
-    test: sassModuleRegex,
-    use: getStyleLoaders(
-      {
-        importLoaders: 2,
-        modules: true,
-        getLocalIdent: getCSSModuleLocalIdent,
-      },
-      'sass-loader'
-    ),
-  },
-];
diff --git a/lib/core/src/server/config/webpack.config.default.js b/lib/core/src/server/config/webpack.config.default.js
index b0e4d8f2782d..4e1362300e72 100644
--- a/lib/core/src/server/config/webpack.config.default.js
+++ b/lib/core/src/server/config/webpack.config.default.js
@@ -1,4 +1,4 @@
-import styleWebpackRules from './styleWebpackRules';
+import autoprefixer from 'autoprefixer';
 
 export function createDefaultWebpackConfig(storybookBaseConfig) {
   return {
@@ -7,8 +7,31 @@ export function createDefaultWebpackConfig(storybookBaseConfig) {
       ...storybookBaseConfig.module,
       rules: [
         ...storybookBaseConfig.module.rules,
-        //  Style rules heavily inspired by CRA v2.0
-        ...styleWebpackRules,
+        {
+          test: /\.css$/,
+          use: [
+            require.resolve('style-loader'),
+            {
+              loader: require.resolve('css-loader'),
+              options: {
+                importLoaders: 1,
+              },
+            },
+            {
+              loader: require.resolve('postcss-loader'),
+              options: {
+                ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
+                postcss: {},
+                plugins: () => [
+                  require('postcss-flexbugs-fixes'), // eslint-disable-line
+                  autoprefixer({
+                    flexbox: 'no-2009',
+                  }),
+                ],
+              },
+            },
+          ],
+        },
         {
           test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
           loader: require.resolve('file-loader'),
diff --git a/yarn.lock b/yarn.lock
index a33a85a44ba9..6d4e59757819 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5460,7 +5460,7 @@ browserslist@^4.0.0, browserslist@^4.1.0, browserslist@^4.1.1:
     electron-to-chromium "^1.3.73"
     node-releases "^1.0.0-alpha.12"
 
-browserslist@^4.2.0, browserslist@^4.2.1:
+browserslist@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.2.1.tgz#257a24c879d1cd4016348eee5c25de683260b21d"
   integrity sha512-1oO0c7Zhejwd+LXihS89WqtKionSbz298rJZKJgfrHIZhrV8AC15gw553VcB0lcEugja7IhWD7iAlrsamfYVPA==
@@ -16690,15 +16690,6 @@ postcss-color-functional-notation@^2.0.1:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
 
-postcss-color-gray@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz#532a31eb909f8da898ceffe296fdc1f864be8547"
-  integrity sha512-q6BuRnAGKM/ZRpfDascZlIZPjvwsRye7UDNalqVz3s7GDxMtqPY6+Q871liNxsonUw8oC61OG+PSaysYpl1bnw==
-  dependencies:
-    "@csstools/convert-colors" "^1.4.0"
-    postcss "^7.0.5"
-    postcss-values-parser "^2.0.0"
-
 postcss-color-hex-alpha@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.2.tgz#e9b1886bb038daed33f6394168c210b40bb4fdb6"
@@ -16743,14 +16734,14 @@ postcss-convert-values@^4.0.1:
     postcss "^7.0.0"
     postcss-value-parser "^3.0.0"
 
-postcss-custom-media@^7.0.4, postcss-custom-media@^7.0.6:
+postcss-custom-media@^7.0.4:
   version "7.0.6"
   resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-7.0.6.tgz#c6b00ff7fee6ddc7dfdd946d66ed65e7743db09b"
   integrity sha512-Txk5Ve0XWw105N6490xoq1aAHkLWIBGowBxHrLqbfsPfv/nzPvP2txyPMwn6OW87eeTO7H0a7P/BVJ4WMPEgJA==
   dependencies:
     postcss "^7.0.5"
 
-postcss-custom-properties@^8.0.5, postcss-custom-properties@^8.0.8:
+postcss-custom-properties@^8.0.5:
   version "8.0.8"
   resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-8.0.8.tgz#1812e2553805e1affce93164dd1709ef6b69c53e"
   integrity sha512-G3U8uSxj0B4jPJ1QBF5WYeW716n5HV/wcH2lOTV1V+EI+F0T0/ZOhl32MLLTMD79bN2mE77IOoclbCoLl4QtPA==
@@ -17172,45 +17163,6 @@ postcss-preset-env@6.0.6:
     postcss-selector-matches "^4.0.0"
     postcss-selector-not "^4.0.0"
 
-postcss-preset-env@^6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-6.1.1.tgz#c2c8038c3bdedb6b80cfc10f05ba90ff4612972a"
-  integrity sha512-+vf9llIUVtFNYG9FPMJrg6wyVbdR7q4pne8UmD81zLnBhyBdU2pio6Ao10IeiCPduX2q0MChsuqXB1Zv9ZJCgQ==
-  dependencies:
-    autoprefixer "^9.1.5"
-    browserslist "^4.2.0"
-    caniuse-lite "^1.0.30000890"
-    cssdb "^3.2.1"
-    postcss "^7.0.5"
-    postcss-attribute-case-insensitive "^4.0.0"
-    postcss-color-functional-notation "^2.0.1"
-    postcss-color-gray "^5.0.0"
-    postcss-color-hex-alpha "^5.0.2"
-    postcss-color-mod-function "^3.0.3"
-    postcss-color-rebeccapurple "^4.0.1"
-    postcss-custom-media "^7.0.6"
-    postcss-custom-properties "^8.0.8"
-    postcss-custom-selectors "^5.1.2"
-    postcss-dir-pseudo-class "^5.0.0"
-    postcss-env-function "^2.0.2"
-    postcss-focus-visible "^4.0.0"
-    postcss-focus-within "^3.0.0"
-    postcss-font-variant "^4.0.0"
-    postcss-gap-properties "^2.0.0"
-    postcss-image-set-function "^3.0.1"
-    postcss-initial "^3.0.0"
-    postcss-lab-function "^2.0.1"
-    postcss-logical "^3.0.0"
-    postcss-media-minmax "^4.0.0"
-    postcss-nesting "^7.0.0"
-    postcss-overflow-shorthand "^2.0.0"
-    postcss-page-break "^2.0.0"
-    postcss-place "^4.0.1"
-    postcss-pseudo-class-any-link "^6.0.0"
-    postcss-replace-overflow-wrap "^3.0.0"
-    postcss-selector-matches "^4.0.0"
-    postcss-selector-not "^4.0.0"
-
 postcss-pseudo-class-any-link@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz#2ed3eed393b3702879dec4a87032b210daeb04d1"

From 53004c408a0f4edb9313835f4402e81322707a66 Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Thu, 18 Oct 2018 00:55:02 -0700
Subject: [PATCH 10/21] CRA webpack style preset

---
 app/react/package.json                        |  1 +
 app/react/src/server/cra_config.js            | 61 +++++++++++++++++++
 .../src/server/framework-preset-cra-styles.js |  5 ++
 app/react/src/server/options.js               |  1 +
 yarn.lock                                     |  7 +++
 5 files changed, 75 insertions(+)
 create mode 100644 app/react/src/server/cra_config.js
 create mode 100644 app/react/src/server/framework-preset-cra-styles.js

diff --git a/app/react/package.json b/app/react/package.json
index 09ff8eb3b30b..d8d3d3251dde 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -33,6 +33,7 @@
     "@babel/runtime": "^7.1.2",
     "@emotion/styled": "^0.10.6",
     "@storybook/core": "4.0.0-rc.1",
+    "@storybook/node-logger": "^3.4.11",
     "babel-plugin-react-docgen": "^2.0.0",
     "common-tags": "^1.8.0",
     "global": "^4.3.2",
diff --git a/app/react/src/server/cra_config.js b/app/react/src/server/cra_config.js
new file mode 100644
index 000000000000..58e5e6269ed4
--- /dev/null
+++ b/app/react/src/server/cra_config.js
@@ -0,0 +1,61 @@
+import { logger } from '@storybook/node-logger';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+const { normalizeCondition } = require('webpack/lib/RuleSet');
+
+export function isReactScriptsInstalled() {
+  try {
+    require.resolve('react-scripts/bin/react-scripts');
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+export function getStyleRules(rules) {
+  // Extensions of style rules we're interested in
+  const extensions = ['.css', '.scss', '.sass', '.module.css', '.module.scss', '.module.sass'];
+
+  return rules.reduce((styleRules, rule) => {
+    if (rule.test && extensions.some(normalizeCondition(rule.test))) {
+      // If the base test is for styles, return early
+      return styleRules.concat(rule);
+    }
+
+    if (!rule.test && rule.oneOf) {
+      styleRules.push(...getStyleRules(rule.oneOf));
+    }
+
+    if (!rule.test && rule.rules) {
+      styleRules.push(...getStyleRules(rule.rules));
+    }
+
+    return styleRules;
+  }, []);
+}
+
+export function applyCRAWebpackConfig(baseConfig) {
+  if (!isReactScriptsInstalled()) {
+    logger.info('=> Using base config because react-scripts is not installed.');
+    return baseConfig;
+  }
+
+  // Remove style rules from baseConfig
+  const baseRulesExcludingStyles = baseConfig.module.rules.filter(
+    rule => !rule.test || !['.css', '.scss', '.sass'].some(normalizeCondition(rule.test))
+  );
+
+  // TODO: Load based on NODE_ENV
+  // eslint-disable-next-line global-require, import/no-extraneous-dependencies
+  const craWebpackConfig = require('react-scripts/config/webpack.config.dev');
+  //  Concat will ensure rules is an array
+  const craStyleRules = getStyleRules([].concat(craWebpackConfig.module.rules));
+
+  return {
+    ...baseConfig,
+    module: {
+      ...baseConfig.module,
+      rules: [...baseRulesExcludingStyles, ...craStyleRules],
+    },
+  };
+}
diff --git a/app/react/src/server/framework-preset-cra-styles.js b/app/react/src/server/framework-preset-cra-styles.js
new file mode 100644
index 000000000000..5898728a2ead
--- /dev/null
+++ b/app/react/src/server/framework-preset-cra-styles.js
@@ -0,0 +1,5 @@
+import { applyCRAWebpackConfig } from './cra_config';
+
+export function webpackFinal(config) {
+  return applyCRAWebpackConfig(config);
+}
diff --git a/app/react/src/server/options.js b/app/react/src/server/options.js
index 1dda06fe1e3c..643114ff9ac6 100644
--- a/app/react/src/server/options.js
+++ b/app/react/src/server/options.js
@@ -6,5 +6,6 @@ export default {
   frameworkPresets: [
     require.resolve('./framework-preset-react.js'),
     require.resolve('./framework-preset-react-docgen.js'),
+    require.resolve('./framework-preset-cra-styles.js'),
   ],
 };
diff --git a/yarn.lock b/yarn.lock
index 6d4e59757819..7e43fef80c17 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1880,6 +1880,13 @@
     "@storybook/react-simple-di" "^1.2.1"
     babel-runtime "6.x.x"
 
+"@storybook/node-logger@^3.4.11":
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-3.4.11.tgz#a6684a4c21f74dae937cd9f202deec0932d3f3b5"
+  integrity sha512-eCjvZsCwZTcjDOeG7JDEVs5bugyybpAFu/4+X3hfikxGBBjnx2NtjJIfIsriUKa1O559+aFGUG73wogYAjudhg==
+  dependencies:
+    npmlog "^4.1.2"
+
 "@storybook/podda@^1.2.3":
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/@storybook/podda/-/podda-1.2.3.tgz#53c4a1a3f8c7bbd5755dff5c34576fd1af9d38ba"

From 41826b661b30db7f499fd607fcea1c0d3576d876 Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Thu, 18 Oct 2018 18:40:36 -0700
Subject: [PATCH 11/21] Add suport for production config

---
 app/react/src/server/cra_config.js | 35 +++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/app/react/src/server/cra_config.js b/app/react/src/server/cra_config.js
index 58e5e6269ed4..ea7e779dba1c 100644
--- a/app/react/src/server/cra_config.js
+++ b/app/react/src/server/cra_config.js
@@ -1,11 +1,15 @@
 import { logger } from '@storybook/node-logger';
 
-// eslint-disable-next-line import/no-extraneous-dependencies
-const { normalizeCondition } = require('webpack/lib/RuleSet');
+let MiniCssExtractPlugin;
+let normalizeCondition;
 
 export function isReactScriptsInstalled() {
   try {
     require.resolve('react-scripts/bin/react-scripts');
+    // eslint-disable-next-line global-require, import/no-extraneous-dependencies, prefer-destructuring
+    normalizeCondition = require('webpack/lib/RuleSet').normalizeCondition;
+    // eslint-disable-next-line global-require, import/no-extraneous-dependencies
+    MiniCssExtractPlugin = require('mini-css-extract-plugin');
     return true;
   } catch (e) {
     return false;
@@ -40,22 +44,43 @@ export function applyCRAWebpackConfig(baseConfig) {
     return baseConfig;
   }
 
+  logger.info('=> Loading create-react-app config.');
+
   // Remove style rules from baseConfig
   const baseRulesExcludingStyles = baseConfig.module.rules.filter(
     rule => !rule.test || !['.css', '.scss', '.sass'].some(normalizeCondition(rule.test))
   );
 
-  // TODO: Load based on NODE_ENV
-  // eslint-disable-next-line global-require, import/no-extraneous-dependencies
-  const craWebpackConfig = require('react-scripts/config/webpack.config.dev');
+  let craWebpackConfig;
+  if (baseConfig.mode === 'production') {
+    // eslint-disable-next-line global-require, import/no-extraneous-dependencies
+    craWebpackConfig = require('react-scripts/config/webpack.config.prod');
+  } else {
+    // eslint-disable-next-line global-require, import/no-extraneous-dependencies
+    craWebpackConfig = require('react-scripts/config/webpack.config.dev');
+  }
+
   //  Concat will ensure rules is an array
   const craStyleRules = getStyleRules([].concat(craWebpackConfig.module.rules));
 
+  //  Add css minification for production
+  const plugins = [...baseConfig.plugins];
+  if (baseConfig.mode === 'production')
+    plugins.push(
+      new MiniCssExtractPlugin({
+        // Options similar to the same options in webpackOptions.output
+        // both options are optional
+        filename: 'static/css/[name].[contenthash:8].css',
+        chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+      })
+    );
+
   return {
     ...baseConfig,
     module: {
       ...baseConfig.module,
       rules: [...baseRulesExcludingStyles, ...craStyleRules],
     },
+    plugins,
   };
 }

From 1753127e01264ef574499fe5c1ce9fe4f07f403a Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Thu, 18 Oct 2018 18:45:14 -0700
Subject: [PATCH 12/21] Update autoprefixer from revert

---
 lib/core/package.json |  2 +-
 yarn.lock             | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/lib/core/package.json b/lib/core/package.json
index 9a12031eda35..4b0810aefe14 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -37,7 +37,7 @@
     "@storybook/node-logger": "4.0.0-rc.1",
     "@storybook/ui": "4.0.0-rc.1",
     "airbnb-js-shims": "^1 || ^2",
-    "autoprefixer": "^9.1.5",
+    "autoprefixer": "^9.2.1",
     "babel-plugin-macros": "^2.4.2",
     "babel-preset-minify": "^0.5.0",
     "boxen": "^2.0.0",
diff --git a/yarn.lock b/yarn.lock
index 7e43fef80c17..1bc3e8830584 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3081,7 +3081,7 @@ autoprefixer@^8.4.1:
     postcss "^6.0.23"
     postcss-value-parser "^3.2.3"
 
-autoprefixer@^9.1.5:
+autoprefixer@^9.1.5, autoprefixer@^9.2.1:
   version "9.2.1"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.2.1.tgz#1f2f1179ceed4711b7ab064dbd5c3f9e83d9dc62"
   integrity sha512-qlK4GnZk8OXLK+8kBn9ttfzu2PkhRe8kVYoWcc9HsrZEMWiBkQuRYdXyJg9cIIKxfMzhh6UbvlJ1CsstMIzxwA==
@@ -10506,12 +10506,12 @@ graphql-request@^1.5.0:
   dependencies:
     cross-fetch "2.2.2"
 
-graphql@^0.13.2, graphql@^14.0.2:
-  version "0.13.2"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.13.2.tgz#4c740ae3c222823e7004096f832e7b93b2108270"
-  integrity sha512-QZ5BL8ZO/B20VA8APauGBg3GyEgZ19eduvpLWoq5x7gMmWnHoy8rlQWPLmWgFvo1yNgjSEFMesmS4R6pPr7xog==
+graphql@^14.0.2:
+  version "14.0.2"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-14.0.2.tgz#7dded337a4c3fd2d075692323384034b357f5650"
+  integrity sha512-gUC4YYsaiSJT1h40krG3J+USGlwhzNTXSb4IOZljn9ag5Tj+RkoXrWp+Kh7WyE3t1NCfab5kzCuxBIvOMERMXw==
   dependencies:
-    iterall "^1.2.1"
+    iterall "^1.2.2"
 
 grizzly@^3.0.3:
   version "3.0.3"
@@ -12254,7 +12254,7 @@ istextorbinary@2.1.0:
     editions "^1.1.1"
     textextensions "1 || 2"
 
-iterall@^1.2.1:
+iterall@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7"
   integrity sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA==

From e1b73c7b94e21098caafc619f22a8e216163696b Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Thu, 18 Oct 2018 18:54:08 -0700
Subject: [PATCH 13/21] Check for react-scripts before calling merge

---
 app/react/src/server/cra_config.js                  | 10 +---------
 app/react/src/server/framework-preset-cra-styles.js | 10 +++++++++-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/react/src/server/cra_config.js b/app/react/src/server/cra_config.js
index ea7e779dba1c..79333d46c076 100644
--- a/app/react/src/server/cra_config.js
+++ b/app/react/src/server/cra_config.js
@@ -1,5 +1,3 @@
-import { logger } from '@storybook/node-logger';
-
 let MiniCssExtractPlugin;
 let normalizeCondition;
 
@@ -39,18 +37,12 @@ export function getStyleRules(rules) {
 }
 
 export function applyCRAWebpackConfig(baseConfig) {
-  if (!isReactScriptsInstalled()) {
-    logger.info('=> Using base config because react-scripts is not installed.');
-    return baseConfig;
-  }
-
-  logger.info('=> Loading create-react-app config.');
-
   // Remove style rules from baseConfig
   const baseRulesExcludingStyles = baseConfig.module.rules.filter(
     rule => !rule.test || !['.css', '.scss', '.sass'].some(normalizeCondition(rule.test))
   );
 
+  //  Load create-react-app config
   let craWebpackConfig;
   if (baseConfig.mode === 'production') {
     // eslint-disable-next-line global-require, import/no-extraneous-dependencies
diff --git a/app/react/src/server/framework-preset-cra-styles.js b/app/react/src/server/framework-preset-cra-styles.js
index 5898728a2ead..ad1ce7a27142 100644
--- a/app/react/src/server/framework-preset-cra-styles.js
+++ b/app/react/src/server/framework-preset-cra-styles.js
@@ -1,5 +1,13 @@
-import { applyCRAWebpackConfig } from './cra_config';
+import { logger } from '@storybook/node-logger';
+import { applyCRAWebpackConfig, isReactScriptsInstalled } from './cra_config';
 
 export function webpackFinal(config) {
+  if (!isReactScriptsInstalled()) {
+    logger.info('=> Using base config because react-scripts is not installed.');
+    return config;
+  }
+
+  logger.info('=> Loading create-react-app config.');
+
   return applyCRAWebpackConfig(config);
 }

From 5949b40fce47dd3b883d44347c61dfcd079aa66c Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Thu, 18 Oct 2018 20:44:40 -0700
Subject: [PATCH 14/21] Update yarn.lock

---
 yarn.lock | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 1bc3e8830584..b81d71ef5ed6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10506,12 +10506,12 @@ graphql-request@^1.5.0:
   dependencies:
     cross-fetch "2.2.2"
 
-graphql@^14.0.2:
-  version "14.0.2"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-14.0.2.tgz#7dded337a4c3fd2d075692323384034b357f5650"
-  integrity sha512-gUC4YYsaiSJT1h40krG3J+USGlwhzNTXSb4IOZljn9ag5Tj+RkoXrWp+Kh7WyE3t1NCfab5kzCuxBIvOMERMXw==
+graphql@^0.13.2, graphql@^14.0.2:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.13.2.tgz#4c740ae3c222823e7004096f832e7b93b2108270"
+  integrity sha512-QZ5BL8ZO/B20VA8APauGBg3GyEgZ19eduvpLWoq5x7gMmWnHoy8rlQWPLmWgFvo1yNgjSEFMesmS4R6pPr7xog==
   dependencies:
-    iterall "^1.2.2"
+    iterall "^1.2.1"
 
 grizzly@^3.0.3:
   version "3.0.3"
@@ -12254,7 +12254,7 @@ istextorbinary@2.1.0:
     editions "^1.1.1"
     textextensions "1 || 2"
 
-iterall@^1.2.2:
+iterall@^1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7"
   integrity sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA==

From b2f9e6617cf115137f98373ed7ad0cb2e1c47022 Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Thu, 18 Oct 2018 23:38:58 -0700
Subject: [PATCH 15/21] Only load react-scripts config newer than v2

---
 app/react/package.json             | 3 ++-
 app/react/src/server/cra_config.js | 7 ++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/react/package.json b/app/react/package.json
index d8d3d3251dde..b9f91178b316 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -39,7 +39,8 @@
     "global": "^4.3.2",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.2",
-    "react-dev-utils": "^6.0.5"
+    "react-dev-utils": "^6.0.5",
+    "semver": "^5.6.0"
   },
   "peerDependencies": {
     "babel-loader": "^7.0.0 || ^8.0.0",
diff --git a/app/react/src/server/cra_config.js b/app/react/src/server/cra_config.js
index 79333d46c076..60c51cc78c0b 100644
--- a/app/react/src/server/cra_config.js
+++ b/app/react/src/server/cra_config.js
@@ -1,9 +1,14 @@
+import semver from 'semver';
+
 let MiniCssExtractPlugin;
 let normalizeCondition;
 
 export function isReactScriptsInstalled() {
   try {
-    require.resolve('react-scripts/bin/react-scripts');
+    // eslint-disable-next-line global-require, import/no-extraneous-dependencies
+    const reactScriptsJson = require('react-scripts/package.json');
+    if (semver.lt(reactScriptsJson.version, '2.0.0')) return false;
+
     // eslint-disable-next-line global-require, import/no-extraneous-dependencies, prefer-destructuring
     normalizeCondition = require('webpack/lib/RuleSet').normalizeCondition;
     // eslint-disable-next-line global-require, import/no-extraneous-dependencies

From 2873911d03791ecff4c275d93d2cf726825d95d9 Mon Sep 17 00:00:00 2001
From: igor-dv <davydkin.igor@gmail.com>
Date: Fri, 19 Oct 2018 15:39:40 +0300
Subject: [PATCH 16/21] Move `webpackFinal` so custom webpack config could
 still edit things :-/

---
 lib/core/src/server/config.js                 |  5 +---
 .../src/server/core-preset-webpack-custom.js  | 23 +++++++++++++++----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/lib/core/src/server/config.js b/lib/core/src/server/config.js
index 05f6fb563168..83ac5604ad19 100644
--- a/lib/core/src/server/config.js
+++ b/lib/core/src/server/config.js
@@ -7,7 +7,6 @@ function wrapCorePresets(presets) {
   return {
     babel: async (config, args) => presets.apply('babel', config, args),
     webpack: async (config, args) => presets.apply('webpack', config, args),
-    webpackFinal: async (config, args) => presets.apply('webpackFinal', config, args),
     preview: async (config, args) => presets.apply('preview', config, args),
     manager: async (config, args) => presets.apply('manager', config, args),
   };
@@ -35,9 +34,7 @@ async function getWebpackConfig(options, presets) {
     manager: await presets.manager([], options),
   };
 
-  const webpackConfig = await presets.webpack({}, { ...options, babelOptions, entries });
-
-  return presets.webpackFinal(webpackConfig, options);
+  return presets.webpack({}, { ...options, babelOptions, entries });
 }
 
 export default async options => {
diff --git a/lib/core/src/server/core-preset-webpack-custom.js b/lib/core/src/server/core-preset-webpack-custom.js
index 5c14ec084cf3..22458e39ca54 100644
--- a/lib/core/src/server/core-preset-webpack-custom.js
+++ b/lib/core/src/server/core-preset-webpack-custom.js
@@ -12,8 +12,22 @@ function informAboutCustomConfig(defaultConfigName) {
   logger.info(`=> Using default webpack setup based on "${defaultConfigName}".`);
 }
 
-export function webpack(config, { configDir, configType, defaultConfigName }) {
+function wrapPresets(presets) {
+  return {
+    webpackFinal: async (config, args) => presets.apply('webpackFinal', config, args),
+  };
+}
+
+async function createFinalDefaultConfig(presets, config, options) {
   const defaultConfig = createDefaultWebpackConfig(config);
+  return presets.webpackFinal(defaultConfig, options);
+}
+
+export async function webpack(config, options) {
+  const { configDir, configType, defaultConfigName } = options;
+  const presets = wrapPresets(options.presets);
+
+  const finalConfig = await presets.webpackFinal(config, options);
 
   // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.
@@ -21,15 +35,16 @@ export function webpack(config, { configDir, configType, defaultConfigName }) {
 
   if (customConfig === null) {
     informAboutCustomConfig(defaultConfigName);
-    return defaultConfig;
+    return createFinalDefaultConfig(presets, config, options);
   }
 
   if (typeof customConfig === 'function') {
     logger.info('=> Loading custom webpack config (full-control mode).');
-    return customConfig(config, configType, defaultConfig);
+    const finalDefaultConfig = await createFinalDefaultConfig(presets, config, options);
+    return customConfig(finalConfig, configType, finalDefaultConfig);
   }
 
   logger.info('=> Loading custom webpack config (extending mode).');
 
-  return mergeConfigs(config, customConfig);
+  return mergeConfigs(finalConfig, customConfig);
 }

From cf34baa5cff4139c75cb890f5e73af56972f6a16 Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Fri, 19 Oct 2018 10:14:14 -0700
Subject: [PATCH 17/21] Extract getCraWebpackConfig

---
 app/react/src/server/cra_config.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/react/src/server/cra_config.js b/app/react/src/server/cra_config.js
index 60c51cc78c0b..134f7af73cee 100644
--- a/app/react/src/server/cra_config.js
+++ b/app/react/src/server/cra_config.js
@@ -41,6 +41,16 @@ export function getStyleRules(rules) {
   }, []);
 }
 
+export function getCraWebpackConfig(mode) {
+  if (mode === 'production') {
+    // eslint-disable-next-line global-require, import/no-extraneous-dependencies
+    return require('react-scripts/config/webpack.config.prod');
+  }
+
+  // eslint-disable-next-line global-require, import/no-extraneous-dependencies
+  return require('react-scripts/config/webpack.config.dev');
+}
+
 export function applyCRAWebpackConfig(baseConfig) {
   // Remove style rules from baseConfig
   const baseRulesExcludingStyles = baseConfig.module.rules.filter(
@@ -48,14 +58,7 @@ export function applyCRAWebpackConfig(baseConfig) {
   );
 
   //  Load create-react-app config
-  let craWebpackConfig;
-  if (baseConfig.mode === 'production') {
-    // eslint-disable-next-line global-require, import/no-extraneous-dependencies
-    craWebpackConfig = require('react-scripts/config/webpack.config.prod');
-  } else {
-    // eslint-disable-next-line global-require, import/no-extraneous-dependencies
-    craWebpackConfig = require('react-scripts/config/webpack.config.dev');
-  }
+  const craWebpackConfig = getCraWebpackConfig(baseConfig.mode);
 
   //  Concat will ensure rules is an array
   const craStyleRules = getStyleRules([].concat(craWebpackConfig.module.rules));

From 6297d48b88e1ec1f2b8783dbce0b2b75f7cf3302 Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Fri, 19 Oct 2018 11:05:21 -0700
Subject: [PATCH 18/21] Add webpack as dependency to app/react

---
 app/react/package.json             | 3 ++-
 app/react/src/server/cra_config.js | 4 +---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/react/package.json b/app/react/package.json
index b9f91178b316..e58239f6b1f6 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -40,7 +40,8 @@
     "lodash": "^4.17.11",
     "prop-types": "^15.6.2",
     "react-dev-utils": "^6.0.5",
-    "semver": "^5.6.0"
+    "semver": "^5.6.0",
+    "webpack": "^4.21.0"
   },
   "peerDependencies": {
     "babel-loader": "^7.0.0 || ^8.0.0",
diff --git a/app/react/src/server/cra_config.js b/app/react/src/server/cra_config.js
index 134f7af73cee..d0dd404d2b04 100644
--- a/app/react/src/server/cra_config.js
+++ b/app/react/src/server/cra_config.js
@@ -1,7 +1,7 @@
 import semver from 'semver';
+import { normalizeCondition } from 'webpack/lib/RuleSet';
 
 let MiniCssExtractPlugin;
-let normalizeCondition;
 
 export function isReactScriptsInstalled() {
   try {
@@ -9,8 +9,6 @@ export function isReactScriptsInstalled() {
     const reactScriptsJson = require('react-scripts/package.json');
     if (semver.lt(reactScriptsJson.version, '2.0.0')) return false;
 
-    // eslint-disable-next-line global-require, import/no-extraneous-dependencies, prefer-destructuring
-    normalizeCondition = require('webpack/lib/RuleSet').normalizeCondition;
     // eslint-disable-next-line global-require, import/no-extraneous-dependencies
     MiniCssExtractPlugin = require('mini-css-extract-plugin');
     return true;

From 5f00d843eeddb48a994cf8f5838979ec692763d6 Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Sun, 21 Oct 2018 15:41:36 -0700
Subject: [PATCH 19/21] Remove module state for imports

---
 app/react/src/server/cra_config.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/app/react/src/server/cra_config.js b/app/react/src/server/cra_config.js
index d0dd404d2b04..77c74b5cf559 100644
--- a/app/react/src/server/cra_config.js
+++ b/app/react/src/server/cra_config.js
@@ -1,16 +1,11 @@
 import semver from 'semver';
 import { normalizeCondition } from 'webpack/lib/RuleSet';
 
-let MiniCssExtractPlugin;
-
 export function isReactScriptsInstalled() {
   try {
     // eslint-disable-next-line global-require, import/no-extraneous-dependencies
     const reactScriptsJson = require('react-scripts/package.json');
     if (semver.lt(reactScriptsJson.version, '2.0.0')) return false;
-
-    // eslint-disable-next-line global-require, import/no-extraneous-dependencies
-    MiniCssExtractPlugin = require('mini-css-extract-plugin');
     return true;
   } catch (e) {
     return false;
@@ -63,7 +58,9 @@ export function applyCRAWebpackConfig(baseConfig) {
 
   //  Add css minification for production
   const plugins = [...baseConfig.plugins];
-  if (baseConfig.mode === 'production')
+  if (baseConfig.mode === 'production') {
+    // eslint-disable-next-line global-require, import/no-extraneous-dependencies
+    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
     plugins.push(
       new MiniCssExtractPlugin({
         // Options similar to the same options in webpackOptions.output
@@ -72,6 +69,7 @@ export function applyCRAWebpackConfig(baseConfig) {
         chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
       })
     );
+  }
 
   return {
     ...baseConfig,

From e2cf993e4b089fe631b3c042deb8cd31c2a9ff5a Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Sun, 21 Oct 2018 15:52:57 -0700
Subject: [PATCH 20/21] Describe getStyleRules better

---
 app/react/src/server/cra_config.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/react/src/server/cra_config.js b/app/react/src/server/cra_config.js
index 77c74b5cf559..e39130111663 100644
--- a/app/react/src/server/cra_config.js
+++ b/app/react/src/server/cra_config.js
@@ -17,15 +17,19 @@ export function getStyleRules(rules) {
   const extensions = ['.css', '.scss', '.sass', '.module.css', '.module.scss', '.module.sass'];
 
   return rules.reduce((styleRules, rule) => {
+    // If at least one style extension satisfies the rule test, the rule is one
+    // we want to extract
     if (rule.test && extensions.some(normalizeCondition(rule.test))) {
       // If the base test is for styles, return early
       return styleRules.concat(rule);
     }
 
+    //  Get any style rules contained in rule.oneOf
     if (!rule.test && rule.oneOf) {
       styleRules.push(...getStyleRules(rule.oneOf));
     }
 
+    // Get any style rules contained in rule.rules
     if (!rule.test && rule.rules) {
       styleRules.push(...getStyleRules(rule.rules));
     }

From f42fb81ebc8ee206da80c6ab62c5a8eaf12280c7 Mon Sep 17 00:00:00 2001
From: Chad Fawcett <me@chadf.ca>
Date: Sun, 21 Oct 2018 16:06:14 -0700
Subject: [PATCH 21/21] Remove unnecessary concat

---
 app/react/src/server/cra_config.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/react/src/server/cra_config.js b/app/react/src/server/cra_config.js
index e39130111663..07a38175cccf 100644
--- a/app/react/src/server/cra_config.js
+++ b/app/react/src/server/cra_config.js
@@ -49,7 +49,7 @@ export function getCraWebpackConfig(mode) {
 }
 
 export function applyCRAWebpackConfig(baseConfig) {
-  // Remove style rules from baseConfig
+  // Remove any rules from baseConfig that test true for any one of the extensions
   const baseRulesExcludingStyles = baseConfig.module.rules.filter(
     rule => !rule.test || !['.css', '.scss', '.sass'].some(normalizeCondition(rule.test))
   );
@@ -57,8 +57,7 @@ export function applyCRAWebpackConfig(baseConfig) {
   //  Load create-react-app config
   const craWebpackConfig = getCraWebpackConfig(baseConfig.mode);
 
-  //  Concat will ensure rules is an array
-  const craStyleRules = getStyleRules([].concat(craWebpackConfig.module.rules));
+  const craStyleRules = getStyleRules(craWebpackConfig.module.rules);
 
   //  Add css minification for production
   const plugins = [...baseConfig.plugins];