commit f0c7a575829aa6c6fd4d8b5f7aa7e8a6918ac856 parent 653e282eb38041f75cd9b7453604a5e5793de8a8 Author: Konstantin Tarkus <hello@tarkus.me> Date: Wed, 18 Nov 2015 22:32:11 +0300 Replace cssnext with precss: Sass-like markup in CSS Diffstat:
36 files changed, 422 insertions(+), 438 deletions(-)
diff --git a/package.json b/package.json @@ -47,10 +47,9 @@ "mkdirp": "^0.5.1", "ncp": "^2.0.0", "postcss": "^5.0.10", - "postcss-cssnext": "^2.2.0", "postcss-import": "^7.1.3", "postcss-loader": "^0.8.0", - "postcss-nested": "^1.0.0", + "precss": "^1.3.0", "react-transform-catch-errors": "^1.0.0", "react-transform-hmr": "^1.0.1", "redbox-react": "^1.1.1", diff --git a/src/components/App/App.css b/src/components/App/App.css @@ -1,168 +0,0 @@ -@import '../../../node_modules/normalize.css/normalize.css'; - -/*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -@import '../variables.css'; - -/* - * Base styles - * ========================================================================== */ - -html { - color: #222; - font-weight: 100; - font-size: 1em; /* ~16px; */ - font-family: var(--font-family-base); - line-height: 1.375; /* ~22px */ -} - -/* - * Remove text-shadow in selection highlight: - * https://twitter.com/miketaylr/status/12228805301 - * - * These selection rule sets have to be separate. - * Customize the background color to match your design. - */ - -::-moz-selection { - background: #b3d4fc; - text-shadow: none; -} - -::selection { - background: #b3d4fc; - text-shadow: none; -} - -/* - * A better looking default horizontal rule - */ - -hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 1em 0; - padding: 0; -} - -/* - * Remove the gap between audio, canvas, iframes, - * images, videos and the bottom of their containers: - * https://github.com/h5bp/html5-boilerplate/issues/440 - */ - -audio, -canvas, -iframe, -img, -svg, -video { - vertical-align: middle; -} - -/* - * Remove default fieldset styles. - */ - -fieldset { - border: 0; - margin: 0; - padding: 0; -} - -/* - * Allow only vertical resizing of textareas. - */ - -textarea { - resize: vertical; -} - -/* - * Browser upgrade prompt - * ========================================================================== */ - -.browserupgrade { - margin: 0.2em 0; - background: #ccc; - color: #000; - padding: 0.2em 0; -} - -/* - * Print styles - * Inlined to avoid the additional HTTP request: - * http://www.phpied.com/delay-loading-your-print-css/ - * ========================================================================== */ - -@media print { - *, - *:before, - *:after { - background: transparent !important; - color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ - box-shadow: none !important; - text-shadow: none !important; - } - - a, - a:visited { - text-decoration: underline; - } - - a[href]:after { - content: " (" attr(href) ")"; - } - - abbr[title]:after { - content: " (" attr(title) ")"; - } - - /* - * Don't show links that are fragment identifiers, - * or use the `javascript:` pseudo protocol - */ - - a[href^="#"]:after, - a[href^="javascript:"]:after { - content: ""; - } - - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - - /* - * Printing Tables: - * http://css-discuss.incutio.com/wiki/Printing_Tables - */ - - thead { - display: table-header-group; - } - - tr, - img { - page-break-inside: avoid; - } - - img { - max-width: 100% !important; - } - - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - - h2, - h3 { - page-break-after: avoid; - } -} diff --git a/src/components/App/App.js b/src/components/App/App.js @@ -1,7 +1,7 @@ /*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ import React, { PropTypes, Component } from 'react'; -import styles from './App.css'; +import styles from './App.scss'; import withContext from '../../decorators/withContext'; import withStyles from '../../decorators/withStyles'; import Header from '../Header'; diff --git a/src/components/App/App.scss b/src/components/App/App.scss @@ -0,0 +1,168 @@ +@import '../../../node_modules/normalize.css/normalize.css'; + +/*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +@import '../variables.scss'; + +/* + * Base styles + * ========================================================================== */ + +html { + color: #222; + font-weight: 100; + font-size: 1em; /* ~16px; */ + font-family: $font-family-base; + line-height: 1.375; /* ~22px */ +} + +/* + * Remove text-shadow in selection highlight: + * https://twitter.com/miketaylr/status/12228805301 + * + * These selection rule sets have to be separate. + * Customize the background color to match your design. + */ + +::-moz-selection { + background: #b3d4fc; + text-shadow: none; +} + +::selection { + background: #b3d4fc; + text-shadow: none; +} + +/* + * A better looking default horizontal rule + */ + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +/* + * Remove the gap between audio, canvas, iframes, + * images, videos and the bottom of their containers: + * https://github.com/h5bp/html5-boilerplate/issues/440 + */ + +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: middle; +} + +/* + * Remove default fieldset styles. + */ + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +/* + * Allow only vertical resizing of textareas. + */ + +textarea { + resize: vertical; +} + +/* + * Browser upgrade prompt + * ========================================================================== */ + +.browserupgrade { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + +/* + * Print styles + * Inlined to avoid the additional HTTP request: + * http://www.phpied.com/delay-loading-your-print-css/ + * ========================================================================== */ + +@media print { + *, + *:before, + *:after { + background: transparent !important; + color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ + box-shadow: none !important; + text-shadow: none !important; + } + + a, + a:visited { + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + /* + * Don't show links that are fragment identifiers, + * or use the `javascript:` pseudo protocol + */ + + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; + } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + /* + * Printing Tables: + * http://css-discuss.incutio.com/wiki/Printing_Tables + */ + + thead { + display: table-header-group; + } + + tr, + img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } +} diff --git a/src/components/ContactPage/ContactPage.css b/src/components/ContactPage/ContactPage.css @@ -1,9 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -@import '../variables.css'; - -.ContactPage-container { - margin: 0 auto; - padding: 0 0 40px; - max-width: var(--max-content-width); -} diff --git a/src/components/ContactPage/ContactPage.js b/src/components/ContactPage/ContactPage.js @@ -1,7 +1,7 @@ /*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ import React, { PropTypes, Component } from 'react'; -import styles from './ContactPage.css'; +import styles from './ContactPage.scss'; import withStyles from '../../decorators/withStyles'; @withStyles(styles) diff --git a/src/components/ContactPage/ContactPage.scss b/src/components/ContactPage/ContactPage.scss @@ -0,0 +1,9 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +@import '../variables.scss'; + +.ContactPage-container { + margin: 0 auto; + padding: 0 0 40px; + max-width: $max-content-width; +} diff --git a/src/components/ContentPage/ContentPage.css b/src/components/ContentPage/ContentPage.css @@ -1,9 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -@import '../variables.css'; - -.ContentPage-container { - margin: 0 auto; - padding: 0 0 40px; - max-width: var(--max-content-width); -} diff --git a/src/components/ContentPage/ContentPage.js b/src/components/ContentPage/ContentPage.js @@ -1,7 +1,7 @@ /*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ import React, { PropTypes, Component } from 'react'; -import styles from './ContentPage.css'; +import styles from './ContentPage.scss'; import withStyles from '../../decorators/withStyles'; @withStyles(styles) diff --git a/src/components/ContentPage/ContentPage.scss b/src/components/ContentPage/ContentPage.scss @@ -0,0 +1,9 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +@import '../variables.scss'; + +.ContentPage-container { + margin: 0 auto; + padding: 0 0 40px; + max-width: $max-content-width; +} diff --git a/src/components/ErrorPage/ErrorPage.js b/src/components/ErrorPage/ErrorPage.js @@ -2,7 +2,7 @@ import React, { PropTypes, Component } from 'react'; import withStyles from '../../decorators/withStyles'; -import styles from './ErrorPage.css'; +import styles from './ErrorPage.scss'; @withStyles(styles) class ErrorPage extends Component { diff --git a/src/components/ErrorPage/ErrorPage.css b/src/components/ErrorPage/ErrorPage.scss diff --git a/src/components/Feedback/Feedback.css b/src/components/Feedback/Feedback.css @@ -1,33 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -@import '../variables.css'; - -.Feedback { - background: #f5f5f5; - color: #333; -} - -.Feedback-container { - margin: 0 auto; - padding: 20px 8px; - max-width: var(--max-content-width); - text-align: center; - font-size: 1.5em; /* ~24px */ -} - -.Feedback-link, -.Feedback-link:active, -.Feedback-link:hover, -.Feedback-link:visited { - color: #333; - text-decoration: none; -} - -.Feedback-link:hover { - text-decoration: underline; -} - -.Feedback-spacer { - padding-right: 15px; - padding-left: 15px; -} diff --git a/src/components/Feedback/Feedback.js b/src/components/Feedback/Feedback.js @@ -1,7 +1,7 @@ /*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ import React, { Component } from 'react'; -import styles from './Feedback.css'; +import styles from './Feedback.scss'; import withStyles from '../../decorators/withStyles'; @withStyles(styles) diff --git a/src/components/Feedback/Feedback.scss b/src/components/Feedback/Feedback.scss @@ -0,0 +1,33 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +@import '../variables.scss'; + +.Feedback { + background: #f5f5f5; + color: #333; +} + +.Feedback-container { + margin: 0 auto; + padding: 20px 8px; + max-width: $max-content-width; + text-align: center; + font-size: 1.5em; /* ~24px */ +} + +.Feedback-link, +.Feedback-link:active, +.Feedback-link:hover, +.Feedback-link:visited { + color: #333; + text-decoration: none; +} + +.Feedback-link:hover { + text-decoration: underline; +} + +.Feedback-spacer { + padding-right: 15px; + padding-left: 15px; +} diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css @@ -1,44 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -@import '../variables.css'; - -.Footer { - background: #333; - color: #fff; -} - -.Footer-container { - margin: 0 auto; - padding: 20px 15px; - max-width: var(--max-content-width); - text-align: center; -} - -.Footer-text { - color: rgba(255, 255, 255, .5); -} - -.Footer-text--muted { - color: rgba(255, 255, 255, .3); -} - -.Footer-spacer { - color: rgba(255, 255, 255, .3); -} - -.Footer-text, -.Footer-link { - padding: 2px 5px; - font-size: 1em; -} - -.Footer-link, -.Footer-link:active, -.Footer-link:visited { - color: rgba(255, 255, 255, .6); - text-decoration: none; -} - -.Footer-link:hover { - color: rgba(255, 255, 255, 1); -} diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js @@ -1,7 +1,7 @@ /*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ import React, { PropTypes, Component } from 'react'; -import styles from './Footer.css'; +import styles from './Footer.scss'; import withViewport from '../../decorators/withViewport'; import withStyles from '../../decorators/withStyles'; import Link from '../Link'; diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss @@ -0,0 +1,44 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +@import '../variables.scss'; + +.Footer { + background: #333; + color: #fff; +} + +.Footer-container { + margin: 0 auto; + padding: 20px 15px; + max-width: $max-content-width; + text-align: center; +} + +.Footer-text { + color: rgba(255, 255, 255, .5); +} + +.Footer-text--muted { + color: rgba(255, 255, 255, .3); +} + +.Footer-spacer { + color: rgba(255, 255, 255, .3); +} + +.Footer-text, +.Footer-link { + padding: 2px 5px; + font-size: 1em; +} + +.Footer-link, +.Footer-link:active, +.Footer-link:visited { + color: rgba(255, 255, 255, .6); + text-decoration: none; +} + +.Footer-link:hover { + color: rgba(255, 255, 255, 1); +} diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css @@ -1,52 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -@import '../variables.css'; - -:root { - --brand-color: #61dafb; -} - -.Header { - background: #373277; - color: #fff; -} - -.Header-container { - margin: 0 auto; - padding: 20px 0; - max-width: var(--max-content-width); -} - -.Header-brand { - color: color(var(--brand-color) lightness(+10%)); - text-decoration: none; - font-size: 1.75em; /* ~28px */ -} - -.Header-brandTxt { - margin-left: 10px; -} - -.Header-nav { - float: right; - margin-top: 6px; -} - -.Header-banner { - text-align: center; -} - -.Header-bannerTitle { - margin: 0; - padding: 10px; - font-weight: normal; - font-size: 4em; - line-height: 1em; -} - -.Header-bannerDesc { - padding: 0; - color: rgba(255, 255, 255, .5); - font-size: 1.25em; - margin: 0; -} diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js @@ -1,7 +1,7 @@ /*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ import React, { Component } from 'react'; -import styles from './Header.css'; +import styles from './Header.scss'; import withStyles from '../../decorators/withStyles'; import Link from '../Link'; import Navigation from '../Navigation'; diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss @@ -0,0 +1,50 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +@import '../variables.scss'; + +$brand-color: #61dafb; + +.Header { + background: #373277; + color: #fff; +} + +.Header-container { + margin: 0 auto; + padding: 20px 0; + max-width: $max-content-width; +} + +.Header-brand { + color: color($brand-color lightness(+10%)); + text-decoration: none; + font-size: 1.75em; /* ~28px */ +} + +.Header-brandTxt { + margin-left: 10px; +} + +.Header-nav { + float: right; + margin-top: 6px; +} + +.Header-banner { + text-align: center; +} + +.Header-bannerTitle { + margin: 0; + padding: 10px; + font-weight: normal; + font-size: 4em; + line-height: 1em; +} + +.Header-bannerDesc { + padding: 0; + color: rgba(255, 255, 255, .5); + font-size: 1.25em; + margin: 0; +} diff --git a/src/components/LoginPage/LoginPage.css b/src/components/LoginPage/LoginPage.css @@ -1,9 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -@import '../variables.css'; - -.LoginPage-container { - margin: 0 auto; - padding: 0 0 40px; - max-width: var(--max-content-width); -} diff --git a/src/components/LoginPage/LoginPage.js b/src/components/LoginPage/LoginPage.js @@ -1,7 +1,7 @@ /*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ import React, { PropTypes, Component } from 'react'; -import styles from './LoginPage.css'; +import styles from './LoginPage.scss'; import withStyles from '../../decorators/withStyles'; @withStyles(styles) diff --git a/src/components/LoginPage/LoginPage.scss b/src/components/LoginPage/LoginPage.scss @@ -0,0 +1,9 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +@import '../variables.scss'; + +.LoginPage-container { + margin: 0 auto; + padding: 0 0 40px; + max-width: $max-content-width; +} diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js @@ -2,7 +2,7 @@ import React, { PropTypes, Component } from 'react'; import classNames from 'classnames'; -import styles from './Navigation.css'; +import styles from './Navigation.scss'; import withStyles from '../../decorators/withStyles'; import Link from '../Link'; diff --git a/src/components/Navigation/Navigation.css b/src/components/Navigation/Navigation.scss diff --git a/src/components/NotFoundPage/NotFoundPage.js b/src/components/NotFoundPage/NotFoundPage.js @@ -2,7 +2,7 @@ import React, { PropTypes, Component } from 'react'; import withStyles from '../../decorators/withStyles'; -import styles from './NotFoundPage.css'; +import styles from './NotFoundPage.scss'; @withStyles(styles) class NotFoundPage extends Component { diff --git a/src/components/NotFoundPage/NotFoundPage.css b/src/components/NotFoundPage/NotFoundPage.scss diff --git a/src/components/RegisterPage/RegisterPage.css b/src/components/RegisterPage/RegisterPage.css @@ -1,9 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -@import '../variables.css'; - -.RegisterPage-container { - margin: 0 auto; - padding: 0 0 40px; - max-width: var(--max-content-width); -} diff --git a/src/components/RegisterPage/RegisterPage.js b/src/components/RegisterPage/RegisterPage.js @@ -2,7 +2,7 @@ import React, { PropTypes, Component } from 'react'; import withStyles from '../../decorators/withStyles'; -import styles from './RegisterPage.css'; +import styles from './RegisterPage.scss'; @withStyles(styles) class RegisterPage extends Component { diff --git a/src/components/RegisterPage/RegisterPage.scss b/src/components/RegisterPage/RegisterPage.scss @@ -0,0 +1,9 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +@import '../variables.scss'; + +.RegisterPage-container { + margin: 0 auto; + padding: 0 0 40px; + max-width: $max-content-width; +} diff --git a/src/components/TextBox/TextBox.js b/src/components/TextBox/TextBox.js @@ -2,7 +2,7 @@ import React, { PropTypes, Component } from 'react'; import withStyles from '../../decorators/withStyles'; -import styles from './TextBox.css'; +import styles from './TextBox.scss'; @withStyles(styles) class TextBox extends Component { diff --git a/src/components/TextBox/TextBox.css b/src/components/TextBox/TextBox.scss diff --git a/src/components/variables.css b/src/components/variables.css @@ -1,43 +0,0 @@ -/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ - -:root { - - /* - * Colors - * ======================================================================== */ - - --white-base: hsl(255, 255, 255); - --gray-darker: color(black lightness(+13.5%)); /* #222 */ - --gray-dark: color(black lightness(+25%)); /* #404040 */ - --gray: color(black lightness(+33.5%)); /* #555 */ - --gray-light: color(black lightness(+46.7%)); /* #777 */ - --gray-lighter: color(black lightness(+93.5%)); /* #eee */ - - /* - * Typography - * ======================================================================== */ - - --font-family-base: 'Segoe UI', 'HelveticaNeue-Light', sans-serif; - - /* - * Layout - * ======================================================================== */ - - --max-content-width: 1000px; - - /* - * Media queries breakpoints - * ======================================================================== */ - - --screen-xs-min: 480px; /* Extra small screen / phone */ - --screen-sm-min: 768px; /* Small screen / tablet */ - --screen-md-min: 992px; /* Medium screen / desktop */ - --screen-lg-min: 1200px; /* Large screen / wide desktop */ - - /* - * Animations - * ======================================================================== */ - - --animation-swift-out: .45s cubic-bezier(0.3, 1, 0.4, 1) 0s; - -} diff --git a/src/components/variables.scss b/src/components/variables.scss @@ -0,0 +1,39 @@ +/* React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ + +/* + * Colors + * ========================================================================== */ + +$white-base: hsl(255, 255, 255); +$gray-darker: color(black lightness(+13.5%)); /* #222 */ +$gray-dark: color(black lightness(+25%)); /* #404040 */ +$gray: color(black lightness(+33.5%)); /* #555 */ +$gray-light: color(black lightness(+46.7%)); /* #777 */ +$gray-lighter: color(black lightness(+93.5%)); /* #eee */ + +/* + * Typography + * ========================================================================== */ + +$font-family-base: 'Segoe UI', 'HelveticaNeue-Light', sans-serif; + +/* + * Layout + * ========================================================================== */ + +$max-content-width: 1000px; + +/* + * Media queries breakpoints + * ========================================================================== */ + +$screen-xs-min: 480px; /* Extra small screen / phone */ +$screen-sm-min: 768px; /* Small screen / tablet */ +$screen-md-min: 992px; /* Medium screen / desktop */ +$screen-lg-min: 1200px; /* Large screen / wide desktop */ + +/* + * Animations + * ========================================================================== */ + +$animation-swift-out: .45s cubic-bezier(0.3, 1, 0.4, 1) 0s; diff --git a/tools/webpack.config.js b/tools/webpack.config.js @@ -28,14 +28,6 @@ const GLOBALS = { 'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"', __DEV__: DEBUG, }; -const JS_LOADER = { - test: /\.jsx?$/, - include: [ - path.resolve(__dirname, '../node_modules/react-routing/src'), - path.resolve(__dirname, '../src'), - ], - loader: 'babel-loader', -}; // // Common configuration chunk to be used for both @@ -74,6 +66,13 @@ const config = { module: { loaders: [ { + test: /\.jsx?$/, + include: [ + path.resolve(__dirname, '../node_modules/react-routing/src'), + path.resolve(__dirname, '../src'), + ], + loader: 'babel-loader', + }, { test: /\.json$/, loader: 'json-loader', }, { @@ -85,6 +84,9 @@ const config = { }, { test: /\.(eot|ttf|wav|mp3)$/, loader: 'file-loader', + }, { + test: /\.scss$/, + loader: 'style-loader/useable!css-loader!postcss-loader', }, ], }, @@ -92,8 +94,8 @@ const config = { postcss: function plugins(bundler) { return [ require('postcss-import')({ addDependencyTo: bundler }), - require('postcss-nested')(), - require('postcss-cssnext')({ autoprefixer: AUTOPREFIXER_BROWSERS }), + require('precss')(), + require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }), ]; }, }; @@ -131,37 +133,30 @@ const appConfig = merge({}, config, { new webpack.NoErrorsPlugin(), ] : []), ], - module: { - loaders: [ - WATCH ? { - ...JS_LOADER, - query: { - // Wraps all React components into arbitrary transforms - // https://github.com/gaearon/babel-plugin-react-transform - plugins: ['react-transform'], - extra: { - 'react-transform': { - transforms: [ - { - transform: 'react-transform-hmr', - imports: ['react'], - locals: ['module'], - }, { - transform: 'react-transform-catch-errors', - imports: ['react', 'redbox-react'], - }, - ], - }, +}); + +// Enable React Transform in the "watch" mode +appConfig.module.loaders + .filter(x => WATCH && x.loader === 'babel-loader') + .forEach(x => x.query = { + // Wraps all React components into arbitrary transforms + // https://github.com/gaearon/babel-plugin-react-transform + plugins: ['react-transform'], + extra: { + 'react-transform': { + transforms: [ + { + transform: 'react-transform-hmr', + imports: ['react'], + locals: ['module'], + }, { + transform: 'react-transform-catch-errors', + imports: ['react', 'redbox-react'], }, - }, - } : JS_LOADER, - { - test: /\.css$/, - loader: 'style-loader/useable!css-loader!postcss-loader', + ], }, - ], - }, -}); + }, + }); // // Configuration for the server-side bundle (server.js) @@ -198,15 +193,11 @@ const serverConfig = merge({}, config, { new webpack.BannerPlugin('require("source-map-support").install();', { raw: true, entryOnly: false }), ], - module: { - loaders: [ - JS_LOADER, - { - test: /\.css$/, - loader: 'css-loader!postcss-loader', - }, - ], - }, }); +// Remove `style-loader` from the server-side bundle configuration +serverConfig.module.loaders + .filter(x => x.loader.startsWith('style-loader/useable!')) + .forEach(x => x.loader = x.loader.substr(21)); + export default [appConfig, serverConfig];