switch over to babel and postcss

Author: Jeff Escalante

root/app.coffee

@@ -1,23 +1,21 @@
-axis         = require 'axis'
-rupture      = require 'rupture'
-autoprefixer = require 'autoprefixer-stylus'
-js_pipeline  = require 'js-pipeline'
-css_pipeline = require 'css-pipeline'
+cssnext     = require 'postcss-cssnext'
+imports     = require 'postcss-import'
+whitespace  = require 'css-whitespace'
+js_pipeline = require 'js-pipeline'
 
 module.exports =
   ignores: ['readme.md', '**/layout.*', '**/_*', '.gitignore', 'ship.*conf']
 
   extensions: [
     js_pipeline(files: 'assets/js/*.coffee'),
-    css_pipeline(files: 'assets/css/*.styl')
   ]
 
-  stylus:
-    use: [axis(), rupture(), autoprefixer()]
-    sourcemap: true
+  babel:
+    presets: ['es2015', 'stage-2']
 
-  'coffee-script':
-    sourcemap: true
+  postcss:
+    use: [imports(transform: whitespace), cssnext]
+    from: 'assets/css/master.css'
 
   jade:
     pretty: true

root/assets/css/_global.css

@@ -0,0 +1,8 @@
+body
+  padding: 50px
+  font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif
+  color: #555
+  -webkit-font-smoothing: antialiased
+  -webkit-text-size-adjust: 100%
+  -ms-text-size-adjust: 100%
+  font-size-adjust: auto

root/assets/css/_settings.styl

@@ -0,0 +1,5 @@
+/* See http://cssnext.io for extra available css features! */
+/* Use this file to split out your css to multiple files. Just make sure to
+   @import the file name here so it's included! */
+
+@import "_global"

root/assets/css/master.css

@@ -0,0 +1 @@
+console.log('Hello there! You can use ES6 here : )')

root/assets/css/master.styl

@@ -2,15 +2,18 @@
   "name": "<%= S(name).dasherize().value() %>",
   "description": "<%= description %>",
   "dependencies": {
-    "autoprefixer-stylus": "0.8.x",
     "axis": "0.5.x",
-    "coffee-script": "^1.0.0",
-    "css-pipeline": "0.3.x",
-    "jade": "^1.0.0",
+    "babel-core": "6.x",
+    "babel-preset-es2015": "6.x",
+    "babel-preset-stage-2": "6.x",
+    "css-whitespace": "1.x",
+    "postcss": "5.x",
+    "postcss-cssnext": "2.x",
+    "postcss-import": "8.x",
+    "jade": "1.x",
     "js-pipeline": "0.2.x",
-    "jstransformer-marked": "^1.0.0",
+    "jstransformer-marked": "1.x",
     "marked": "0.3.x",
-    "rupture": "0.6.x",
-    "stylus": "0.52.x"
+    "rupture": "0.6.x"
   }
 }

root/assets/js/main.coffee

@@ -1,6 +1,6 @@
 extends layout
 
 block content
-  h3 Welcome to roots!
+  h3 Welcome to Roots!
   :marked
     Find tutorials and documentation at http://roots.cx : )

root/assets/js/main.js

@@ -9,7 +9,7 @@ html
     //- uncomment if your site is responsive!
     //- meta(name="viewport" content="width=device-width, initial-scale=1")
     title= _path
-    != css()
+    link(rel='stylesheet', href='css/master.css')
 
   body
     block content