From 30ffe4dcc2ebf1a415239bb01205e66639981129 Mon Sep 17 00:00:00 2001
From: Kristofer Joseph <kristoferjoseph@gmail.com>
Date: Thu, 15 Oct 2015 11:53:28 -0700
Subject: [PATCH] Adds postcss plugins to example

---
 package.json      |  5 +++++
 src/table.css     | 21 ++++++++++++---------
 src/variables.css |  7 +++++++
 webpack.config.js | 29 ++++++++++++++++++++++++-----
 4 files changed, 48 insertions(+), 14 deletions(-)
 create mode 100644 src/variables.css

diff --git a/package.json b/package.json
index cdc8765..e219afc 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,15 @@
 {
   "private": true,
   "devDependencies": {
+    "autoprefixer": "^6.0.3",
     "babel-core": "^5.8.25",
     "babel-loader": "^5.3.2",
     "css-loader": "^0.19.0",
     "extract-text-webpack-plugin": "^0.8.2",
+    "postcss-color-scale": "^1.1.2",
+    "postcss-custom-properties": "^5.0.0",
+    "postcss-import": "^7.0.0",
+    "postcss-loader": "^0.6.0",
     "style-loader": "^0.12.4",
     "webpack": "^1.12.2"
   },
diff --git a/src/table.css b/src/table.css
index 5f8ec87..896b362 100644
--- a/src/table.css
+++ b/src/table.css
@@ -1,21 +1,24 @@
+@import './variables.css';
+
 .table {
-    width: 200px;
+  width: 200px;
 }
-
 .table,
 .row,
 .cell {
-    margin: 10px; overflow: hidden;
+  margin: 10px;
+  overflow: hidden;
 }
-
 .table {
-    border: 1px solid #000;
+  border: 1px solid;
+  border-color: var(--table-border);
 }
-
 .row {
-    border: 1px solid #f00;
+  border: 1px solid;
+  border-color: var(--row-border);
 }
-
 .cell {
-    border: 1px solid #00f; padding: 10px;
+  border: 1px solid;
+  padding: 10px;
+  border-color: var(--cell-border);
 }
diff --git a/src/variables.css b/src/variables.css
new file mode 100644
index 0000000..27d8f09
--- /dev/null
+++ b/src/variables.css
@@ -0,0 +1,7 @@
+:root {
+  --cs-color: #0f0;
+  --cs-color-variance: 20;
+  --table-border: cs(-4);
+  --row-border: cs(-2);
+  --cell-border: cs(0);
+}
diff --git a/webpack.config.js b/webpack.config.js
index f02c9ed..fef6723 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,7 +1,11 @@
-var webpack = require('webpack'),
-    path = require('path'),
-    ExtractTextPlugin = require('extract-text-webpack-plugin'),
-    devServer;
+var webpack = require('webpack')
+var path = require('path')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var postcssImport = require('postcss-import')
+var customProperties = require('postcss-custom-properties')
+var colorScale = require('postcss-color-scale')
+var autoprefixer = require('autoprefixer')
+var devServer
 
 devServer = {
     contentBase: __dirname + '/endpoint',
@@ -45,7 +49,10 @@ module.exports = {
         loaders: [
             {
                 test: /\.css$/,
-                loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
+                loader: ExtractTextPlugin.extract(
+                  'style',
+                  'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
+                )
             },
             {
                 test: /\.js$/,
@@ -54,6 +61,18 @@ module.exports = {
             }
         ]
     },
+    postcss: function() {
+      return [
+        postcssImport({
+          onImport: function (files) {
+              files.forEach(this.addDependency);
+          }.bind(this)
+        }),
+        colorScale(),
+        customProperties(),
+        autoprefixer
+      ]
+    },
     resolve: {
         // root: path.resolve(__dirname, 'node_modules'),
         extensions: [