Stylus integration and usage!

README.md

@@ -61,6 +61,7 @@ You will need to roll out your own deployment script for a server, but before yo
 | [Socket.io]() | Used for realtime communication between clients and server | 1.4.4 |
 | [Webpack](https://webpack.github.io/) | Module bundling + build for client | 1.12.11 |
 | [Superagent](https://github.com/visionmedia/superagent) | Universal http requests | 1.6.1 |
+| [Stylus](http://stylus-lang.com/) | Expressive, dynamic, robust CSS | 0.53.0 |
 
 
 

client/app.js

@@ -12,8 +12,8 @@ import * as actions from '../universal/actions/PulseActions';
 import Root from '../universal/containers/root';
 
 import '../style/pure.css';
-import '../style/main.css';
-import '../style/spinner.css';
+import '../style/main.styl';
+import '../style/spinner.styl';
 
 
 ReactDOM.render(

package.json

@@ -28,6 +28,7 @@
     "express": "4.13.3",
     "history": "1.13.0",
     "moment": "2.11.1",
+    "nib": "^1.1.0",
     "node-uuid": "1.4.7",
     "react": "0.14.7",
     "react-dom": "0.14.7",
@@ -84,6 +85,8 @@
     "redux-devtools-log-monitor": "^1.0.2",
     "redux-mock-store": "0.0.6",
     "style-loader": "0.13.0",
+    "stylus": "^0.53.0",
+    "stylus-loader": "^1.5.1",
     "webpack": "1.12.11",
     "webpack-dev-server": "1.14.1"
   }

server.webpack.js

@@ -15,7 +15,7 @@ new WebpackDevServer(webpack(webpackConfig), {
   headers: { 'Access-Control-Allow-Origin': '*' },
   historyApiFallback: true,
   hot: true,
-  noInfo: true,
+  noInfo: false,
   publicPath: webpackConfig.output.publicPath,
   proxy: {
     '*': 'http://' + host + ':' + appPort

server/app.js

@@ -6,6 +6,9 @@ import { RouterContext, match } from 'react-router';
 import * as eventService from './api/service/event';
 import configureStore from '../universal/store';
 import routes from '../universal/routes';
+import DevTools from '../universal/containers/devTools';
+
+const isDev = (process.env.NODE_ENV !== 'production');
 
 export function handleRender(req, res) {
   eventService.getEvents()
@@ -28,13 +31,16 @@ export function handleRender(req, res) {
         return;
       }
 
+      const devTools = (isDev) ? <DevTools /> : null;
+
       // Render the component to a string
       const html = ReactDOMServer.renderToString(
-        <div>
-          <Provider store={store}>
+        <Provider store={store}>
+          <div>
             <RouterContext {...renderProps} />
-          </Provider>
-        </div>
+            {devTools}
+          </div>
+        </Provider>
       );
 
       // Send the rendered page back to the client with the initial state