improved syntax for including styles

README.md

@@ -101,16 +101,12 @@ if(__CLIENT__) {
 This project uses [local styles](https://medium.com/seek-ui-engineering/the-end-of-global-css-90d2a4a06284) using [css-loader](https://github.com/webpack/css-loader). The way it works is that you import your stylesheet at the top of the class with your React Component, and then you use the classnames returned from that import. Like so:
 
 ```javascript
-const styles = (function getStyle() {
-  if (__CLIENT__) {
-    return require('./App.scss');
-  }
-  const stats = require('../../webpack-stats.json');
-  return stats.css.modules[path.join(__dirname, './App.scss')];
-})();
+const styles = __CLIENT__ ?
+  require('./App.scss') :
+  requireServerCss(require.resolve('./App.scss'));
 ```
 
-That's a little ugly, I know, but what it allows is very powerful.
+Then you set the `className` of your element ot match one of the CSS classes in your SCSS file, and you're good to go!
 
 ```jsx
 <div className={styles.mySection}> ... </div>

src/components/InfoBar.js

@@ -1,17 +1,10 @@
-import path from 'path';
 import React, {Component, PropTypes} from 'react';
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 import * as infoActions from '../actions/infoActions';
-import {relativeToSrc} from '../util';
+import {requireServerCss} from '../util';
 
-const styles = (function getStyle() {
-  if (__CLIENT__) {
-    return require('./InfoBar.scss');
-  }
-  const stats = require('../../webpack-stats.json');
-  return stats.css.modules[relativeToSrc(path.join(__dirname, './InfoBar.scss'))];
-})();
+const styles = __CLIENT__ ? require('./InfoBar.scss') : requireServerCss(require.resolve('./InfoBar.scss'));
 
 class InfoBar extends Component {
   static propTypes = {

src/util.js

@@ -1,38 +1,39 @@
-import path from 'path';
-
-const pathToSrc = path.resolve(__dirname, '.');
+const readStats = () => {
+  // don't cache the `webpack-stats.json` on dev so we read the file on each request.
+  // on production, use simple `require` to cache the file
+  const stats = require('../webpack-stats.json');
+  if (__DEVELOPMENT__) {
+    delete require.cache[require.resolve('../webpack-stats.json')];
+  }
+  return stats;
+}
 
-export function relativeToSrc(value) {
-  return value.slice(pathToSrc.length);
+export function requireServerCss(cssPath) {
+  if (__CLIENT__) {
+    throw new Error('image-resolver called on browser');
+  }
+  return readStats().css.modules[cssPath.slice(__dirname.length)];
 }
 
 export function requireServerImage(imagePath) {
   if (!imagePath) {
     return '';
   }
   if (__CLIENT__) {
-    throw new Error('image-resolver called on browser');
-  } else {
-    // Load images compiled from `webpack-stats`
-    // don't cache the `webpack-stats.json` on dev
-    // so we gonna read the file on each request
-    // on production, use simple `require` to cache the file
-    let images = require('../webpack-stats.json').images;
-    if (__DEVELOPMENT__) {
-      delete require.cache[require.resolve('../webpack-stats.json')];
-    }
-    if (!images) {
-      return '';
-    }
+    throw new Error('server-side only resolver called on client');
+  }
+  const images = readStats().images;
+  if (!images) {
+    return '';
+  }
 
-    // Find the correct image
-    const regex = new RegExp(`${imagePath}$`);
-    const image = images.find(img => regex.test(img.original));
+  // Find the correct image
+  const regex = new RegExp(`${imagePath}$`);
+  const image = images.find(img => regex.test(img.original));
 
-    // Serve image.
-    if (image) return image.compiled;
+  // Serve image.
+  if (image) return image.compiled;
 
-    // Serve a not-found asset maybe?
-    return '';
-  }
+  // Serve a not-found asset maybe?
+  return '';
 }

src/views/App.js

@@ -10,15 +10,9 @@ import * as authActions from '../actions/authActions';
 import {load as loadAuth} from '../actions/authActions';
 import InfoBar from '../components/InfoBar';
 import {createTransitionHook} from '../universalRouter';
-import {relativeToSrc} from '../util';
+import {requireServerCss} from '../util';
 
-const styles = (function getStyle() {
-  if (__CLIENT__) {
-    return require('./App.scss');
-  }
-  const stats = require('../../webpack-stats.json');
-  return stats.css.modules[relativeToSrc(path.resolve(__dirname, './App.scss'))];
-})();
+const styles = __CLIENT__ ? require('./App.scss') : requireServerCss(require.resolve('./App.scss'));
 
 class App extends Component {
   static propTypes = {
@@ -43,6 +37,7 @@ class App extends Component {
 
   render() {
     const {user} = this.props;
+    debugger;
     return (
       <div className={styles.app}>
         <nav className="navbar navbar-default navbar-fixed-top">

src/views/Home.js

@@ -1,16 +1,9 @@
 import React, {Component} from 'react';
-import path from 'path';
 import CounterButton from '../components/CounterButton';
 import GithubButton from '../components/GithubButton';
-import {relativeToSrc, requireServerImage} from '../util';
+import {requireServerCss, requireServerImage} from '../util';
 
-const styles = (function getStyle() {
-  if (__CLIENT__) {
-    return require('./Home.scss');
-  }
-  const stats = require('../../webpack-stats.json');
-  return stats.css.modules[relativeToSrc(path.resolve(__dirname, './Home.scss'))];
-})();
+const styles = __CLIENT__ ? require('./Home.scss') : requireServerCss(require.resolve('./Home.scss'));
 
 // require the logo image both from client and server
 let logoImage = '';

src/views/Login.js

@@ -1,19 +1,12 @@
-import path from 'path';
 import React, {Component, PropTypes} from 'react';
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 import {isLoaded as isAuthLoaded} from '../reducers/auth';
 import * as authActions from '../actions/authActions';
 import {load as loadAuth} from '../actions/authActions';
-import {relativeToSrc} from '../util';
+import {requireServerCss} from '../util';
 
-const styles = (function getStyle() {
-  if (__CLIENT__) {
-    return require('./Login.scss');
-  }
-  const stats = require('../../webpack-stats.json');
-  return stats.css.modules[relativeToSrc(path.join(__dirname, './Login.scss'))];
-})();
+const styles = __CLIENT__ ? require('./Login.scss') : requireServerCss(require.resolve('./Login.scss'));
 
 class Login extends Component {
   static propTypes = {

src/views/Widgets.js

@@ -1,19 +1,12 @@
-import path from 'path';
 import React, {Component, PropTypes} from 'react';
 import {bindActionCreators} from 'redux';
 import {isLoaded} from '../reducers/widgets';
 import {connect} from 'react-redux';
 import * as widgetActions from '../actions/widgetActions';
 import {load as loadWidgets} from '../actions/widgetActions';
-import {relativeToSrc} from '../util';
+import {requireServerCss} from '../util';
 
-const styles = (function getStyle() {
-  if (__CLIENT__) {
-    return require('./Widgets.scss');
-  }
-  const stats = require('../../webpack-stats.json');
-  return stats.css.modules[relativeToSrc(path.join(__dirname, './Widgets.scss'))];
-})();
+const styles = __CLIENT__ ? require('./Widgets.scss') : requireServerCss(require.resolve('./Widgets.scss'));
 
 class Widgets extends Component {
   static propTypes = {

webpack/utils/writeStats.js

@@ -40,16 +40,17 @@ module.exports = function writeStats(stats, env) {
     if (env === 'prod') {
       return /\.scss$/.test(m.name);
     }
-
     return m.name.slice(0, namePrefix.length) === namePrefix;
   }).forEach(function(m) {
     var name = path.resolve(__dirname, '../../', env === 'prod' ?
       m.name.slice('./src'.length) :
       m.name.slice(namePrefix.length + './src'.length));
-    //Resolve the e.g.:"C:\"  issue on windows
     if (name) {
-      const i = name.indexOf(":");
-      name = name.substring(i > -1 ? i + 1 : 0, name.length + 1);
+      // Resolve the e.g.: "C:\"  issue on windows
+      const i = name.indexOf(':');
+      if (i >= 0) {
+        name = name.slice(i + 1);
+      }
     }
     //end
     var regex = env === 'prod' ? /module\.exports = ((.|\n)+);/ : /exports\.locals = ((.|\n)+);/;