FIX postcss options missing in default webpack config && UPDATE dependencies

app/react/package.json

@@ -25,48 +25,49 @@
     "@storybook/channel-postmessage": "^3.0.0-alpha.0",
     "@storybook/ui": "^3.0.0-alpha.0",
     "airbnb-js-shims": "^1.1.1",
-    "autoprefixer": "^7.0.1",
+    "autoprefixer": "^7.1.1",
     "babel-core": "^6.24.1",
     "babel-loader": "^7.0.0",
     "babel-plugin-react-docgen": "^1.4.2",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-es2016": "^6.24.1",
     "babel-preset-react": "^6.24.1",
-    "babel-preset-react-app": "^2.2.0",
+    "babel-preset-react-app": "^3.0.0",
     "babel-preset-stage-0": "^6.24.1",
     "babel-runtime": "^6.23.0",
     "case-sensitive-paths-webpack-plugin": "^2.0.0",
     "chalk": "^1.1.3",
     "commander": "^2.9.0",
     "common-tags": "^1.4.0",
-    "configstore": "^3.0.0",
-    "css-loader": "^0.28.0",
-    "express": "^4.15.2",
+    "configstore": "^3.1.0",
+    "css-loader": "^0.28.1",
+    "express": "^4.15.3",
     "file-loader": "^0.11.1",
-    "find-cache-dir": "^0.1.1",
+    "find-cache-dir": "^1.0.0",
     "json-loader": "^0.5.4",
     "json-stringify-safe": "^5.0.1",
     "json5": "^0.5.1",
     "lodash.pick": "^4.4.0",
-    "postcss-loader": "^2.0.3",
-    "prop-types": "^15.5.8",
+    "postcss-flexbugs-fixes": "^3.0.0",
+    "postcss-loader": "^2.0.5",
+    "prop-types": "^15.5.10",
     "qs": "^6.4.0",
-    "react-modal": "^1.7.6",
+    "react-modal": "^1.7.7",
     "redux": "^3.6.0",
     "request": "^2.81.0",
-    "serve-favicon": "^2.4.2",
+    "serve-favicon": "^2.4.3",
     "shelljs": "^0.7.7",
     "style-loader": "^0.17.0",
     "url-loader": "^0.5.8",
     "util-deprecate": "^1.0.2",
     "uuid": "^3.0.1",
-    "webpack": "^2.4.1",
-    "webpack-dev-middleware": "^1.10.1",
+    "webpack": "^2.5.1",
+    "webpack-dev-middleware": "^1.10.2",
     "webpack-hot-middleware": "^2.18.0"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
-    "mock-fs": "^4.2.0",
+    "mock-fs": "^4.3.0",
     "nodemon": "^1.11.0",
     "react": "^15.5.4",
     "react-dom": "^15.5.4"

app/react/src/server/config/defaults/webpack.config.js

@@ -9,23 +9,29 @@ module.exports = storybookBaseConfig => {
   newConfig.module.rules = [
     ...storybookBaseConfig.module.rules,
     {
-      test: /\.css?$/,
-      include: includePaths,
-      exclude: excludePaths,
+      test: /\.css$/,
       use: [
-        'style-loader',
+        require.resolve('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'],
+                browsers: [
+                  '>1%',
+                  'last 4 versions',
+                  'Firefox ESR',
+                  'not ie < 9', // React doesn't support IE8 anyway
+                ],
+                flexbox: 'no-2009',
               }),
             ],
           },

app/react/src/server/config/webpack.config.js

@@ -7,7 +7,7 @@ import babelLoaderConfig from './babel';
 
 export default function() {
   const config = {
-    // devtool: 'source-map',
+    devtool: 'cheap-module-source-map',
     entry: {
       manager: [require.resolve('./polyfills'), require.resolve('../../client/manager')],
       preview: [
@@ -46,6 +46,9 @@ export default function() {
       // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
       modules: ['node_modules'].concat(nodePaths),
     },
+    performance: {
+      hints: false,
+    },
   };
 
   return config;

examples/cra-storybook/package.json

@@ -3,10 +3,10 @@
   "version": "1.0.0",
   "private": true,
   "devDependencies": {
-    "@storybook/react": "*",
-    "@storybook/addons": "*",
-    "@storybook/addon-actions": "*",
-    "@storybook/addon-links": "*",
+    "@storybook/react": "3.0.0-alpha.1",
+    "@storybook/addons": "3.0.0-alpha.0",
+    "@storybook/addon-actions": "3.0.0-alpha.1",
+    "@storybook/addon-links": "3.0.0-alpha.1",
     "react-scripts": "1.0.1"
   },
   "dependencies": {

examples/cra-storybook/src/App.css

@@ -1,3 +1,5 @@
+@import "./base.css";
+
 .App {
   text-align: center;
 }

examples/cra-storybook/src/base.css

@@ -0,0 +1,5 @@
+:root {
+  background: rgba(232,232,232,1);
+  background: radial-gradient(ellipse at center, rgba(255,255,255,1) 11%,rgba(232,232,232,1) 100%);
+  height: 100%;
+}

examples/cra-storybook/src/stories/index.js

@@ -6,9 +6,14 @@ import { linkTo } from '@storybook/addon-links';
 
 import Button from './Button';
 import Welcome from './Welcome';
+import App from '../App';
 
 storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
 
 storiesOf('Button', module)
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
   .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);
+
+storiesOf('App', module)
+  .add('with text', () => <App />)
+  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);