implimenting react-css-modules and updating file structure

frontend/package.json

@@ -8,11 +8,9 @@
     "lint": "eslint .",
     "test": "NODE_ENV=test nyc ava test/*.js --verbose",
     "open": "nyc report --reporter=html & open coverage/index.html",
-    "coverage": "nyc check-coverage --statements 100 --functions 100 --lines 100 --branches 100",
+    "coverage": "nyc check-coverage --statements 100 --functions 100 --lines 100 --branches 100"
-    "build-locales": "NODE_ENV=test babel-node scripts/build-locales"
   },
   "dependencies": {
-    "babel-cli": "^6.16.0",
     "babel-core": "^6.17.0",
     "babel-loader": "^6.2.5",
     "babel-plugin-add-module-exports": "^0.2.1",
@@ -21,15 +19,14 @@
     "babel-plugin-transform-object-rest-spread": "^6.16.0",
     "babel-preset-react": "^6.16.0",
     "constant-case": "^2.0.0",
+    "css-loader": "^0.25.0",
     "fast-async": "^6.1.1",
     "json-loader": "^0.5.4",
-    "ncp": "^2.0.0",
+    "postcss-loader": "^1.0.0",
-    "querystring": "^0.2.0",
     "react": "^15.3.2",
+    "react-css-modules": "^3.7.10",
     "react-dom": "^15.3.2",
     "react-hot-loader": "^3.0.0-beta.6",
-    "react-intl": "^2.1.5",
-    "react-intl-redux": "^0.1.0",
     "react-redux": "^4.4.5",
     "react-router": "^4.0.0-alpha.4",
     "reduce-reducers": "^0.1.2",
@@ -39,9 +36,8 @@
     "redux-logger": "^2.7.0",
     "redux-promise-middleware": "^4.1.0",
     "redux-thunk": "^2.1.0",
-    "thenify": "^3.2.1",
+    "style-loader": "^0.13.1",
-    "webpack": "^2.1.0-beta.25",
+    "webpack": "^2.1.0-beta.25"
-    "webpack-shell-plugin": "^0.4.3"
   },
   "devDependencies": {
     "ava": "^0.16.0",
@@ -60,8 +56,7 @@
     "nyc": "^8.3.1",
     "pre-commit": "^1.1.3",
     "react-addons-test-utils": "^15.3.2",
-    "webpack-dev-server": "^1.16.2",
+    "webpack-dev-server": "^1.16.2"
-    "webpack-shell-plugin": "^0.4.3"
   },
   "ava": {
     "failFast": true,

frontend/src/containers/app.js

@@ -3,8 +3,8 @@ const ReactRedux = require('react-redux');
 const ReactRouter = require('react-router');
 
 const actions = require('../state/actions');
-const Home = require('./home');
+const Home = require('./home/');
-const NotFound = require('./not-found');
+const NotFound = require('./not-found/');
 
 const {
   updateRouter

frontend/src/containers/home.js

@@ -1,16 +0,0 @@
-const React = require('react');
-const ReactIntl = require('react-intl');
-
-const {
-  FormattedMessage
-} = ReactIntl;
-
-module.exports = () => {
-  return (
-    <div>
-      <h1>
-        <FormattedMessage id='greetings' />
-      </h1>
-    </div>
-  );
-};

frontend/src/containers/home/home.css

@@ -0,0 +1,3 @@
+.home {
+  background: red;
+}

frontend/src/containers/home/index.js

@@ -0,0 +1,13 @@
+const React = require('react');
+const CSSModules = require('react-css-modules');
+const styles = require('./home.css');
+
+console.log('STYLES ', styles)
+
+module.exports = () => {
+  return (
+    <div className={styles.home}>
+      <h1>Home</h1>
+    </div>
+  );
+};

frontend/webpack/config.js

@@ -1,6 +1,5 @@
 const pkg = require('../package.json');
 const webpack = require('webpack');
-const WebpackShellPlugin = require('webpack-shell-plugin');
 const path = require('path');
 
 module.exports = {
@@ -18,10 +17,7 @@ module.exports = {
         APP_NAME: JSON.stringify(pkg.name),
         APP_VERSION: JSON.stringify(pkg.version)
       }
-    }),
+  })
-    new WebpackShellPlugin({
-      onBuildStart: ['npm run build-locales']
-    })
   ],
   module: {
     loaders: [{
@@ -38,6 +34,31 @@ module.exports = {
         path.join(__dirname, '../src')
       ],
       loaders: ['json']
-    }]
+    }, {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+                modules: true,
+                importLoaders: 1,
+                localIdentName: '[name]__[local]___[hash:base64:5]'
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: function () {
+                return [
+                    require('postcss-modules-values'),
+                    require('postcss-nested'),
+                    require('autoprefixer')
+                ];
+              }
+            }
+          }
+        ]
+      }]
   }
 };