Merge pull request #12 from andreypopp/es5

Compile directly to ES5

Author: andreypopp

README.md

@@ -16,16 +16,17 @@
 - [Variants](#variants)
   - [Named variants](#named-variants)
   - [JavaScript expressions](#javascript-expressions)
-- [Advanced configuration](#advanced-configuration)
-  - [CSS extraction with Webpack](#css-extraction-with-webpack)
-  - [Using with Sass/Less/Stylus/...](#using-with-sasslessstylus)
-  - [Using with custom PostCSS plugins (including autoprefixer)](#using-with-custom-postcss-plugins-including-autoprefixer)
+- [Customizing CSS loading](#customizing-css-loading)
+  - [CSS extraction](#css-extraction)
+  - [Using with SASS/SCSS/LESS/Stylus/...](#using-with-sassscsslessstylus)
+  - [Using with PostCSS (including autoprefixer)](#using-with-postcss-including-autoprefixer)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 ## Motivation
 
-Define React presentational components with CSS.
+Define React presentational components with CSS (or even SASS or Less if you
+like).
 
 The implementation is based on [CSS modules][]. In fact React CSS Components is
 just a thin API on top of CSS modules.
@@ -38,7 +39,7 @@ documented). Raise an issue or better submit a PR if you have some ideas.
 
 Install from npm:
 
-    % npm install react-css-components
+    % npm install react-css-components style-loader css-loader
 
 Configure in `webpack.config.js`:
 
@@ -162,18 +163,31 @@ used to determine if corresponding CSS classes should be applied to DOM:
 <Label mode="emphasis" /> // sets both classes with `color` and `font-weight`
 ```
 
-## Advanced configuration
+## Customizing CSS loading
 
-### CSS extraction with Webpack
+By default React CSS components loads CSS using `style-loader!css-loader` loader
+chain. That could be configured differently using `loadCSS` loader parameter.
 
-TODO: documentation
+This could be used to enable features such as *CSS extraction*, processing
+stylesheets with *PostCSS/Autoprefixer* or even authoring stylesheets with
+*SASS* or *LESS*.
 
-### Using with Sass/Less/Stylus/...
+### CSS extraction
 
-TODO: documentation
+See the [complete example](./examples/css-extraction/webpack.config.js) which
+configures
+[`extract-text-webpack-plugin`](https://github.com/webpack/extract-text-webpack-plugin)
+to extract stylesheets to a separate chunk.
 
-### Using with custom PostCSS plugins (including autoprefixer)
+### Using with SASS/SCSS/LESS/Stylus/...
 
-TODO: documentation
+See the [complete example](./examples/sass/webpack.config.js) which
+uses SASS/SCSS to create React components.
+
+### Using with PostCSS (including autoprefixer)
+
+See the [complete example](./examples/postcss//webpack.config.js) which
+configures PostCSS with Autoprefixer to automatically add vendor prefixes to
+stylesheets.
 
 [CSS modules]: https://github.com/css-modules/css-modules

examples/webpack/.babelrc renamed to examples/css-extraction/.babelrc

@@ -0,0 +1,25 @@
+.X52OiYfywcpF7u3crcqcA {
+
+    padding: 10px;
+
+    font-family: Menlo
+}
+
+.iJXrh1QPVfO1KYprwspQZ {
+
+    font-size: 200%;
+
+    font-weight: bold;
+
+    color: black
+}
+
+.iJXrh1QPVfO1KYprwspQZ:hover,._1bO1SnI_oCI89WzsECLdV1 {
+
+    color: red
+}
+
+.ndUcOSKzJtORy_Qc8PILK {
+
+    color: #444
+}

examples/css-extraction/bundle/bundle.css

@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="bundle/bundle.css">
+<div id="main">
+<script src="bundle/bundle.js"></script>

examples/css-extraction/bundle/bundle.js

@@ -0,0 +1,19 @@
+{
+  "name": "react-css-components-example-webpack",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack",
+    "watch": "webpack -w"
+  },
+  "dependencies": {
+    "babel-loader": "^6.2.4",
+    "css-loader": "^0.23.1",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "react": "^15.0.0",
+    "react-css-components": "../../",
+    "react-dom": "^15.0.0",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.12.14"
+  }
+}

examples/css-extraction/index.html

@@ -0,0 +1,27 @@
+var common = require('../webpack.config');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+module.exports = Object.assign({}, common(__dirname), {
+  module: {
+    loaders: [
+      {
+        test: /\.react.css$/,
+        loader: 'react-css-components',
+        query: {
+          loadCSS: ExtractTextPlugin.extract(
+            'style-loader',
+            'css-loader?modules'
+          ).split('!')
+        }
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+      }
+    ]
+  },
+  plugins: [
+    new ExtractTextPlugin('bundle.css'),
+  ]
+});

examples/webpack/index.js renamed to examples/css-extraction/index.js

@@ -0,0 +1,3 @@
+{
+  "presets": ["prometheusresearch"]
+}

examples/css-extraction/package.json

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Header, Content, Root} from './styles.react.css';
+
+ReactDOM.render(
+  <Root>
+    <Header>Header</Header>
+    <Content>Content</Content>
+  </Root>,
+  document.getElementById('main')
+);

examples/webpack/styles.react.css renamed to examples/css-extraction/styles.react.css

@@ -0,0 +1,20 @@
+{
+  "name": "react-css-components-example-webpack",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack",
+    "watch": "webpack -w"
+  },
+  "dependencies": {
+    "autoprefixer": "^6.3.6",
+    "babel-loader": "^6.2.4",
+    "css-loader": "^0.23.1",
+    "postcss-loader": "^0.9.1",
+    "react": "^15.0.0",
+    "react-css-components": "../../",
+    "react-dom": "^15.0.0",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.12.14"
+  }
+}

examples/css-extraction/webpack.config.js

@@ -0,0 +1,20 @@
+Root {
+  padding: 10px;
+  font-family: Menlo;
+}
+
+Header {
+  user-select: none;
+  font-size: 200%;
+  font-weight: bold;
+  color: black;
+
+}
+
+Header:hover {
+  color: red;
+}
+
+Content {
+  color: #444;
+}

examples/postcss/.babelrc

@@ -0,0 +1,29 @@
+var common = require('../webpack.config');
+
+var autoprefixer = require('autoprefixer');
+
+module.exports = Object.assign({}, common(__dirname), {
+  module: {
+    loaders: [
+      {
+        test: /\.react.css$/,
+        loader: 'react-css-components',
+        query: {
+          loadCSS: [
+            'style-loader',
+            'css-loader?modules',
+            'postcss-loader'
+          ]
+        }
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+      }
+    ]
+  },
+  postcss: function () {
+    return [autoprefixer];
+  }
+});

examples/postcss/bundle/bundle.js

@@ -0,0 +1,3 @@
+{
+  "presets": ["prometheusresearch"]
+}

examples/webpack/index.html renamed to examples/postcss/index.html

@@ -0,0 +1,2 @@
+<div id="main">
+<script src="bundle/bundle.js"></script>

examples/postcss/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Header, Content, Root} from './styles.react.scss';
+
+ReactDOM.render(
+  <Root>
+    <Header>Header</Header>
+    <Content>Content</Content>
+  </Root>,
+  document.getElementById('main')
+);

examples/postcss/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "react-css-components-example-webpack",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack",
+    "watch": "webpack -w"
+  },
+  "dependencies": {
+    "babel-loader": "^6.2.4",
+    "css-loader": "^0.23.1",
+    "node-sass": "^3.8.0",
+    "react": "^15.0.0",
+    "react-css-components": "../../",
+    "react-dom": "^15.0.0",
+    "sass-loader": "^3.2.0",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.12.14"
+  }
+}

examples/postcss/styles.react.css

@@ -0,0 +1,22 @@
+$padding: 10px;
+$color: red;
+
+Root {
+  padding: $padding;
+  font-family: Menlo;
+}
+
+Header {
+  font-size: 200%;
+  font-weight: bold;
+  color: black;
+
+}
+
+Header:hover {
+  color: $color;
+}
+
+Content {
+  color: $color;
+}

examples/postcss/webpack.config.js

@@ -0,0 +1,24 @@
+var common = require('../webpack.config');
+
+module.exports = Object.assign({}, common(__dirname), {
+  module: {
+    loaders: [
+      {
+        test: /\.react.scss/,
+        loader: 'react-css-components',
+        query: {
+          loadCSS: [
+            'style-loader',
+            'css-loader?modules',
+            'sass-loader',
+          ]
+        }
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+      }
+    ]
+  }
+});

examples/sass/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["prometheusresearch"]
+}

examples/sass/bundle/bundle.js

@@ -0,0 +1,2 @@
+<div id="main">
+<script src="bundle/bundle.js"></script>

examples/sass/index.html

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Header, Content, Root} from './styles.react.css';
+
+ReactDOM.render(
+  <Root>
+    <Header>Header</Header>
+    <Content>Content</Content>
+  </Root>,
+  document.getElementById('main')
+);

examples/sass/index.js

@@ -0,0 +1,19 @@
+Root {
+  padding: 10px;
+  font-family: Menlo;
+}
+
+Header {
+  font-size: 200%;
+  font-weight: bold;
+  color: black;
+
+}
+
+Header:hover {
+  color: red;
+}
+
+Content {
+  color: #444;
+}

examples/sass/package.json

@@ -0,0 +1,17 @@
+var common = require('../webpack.config');
+
+module.exports = Object.assign({}, common(__dirname), {
+  module: {
+    loaders: [
+      {
+        test: /\.react.css$/,
+        loader: 'react-css-components',
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+      }
+    ]
+  }
+});