From 4766ec777411d70058c488c080ae7bb16af9980f Mon Sep 17 00:00:00 2001
From: Tom Raithel <t.raithel@googlemail.com>
Date: Wed, 25 Jan 2017 14:04:23 +0100
Subject: [PATCH] Add postcss step

---
 js/radar.js         |  2 --
 package.json        | 12 ++++++------
 postcss.config.json |  9 +++++++++
 styles/main.css     |  3 ---
 styles/styles.css   |  9 +++++++++
 webpack.config.js   | 29 -----------------------------
 6 files changed, 24 insertions(+), 40 deletions(-)
 create mode 100644 postcss.config.json
 delete mode 100644 styles/main.css
 create mode 100644 styles/styles.css

diff --git a/js/radar.js b/js/radar.js
index b377ef5..3840509 100644
--- a/js/radar.js
+++ b/js/radar.js
@@ -1,5 +1,3 @@
-import '../styles/main.css';
-
 const add = (x, y) => x + y;
 
 add(1, 2);
diff --git a/package.json b/package.json
index 0e67756..bc67252 100644
--- a/package.json
+++ b/package.json
@@ -4,9 +4,10 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "npm run clean && npm run build:radar && npm run build:webpack",
+    "build": "npm run clean && npm run build:radar && npm run build:js && npm run build:css",
     "build:radar": "babel-node ./tasks/build.js",
-    "build:webpack": "webpack --config webpack.config.js",
+    "build:js": "webpack --config webpack.config.js",
+    "build:css": "postcss -c postcss.config.json -d dist/ styles/*.css ",
     "clean": "babel-node ./tasks/clean.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -14,18 +15,17 @@
   "license": "MIT",
   "dependencies": {
     "async": "2.1.4",
+    "autoprefixer": "6.7.0",
     "babel-cli": "6.22.2",
     "babel-loader": "6.2.10",
     "babel-preset-latest": "6.22.0",
     "babel-preset-stage-0": "6.22.0",
-    "css-loader": "0.26.1",
-    "extract-text-webpack-plugin": "2.0.0-beta.5",
     "front-matter": "2.1.1",
     "fs-extra": "2.0.0",
     "marked": "0.3.6",
-    "postcss-loader": "1.2.2",
+    "postcss-cli": "2.6.0",
+    "postcss-nested": "1.0.0",
     "pug": "2.0.0-beta8",
-    "style-loader": "0.13.1",
     "walk": "2.3.9",
     "webpack": "2.2.0"
   }
diff --git a/postcss.config.json b/postcss.config.json
new file mode 100644
index 0000000..e71e98f
--- /dev/null
+++ b/postcss.config.json
@@ -0,0 +1,9 @@
+{
+  "use": [
+    "autoprefixer",
+    "postcss-nested"
+  ],
+  "autoprefixer": {
+      "browsers": "> 5%"
+  }
+}
diff --git a/styles/main.css b/styles/main.css
deleted file mode 100644
index 67ce83e..0000000
--- a/styles/main.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  background: red;
-}
diff --git a/styles/styles.css b/styles/styles.css
new file mode 100644
index 0000000..9e9c452
--- /dev/null
+++ b/styles/styles.css
@@ -0,0 +1,9 @@
+body {
+  background: red;
+  box-sizing: border-box;
+  transform: translate3d(1,1,1);
+
+  & h1 {
+    background: green;
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
index 8bfa9e4..fd7b52a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,19 +1,4 @@
 var path = require('path');
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
-
-let cssLoader = ExtractTextPlugin.extract({
-  fallbackLoader: "style-loader",
-  loader: [
-    "css-loader",
-    "postcss-loader",
-  ]
-});
-
-console.log('------------------------------');
-console.log(cssLoader);
-console.log('------------------------------');
-
-// cssLoader = 'css-loader';
 
 module.exports = {
   entry: {
@@ -33,20 +18,6 @@ module.exports = {
 
          loader: "babel-loader",
        },
-       {
-         test: /\.css?$/,
-         include: [
-           path.resolve(__dirname, "styles")
-         ],
-         use: [
-           {
-             loader: cssLoader,
-           }
-         ],
-       },
     ],
   },
-  plugins: [
-    new ExtractTextPlugin("styles.css")
-  ],
 }