adds basic CSS support to the project along with CSS normalisation po…

…wered

by the 'normalize.css' module. fixes mui#4

package.json

@@ -47,18 +47,23 @@
     "babel-preset-es2015-webpack": "6.4.1",
     "babel-preset-react": "6.11.1",
     "chokidar": "1.6.0",
+    "css-loader": "0.23.1",
     "dotenv": "2.0.0",
     "eslint": "2.13.1",
     "eslint-config-airbnb": "9.0.1",
     "eslint-loader": "1.3.0",
     "eslint-plugin-import": "1.9.2",
     "eslint-plugin-jsx-a11y": "1.5.3",
     "eslint-plugin-react": "5.2.2",
+    "extract-text-webpack-plugin": "1.0.1",
+    "fake-style-loader": "1.0.1",
     "json-loader": "0.5.4",
     "node-notifier": "4.6.0",
+    "normalize.css": "4.2.0",
     "path": "0.12.7",
     "react-hot-loader": "3.0.0-beta.2",
     "rimraf": "2.5.2",
+    "style-loader": "0.13.1",
     "webpack": "2.1.0-beta.13",
     "webpack-dev-middleware": "1.6.1",
     "webpack-hot-middleware": "2.11.0",

src/shared/components/App/App.js

@@ -1,9 +1,12 @@
+import 'normalize.css/normalize.css';
+import './globals.css';
+
 import React, { PropTypes } from 'react';
 import { Link } from 'react-router';
 
 function App({ children }) {
   return (
-    <div>
+    <div style={{ padding: '10px' }}>
       <div style={{ textAlign: 'center' }}>
         <h1>React, Universally</h1>
         <strong>A mildly opinionated ultra low dependency universal react boilerplate.</strong>

src/shared/components/App/globals.css

@@ -0,0 +1,12 @@
+html {
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}

webpackConfigFactory.js

@@ -4,6 +4,7 @@ const path = require('path');
 const webpack = require('webpack');
 const AssetsPlugin = require('assets-webpack-plugin');
 const nodeExternals = require('webpack-node-externals');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 // @see https://github.com/motdotla/dotenv
 const dotenv = require('dotenv');
@@ -79,7 +80,14 @@ function webpackConfigFactory({ target, mode }) {
       // prefering them to be resolved via native node module system.  Therefore
       // we use the `webpack-node-externals` library to help us generate an
       // externals config that will ignore all node_modules.
-      ifServer(nodeExternals()),
+      ifServer(nodeExternals({
+        // Ok, this is slightly hacky. We don't want normalize.css to be set as
+        // an external, which would essentially make it ignored by our webpack
+        // bundle process.  We want 'normalize.css' to be processed by our css
+        // loader configuration.  Therefore we lie to the 'webpack-node-externals'
+        // and say it's a binary which will make this library ignore the entry.
+        binaryDirs: ['normalize.css'],
+      })),
     ]),
     devtool: ifElse(isServer || isDev)(
       // We want to be able to get nice stack traces when running our server
@@ -230,6 +238,12 @@ function webpackConfigFactory({ target, mode }) {
         // occur.
         new webpack.optimize.DedupePlugin()
       ),
+
+      ifProdClient(
+        // This is a production client so we will extract our CSS into
+        // CSS files.
+        new ExtractTextPlugin('[name]-[chunkhash].css', { allChunks: true })
+      ),
     ]),
     module: {
       loaders: [
@@ -270,6 +284,34 @@ function webpackConfigFactory({ target, mode }) {
           test: /\.json$/,
           loader: 'json-loader',
         },
+
+        // CSS
+        merge(
+          { test: /\.css$/ },
+          // When targetting the server we fake out the style loader as the
+          // server can't handle the styles and doesn't care about them either..
+          ifServer({
+            loaders: [
+              'fake-style-loader',
+              'css-loader',
+            ],
+          }),
+          // For a production client build we use the ExtractTextPlugin which
+          // will extract our CSS into CSS files.  The plugin needs to be
+          // registered within the plugins section too.
+          ifProdClient({
+            loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
+          }),
+          // For a development client we will use a straight style & css loader
+          // along with source maps.  This combo gives us a better development
+          // experience.
+          ifDevClient({
+            loaders: [
+              'style-loader',
+              { loader: 'css-loader', query: { sourceMap: true } },
+            ],
+          })
+        ),
       ],
     },
   };