Add postcss step

js/radar.js

@@ -1,5 +1,3 @@
-import '../styles/main.css';
-
 const add = (x, y) => x + y;
 
 add(1, 2);

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"
   }

postcss.config.json

@@ -0,0 +1,9 @@
+{
+  "use": [
+    "autoprefixer",
+    "postcss-nested"
+  ],
+  "autoprefixer": {
+      "browsers": "> 5%"
+  }
+}

styles/main.css

@@ -1,3 +0,0 @@
-body {
-  background: red;
-}

styles/styles.css

@@ -0,0 +1,9 @@
+body {
+  background: red;
+  box-sizing: border-box;
+  transform: translate3d(1,1,1);
+
+  & h1 {
+    background: green;
+  }
+}

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")
-  ],
 }