Merge branch 'master' of github.com:developit/preact-boilerplate into merge-remote

# Conflicts:
#	package.json
#	webpack.config.babel.js

Author: developit

.eslintrc

@@ -1,6 +1,23 @@
 {
   "parser": "babel-eslint",
+  "extends": "eslint:recommended",
+  "env": {
+    "browser": true,
+    "mocha": true,
+    "es6": true
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "modules": true,
+      "jsx": true
+    }
+  },
+  "globals": {},
   "rules": {
+    "no-empty": 0,
+    "no-console": 0,
+    "no-unused-vars": [0, { "varsIgnorePattern": "^h$" }],
+    "no-cond-assign": 1,
     "semi": 2,
     "camelcase": 0,
     "comma-style": 2,
@@ -13,14 +30,13 @@
     "no-implied-eval": 2,
     "no-new-func": 2,
     "guard-for-in": 2,
-    "eqeqeq": 2,
+    "eqeqeq": 1,
     "no-else-return": 2,
     "no-redeclare": 2,
     "no-dupe-keys": 2,
     "radix": 2,
     "strict": [2, "never"],
     "no-shadow": 0,
-    "callback-return": [1, ["callback", "cb", "next", "done"]],
     "no-delete-var": 2,
     "no-undef-init": 2,
     "no-shadow-restricted-names": 2,

README.md

@@ -16,6 +16,7 @@ Below is a step-by-step guide that takes you straight from downloading this boil
 - [Installation](#installation)
 - [Development Workflow](#development-workflow)
 - [Structure](#structure)
+- [CSS Modules](#css-modules)
 - [Handling URLS](#handling-urls)
 
 
@@ -24,7 +25,7 @@ Below is a step-by-step guide that takes you straight from downloading this boil
 **1. Clone this repo:**
 
 ```sh
-git clone git@github.com:developit/preact-boilerplate.git my-app
+git clone --depth 1 https://github.com/developit/preact-boilerplate.git my-app
 cd my-app
 ```
 
@@ -91,6 +92,36 @@ class Link extends Component {
 ```
 
 
+---
+
+
+## CSS Modules
+
+This project is set up to support [CSS Modules](https://github.com/css-modules/css-modules).  By default, styles in `src/style` are **global** (not using CSS Modules) to make global declarations, imports and helpers easy to declare.  Styles in `src/components` are loaded as CSS Modules via [Webpack's css-loader](https://github.com/webpack/css-loader#css-modules).  Modular CSS namespaces class names, and when imported into JavaScript returns a mapping of canonical (unmodified) CSS classes to their local (namespaced/suffixed) counterparts.
+
+When imported, this LESS/CSS:
+
+```css
+.redText { color:red; }
+.blueText { color:blue; }
+```
+
+... returns the following map:
+
+```js
+import styles from './style.css';
+console.log(styles);
+// {
+//   redText: 'redText_local_9gt72',
+//   blueText: 'blueText_local_9gt72'
+// }
+```
+
+Note that the suffix for local classNames is generated based on an md5 hash of the file. Changing the file changes the hash.
+
+
+---
+
 
 ## Handling URLS
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "preact-boilerplate",
-  "version": "1.0.3",
+  "version": "3.0.0",
   "description": "Ready-to-go Preact starter project powered by webpack.",
   "scripts": {
     "dev": "NODE_ENV=development webpack-dev-server --inline --hot --progress",
@@ -24,7 +24,7 @@
     "babel": "^6.5.2",
     "babel-core": "^6.7.2",
     "babel-eslint": "^5.0.0",
-    "babel-loader": "^6.2.1",
+    "babel-loader": "^6.2.4",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-react-jsx": "^6.6.5",
     "babel-preset-es2015": "^6.6.0",

webpack.config.babel.js

@@ -3,7 +3,10 @@ import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import autoprefixer from 'autoprefixer';
 
+/*global process,module,__dirname*/
+
 const ENV = process.env.NODE_ENV || 'development';
+
 const CSS_MAPS = ENV!=='production';
 
 module.exports = {
@@ -86,11 +89,11 @@ module.exports = {
 		new webpack.NoErrorsPlugin(),
 		new ExtractTextPlugin('style.css', {
 			allChunks: true,
-			disabled: ENV!=='production'
+			disable: ENV!=='production'
 		}),
 		new webpack.optimize.DedupePlugin(),
 		new webpack.DefinePlugin({
-			'process.env.NODE_ENV': JSON.stringify(ENV)
+			'process.env': JSON.stringify({ NODE_ENV: ENV })
 		}),
 		new HtmlWebpackPlugin({
 			template: 'src/index.html',