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', () => );