Feat: Added support for css modules via react-css-modules

Author: weblogixx

.babelrc

@@ -3,5 +3,8 @@
     "es2015-native-modules",
     "react",
     "airbnb"
+  ],
+  "plugins": [
+    "transform-decorators-legacy"
   ]
 }

.eslintrc

@@ -1,4 +1,5 @@
 {
+  "parser": "babel-eslint",
   "env": {
     "browser": true,
     "node": true,

README.md

@@ -10,11 +10,11 @@ You may use this template either directly (by cloning this git repository) or by
 The following features are currently included out of the box:
 
 - [x] Webpack 2 setup to get you started (including basic support for LESS/SASS/SCSS/Stylus and PostCSS)
-- [ ] CSS Modules support
+- [x] CSS Modules support via https://github.com/gajus/react-css-modules
 - [x] Babel 6 to transpile ES2015 and JSX
 - [x] Latest stable React Version (v15.0)
-- [x] Karma, Mocha, Chai and Enzyme for easier unit testing
-- [x] Isparta to collect coverage information
+- [x] [Karma](http://karma-runner.github.io), [Mocha](https://mochajs.org), [Chai](http://chaijs.com) and [Enzyme](http://airbnb.io/projects/enzyme/) for easier unit testing
+- [x] Istanbul with Isparta to collect coverage information
 - [x] Preconfigured .editorconfig file
 - [x] Preconfigured eslint configuration, based on airbnb
 

conf/webpack/Base.js

@@ -84,23 +84,42 @@ class WebpackBaseConfig {
         loaders: [
           {
             test: /\.css$/,
-            loaders: ['style', 'css']
+            loaders: [
+              'style',
+              'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]'
+            ]
           },
           {
             test: /\.sass$/,
-            loaders: ['style', 'css', 'sass']
+            loaders: [
+              'style',
+              'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]',
+              'sass'
+            ]
           },
           {
             test: /\.scss$/,
-            loaders: ['style', 'css', 'sass']
+            loaders: [
+              'style',
+              'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]',
+              'sass'
+            ]
           },
           {
             test: /\.less$/,
-            loaders: ['style', 'css', 'less']
+            loaders: [
+              'style',
+              'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]',
+              'less'
+            ]
           },
           {
             test: /\.styl$/,
-            loaders: ['style', 'css', 'stylus']
+            loaders: [
+              'style',
+              'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]',
+              'stylus'
+            ]
           },
           {
             test: /\.(png|jpg|gif|mp4|ogg|svg|woff|woff2)$/,

conf/webpack/Dist.js

@@ -12,6 +12,7 @@ class WebpackDistConfig extends WebpackBaseConfig {
   constructor() {
     super();
     this.config = {
+      cache: false,
       devtool: 'source-map',
       plugins: [
         new webpack.DefinePlugin({

conf/webpack/Test.js

@@ -29,7 +29,46 @@ class WebpackTestConfig extends WebpackBaseConfig {
         ],
         loaders: [
           {
-            test: /\.(png|jpg|gif|woff|woff2|css|sass|scss|less|styl|mp4|ogg|svg)$/,
+            test: /\.css$/,
+            loaders: [
+              'style',
+              'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]'
+            ]
+          },
+          {
+            test: /\.sass$/,
+            loaders: [
+              'style',
+              'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]',
+              'sass'
+            ]
+          },
+          {
+            test: /\.scss$/,
+            loaders: [
+              'style',
+              'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]',
+              'sass'
+            ]
+          },
+          {
+            test: /\.less$/,
+            loaders: [
+              'style',
+              'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]',
+              'less'
+            ]
+          },
+          {
+            test: /\.styl$/,
+            loaders: [
+              'style',
+              'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]',
+              'stylus'
+            ]
+          },
+          {
+            test: /\.(png|jpg|gif|mp4|ogg|svg|woff|woff2)$/,
             loader: 'null-loader'
           },
           {

package.json

@@ -9,10 +9,11 @@
     "posttest": "npm run lint",
     "test:watch": "karma start --autoWatch=true --singleRun=false --reporters=mocha,coverage",
     "serve:dev": "webpack-dev-server --open --env dev",
-    "serve:dist": "webpack-dev-server --open --env dist",
-    "dist": "npm run clean && webpack --progress --bail --env dist -p",
+    "serve:dist": "webpack-dev-server --hot --inline --open --progress --env dist -p",
+    "dist": "npm run clean && npm run copy && webpack --progress --bail --env dist -p",
     "lint": "eslint ./src",
     "clean": "rimraf dist/*",
+    "copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist",
     "release:major": "npm version major && git push --follow-tags",
     "release:minor": "npm version minor && git push --follow-tags",
     "release:patch": "npm version patch && git push --follow-tags"
@@ -38,12 +39,15 @@
   "homepage": "https://github.com/weblogixx/react-webpack-template#readme",
   "devDependencies": {
     "babel-core": "^6.7.6",
+    "babel-eslint": "^6.0.4",
     "babel-loader": "^6.2.4",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-polyfill": "^6.9.0",
     "babel-preset-airbnb": "^2.0.0",
     "babel-preset-es2015-native-modules": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "chai": "^3.5.0",
+    "copyfiles": "^0.2.1",
     "css-loader": "^0.23.1",
     "enzyme": "^2.2.0",
     "eslint": "^2.8.0",
@@ -68,6 +72,7 @@
     "null-loader": "^0.1.1",
     "phantomjs-prebuilt": "^2.1.7",
     "react-addons-test-utils": "^15.0.1",
+    "react-css-modules": "^3.7.6",
     "react-hot-loader": "^1.3.0",
     "rimraf": "^2.5.2",
     "sinon": "^1.17.3",

src/components/App.js

@@ -1,7 +1,10 @@
 import React from 'react';
+import cssmodules from 'react-css-modules';
+import styles from './app.css';
 
 const yeomanImage = require('../images/yeoman.png');
 
+@cssmodules(styles)
 class AppComponent extends React.Component {
 
   handleClick() {
@@ -10,10 +13,10 @@ class AppComponent extends React.Component {
 
   render() {
     return (
-      <div className="index" onClick={this.handleClick.bind(this)}>
+      <div className="index" styleName="index" onClick={this.handleClick.bind(this)}>
         <img src={yeomanImage} alt="Yeoman Generator" />
         <div className="notice">
-          Please edit <code>src/components/Main.js</code> to get started!
+          Please edit <code>src/components/App.js</code> to get started!
         </div>
       </div>
     );

src/components/app.css

@@ -0,0 +1,42 @@
+:global body {
+  margin: 0;
+  padding: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 14px;
+  color: #fff;
+  background: #222;
+}
+
+.index {
+  width: 40%;
+  margin: 50px auto;
+  padding: 10px;
+  background: #333;
+  border: 1px solid #000;
+  border-radius: 2px;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.index code {
+  padding: 3px 6px;
+  color: #000;
+  background: #fff;
+  font-size: 14px;
+}
+
+.index img {
+  margin: 40px auto;
+  border-radius: 4px;
+  background: #fff;
+  display: block;
+}
+
+.notice {
+  margin: 20px auto;
+  padding: 15px 0;
+  text-align: center;
+  border: 1px solid #000;
+  border-width: 1px 0;
+  background: #666;
+}