Add support for js style modules.

Css styles can be written as plain js modules.

```js
// style.css.js
module.exports = {
  body: {
    fontFamily: 'sans-serif',
  },
  '.app': {
    width: 400,
  },
  '@media screen and (min-width: 800px)': {
    '.app': {
      width: 800,
    },
  },
}
```

```css
/* generated css */
body {
  font-family: sans-serif;
}

.app {
  width: 400px;
}

@media screen and (min-width: 800px) {
  .app {
    width: 800px;
  }
}
```

Multiple values for blocks and properties can be defined as arrays.

```js
// style.css.js
module.exports = {
  body: [{
    height: '100%',
  }, {
    fontFamily: 'sans-serif',
  }],
  '.app': {
    display: ['block', 'flex'],
  },
};
```

```css
/* generated css */
body {
  height: 100%;
}

body {
  font-family: sans-serif;
}

.app {
  display: block;
  display: flex;
}
```

Style modules can be written in es6 and transformed with `babel-loader`.

```js
// webpack.config.js
import babel from 'webpack-config-babel';
import postcss from 'webpack-config-postcss';

export default compose(
  ...,
  postcss(),
  babel(),
)();
```

(Include the `babel` config _after_ `postcss` config since webpack executes loaders from bottom to top.)

```js
// style.css.js
export default {
  '.app': {
    width: 400,
  },
};
```

```css
/* generated css */

.app {
  width: 400px;
}
```

In es6 style modules, named exports are interpreted as css classes.

```js
// style.css.js
export const app = {
  width: 400,
};
```

```css
/* generated css */

.app {
  width: 400px;
}
```

This preserves import/export continuity when using css modules.

```js
// style.css.js
export const base = {
  fontSize: 16,
};

export const normal = {
  composes: 'base',
  color: 'black',
};

export const active = {
  composes: 'base',
  color: 'green',
};
```

```js
// component.js
import {createElement} from 'react';
import {normal, active} from './style.css.js';

export default ({state, children}) =>
  <div className={state === 'active' ? active : normal}>
    {children}
  </div>
```

Author: Neal Granger

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "autoprefixer": "^6.0.3",
+    "css-js-loader": "^0.2.2",
     "css-loader": "^0.23.1",
     "extract-text-webpack-plugin": "^0.9.0",
     "postcss-import": "^7.1.0",

src/postcss.webpack.config.js

@@ -10,6 +10,7 @@ import constants from 'postcss-require';
 
 // Regular expression used to detect what kind of files to process.
 const IS_STYLE = /\.(scss|sass|css)$/;
+const IS_CSS_JS = /\.css\.js$/;
 
 /**
  * Convert a loader string and query object into a complete loader string.
@@ -80,6 +81,18 @@ export default ({
           external,
           minimize,
         }),
+      }, {
+        name: 'js-css',
+        test: IS_CSS_JS,
+        loader: loaders({
+          loader: [
+            require.resolve('postcss-loader'),
+            require.resolve('css-js-loader'),
+          ].join('!'),
+          target,
+          external,
+          minimize,
+        }),
       }],
     },