Move css modules identifier name to webpack/constants

Author: calvinl

package.json

@@ -4,9 +4,6 @@
   "version": "2.3.0",
   "license": "MIT",
   "main": "client/index.js",
-  "config": {
-    "css": "[name]__[local]__[hash:base64:5]"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/combine/universal-react-redux.git"

server/index.js

@@ -8,7 +8,7 @@ require('app-module-path').addPath('common/js');
 // css-modules-require-hook package allows us to require css files on the server.
 require('css-modules-require-hook')({
   extensions: ['.scss'],
-  generateScopedName: require('../package.json').config.css,
+  generateScopedName: require('../webpack/constants').CSS_MODULES_IDENTIFIER,
   devMode: process.env.NODE_ENV === 'development'
 });
 

webpack/constants.js

@@ -17,7 +17,15 @@ export const OUTPUT_PATH = process.env.OUTPUT_PATH || 'dist/';
 /* The asset host to use inside the built webpack files. In product, set the
  * ASSET_HOST environment variable.
  */
-export const ASSET_HOST = process.env.ASSET_HOST || (DEV_SERVER_HOST_URL + '/' + OUTPUT_PATH);
+export const ASSET_HOST = (
+  process.env.NODE_ENV === 'production'
+    ? process.env.ASSET_HOST || '/dist/'
+    : process.env.ASSET_HOST || (DEV_SERVER_HOST_URL + '/' + OUTPUT_PATH)
+  );
+
+/* The identifier to use for css-modules.
+ */
+export const CSS_MODULES_IDENTIFIER = '[name]__[local]__[hash:base64:5]';
 
 /* Paths for webpack to resolve into non-relative directories, so that instead
  * of having to use relative paths:

webpack/development.hot.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { DEV_SERVER_PORT, DEV_SERVER_HOSTNAME, DEV_SERVER_HOST_URL } from './constants';
+import { DEV_SERVER_PORT, DEV_SERVER_HOSTNAME, DEV_SERVER_HOST_URL, CSS_MODULES_IDENTIFIER } from './constants';
 import WebpackDevServer from 'webpack-dev-server';
 import path from 'path';
 import webpack from 'webpack';
@@ -31,7 +31,7 @@ const loaders = [
         options: {
           modules: true,
           importLoaders: 3,
-          localIdentName: packageJson.config.css
+          localIdentName: CSS_MODULES_IDENTIFIER
         }
       },
       'postcss-loader'
@@ -46,7 +46,7 @@ const loaders = [
         options: {
           modules: true,
           importLoaders: 3,
-          localIdentName: packageJson.config.css
+          localIdentName: CSS_MODULES_IDENTIFIER
         }
       },
       'postcss-loader',

webpack/development.js

@@ -1,6 +1,6 @@
 import baseConfig from './base';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
-import packageJson from '../package.json';
+import { CSS_MODULES_IDENTIFIER } from './constants';
 
 const plugins = [
   new ExtractTextPlugin('styles.css')
@@ -23,7 +23,7 @@ const loaders = [
             modules: true,
             minimize: false,
             importLoaders: 1,
-            localIdentName: packageJson.config.css
+            localIdentName: CSS_MODULES_IDENTIFIER
           }
         },
         { loader: 'postcss-loader' },

webpack/production.js

@@ -1,5 +1,6 @@
 import webpack from 'webpack';
 import baseConfig from './base';
+import { CSS_MODULES_IDENTIFIER } from './constants';
 import CompressionPlugin from 'compression-webpack-plugin';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
 
@@ -28,7 +29,15 @@ const loaders = [
     loader: ExtractTextPlugin.extract({
       fallback: 'style-loader',
       use: [
-        { loader: 'css-loader' },
+        {
+          loader: 'css-loader',
+          options: {
+            modules: true,
+            minimize: false,
+            importLoaders: 1,
+            localIdentName: CSS_MODULES_IDENTIFIER
+          }
+        },
         { loader: 'postcss-loader' },
         { loader: 'sass-loader' }
       ]