diff --git a/app/react/package.json b/app/react/package.json
index 0f8c7c850b6a..da338ddb0b80 100644
--- a/app/react/package.json
+++ b/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"
diff --git a/app/react/src/server/config/defaults/webpack.config.js b/app/react/src/server/config/defaults/webpack.config.js
index 0dd3b719f35a..de590c16f1a9 100644
--- a/app/react/src/server/config/defaults/webpack.config.js
+++ b/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',
}),
],
},
diff --git a/app/react/src/server/config/webpack.config.js b/app/react/src/server/config/webpack.config.js
index 5caed1b869e5..72de95c5e61e 100644
--- a/app/react/src/server/config/webpack.config.js
+++ b/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;
diff --git a/examples/cra-storybook/package.json b/examples/cra-storybook/package.json
index 45617edb3bf8..415abf711964 100644
--- a/examples/cra-storybook/package.json
+++ b/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": {
diff --git a/examples/cra-storybook/src/App.css b/examples/cra-storybook/src/App.css
index 15adfdc710ca..426762e6e5c2 100644
--- a/examples/cra-storybook/src/App.css
+++ b/examples/cra-storybook/src/App.css
@@ -1,3 +1,5 @@
+@import "./base.css";
+
.App {
text-align: center;
}
diff --git a/examples/cra-storybook/src/base.css b/examples/cra-storybook/src/base.css
new file mode 100644
index 000000000000..81681882f2d3
--- /dev/null
+++ b/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%;
+}
diff --git a/examples/cra-storybook/src/stories/index.js b/examples/cra-storybook/src/stories/index.js
index 87e31def937b..1d459693864b 100644
--- a/examples/cra-storybook/src/stories/index.js
+++ b/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', () => );
storiesOf('Button', module)
.add('with text', () => )
.add('with some emoji', () => );
+
+storiesOf('App', module)
+ .add('with text', () => )
+ .add('with some emoji', () => );