Hot reload dev environment with autoprefixer

Gruntfile.js

@@ -3,6 +3,10 @@
 require('es5-shim');
 require('es6-shim');
 
+var path = require('path');
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var webpackConfigMerger = require('webpack-config-merger');
+
 module.exports = function(grunt) {
 
   var banner = [
@@ -53,7 +57,7 @@ module.exports = function(grunt) {
       output: {
         library: "SirTrevor",
         libraryTarget: "umd",
-        path: "build/",
+        path: path.join(__dirname, 'build'),
         filename: filename
       },
       externals: {
@@ -63,6 +67,13 @@ module.exports = function(grunt) {
           commonjs2: "jquery",
           amd: "jquery"
         }
+      },
+      module: {
+        loaders: [{
+          test: /\.js?$/,
+          exclude: /(node_modules|bower_components)/,
+          loader: 'babel?optional[]=runtime'
+        }]
       }
     }
   };
@@ -82,14 +93,29 @@ module.exports = function(grunt) {
 
     webpack: {
       dist: webpackOptions("sir-trevor.js"),
-
-      debug: Object.assign(webpackOptions("sir-trevor.debug.js"), {
-        debug: true,
-      }),
-
       test: webpackOptions("sir-trevor.test.js")
     },
 
+    "webpack-dev-server": {
+      start: {
+        webpack: webpackConfigMerger(webpackOptions("sir-trevor.debug.js"), {
+          debug: true,
+          plugins: [
+            new ExtractTextPlugin("sir-trevor.debug.css")
+          ],
+          module: {
+            preLoaders: [{
+              test: /\.scss$/,
+              loader: ExtractTextPlugin.extract('css!autoprefixer!sass?outputStyle=compressed')
+            }]
+          }
+        }),
+        keepalive: true,
+        hot: true,
+        contentBase: "./"
+      }
+    },
+
     karma: {
       test: {
         configFile: 'karma.conf.js'
@@ -204,7 +230,7 @@ module.exports = function(grunt) {
 
   grunt.registerTask('default', ['test', 'sass', 'webpack', 'uglify']);
   grunt.registerTask('test', ['jshint', 'karma', 'webpack:test', 'sass:test', 'connect', 'jasmine_nodejs']);
-  grunt.registerTask('dev', ['sass', 'webpack:debug']);
+  grunt.registerTask('dev', ['webpack-dev-server:start']);
   grunt.registerTask('jasmine-browser', ['server', 'watch']);
 
 };

examples/index.html

@@ -9,7 +9,7 @@
   <title></title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width">
-  <link rel="stylesheet" href="../build/sir-trevor.css" type="text/css" media="screen" title="no title" charset="utf-8">
+  <link rel="stylesheet" href="../sir-trevor.debug.css" type="text/css" media="screen" title="no title" charset="utf-8">
   <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
   <style>
     body {
@@ -26,11 +26,12 @@
 
   <pre id="st-json-debug"></pre>
 
+  <script src="http://localhost:8080/webpack-dev-server.js"></script>
   <script src="../node_modules/es5-shim/es5-shim.js" type="text/javascript" charset="utf-8"></script>
   <!-- es6-shim should be bundled in with SirTrevor for now -->
   <!-- <script src="../node_modules/es6-shim/es6-shim.js" type="text/javascript" charset="utf-8"></script> -->
   <script src="../node_modules/jquery/dist/jquery.js" type="text/javascript" charset="utf-8"></script>
-  <script src="../build/sir-trevor.debug.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../sir-trevor.debug.js" type="text/javascript" charset="utf-8"></script>
   <script src="../locales/de.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
     $(function(){

index.js

@@ -1 +1,3 @@
 module.exports = require('./src/');
+
+require('./src/sass/main.scss');

package.json

@@ -17,8 +17,11 @@
   },
   "devDependencies": {
     "array.prototype.find": "^1.0.0",
+    "autoprefixer-loader": "^2.0.0",
+    "css-loader": "^0.15.6",
     "es6-shim": "^0.21.0",
     "eventablejs": "^1.0.5",
+    "extract-text-webpack-plugin": "^0.8.2",
     "grunt": "^0.4.5",
     "grunt-cli": "^0.1.13",
     "grunt-contrib-connect": "^0.10.1",
@@ -46,14 +49,16 @@
     "lodash.template": "^2.4.1",
     "lodash.uniqueid": "^2.4.1",
     "mversion": "^1.9.0",
-    "node-bourbon": "^4.2.1-beta1",
     "object.assign": "^1.1.1",
+    "sass-loader": "^2.0.0",
     "scribe-editor": "1.3.2",
     "scribe-plugin-formatter-plain-text-convert-new-lines-to-html": "^0.1.1",
     "scribe-plugin-link-prompt-command": "^0.2.0",
     "selenium-webdriver": "^2.46.1",
     "spin.js": "^2.0.1",
+    "style-loader": "^0.12.3",
     "webpack": "^1.8.4",
+    "webpack-config-merger": "0.0.3",
     "webpack-dev-server": "^1.8.0"
   }
 }

src/sass/block-positioner.scss

@@ -8,7 +8,7 @@
 
   visibility: hidden;
   opacity: 0;
-  @include transition(opacity 0.2s ease-in-out);
+  transition: opacity 0.2s ease-in-out;
 }
 
 .st-block-positioner--is-visible {
@@ -28,7 +28,7 @@
   border: $default-border;
   background: #fff;
 
-  @include transform(rotate(45deg));
+  transform: rotate(45deg);
 }
 
 .st-block-positioner__inner {

src/sass/format-bar.scss

@@ -9,7 +9,7 @@
   border-radius: 0.4em;
   padding: 0;
 
-  @include transition(opacity 0.2s ease-in-out);
+  transition: opacity 0.2s ease-in-out;
 }
 
 .st-format-bar:before {

src/sass/main.scss

@@ -1,5 +1,3 @@
-@import 'bourbon';
-
 @import '_variables';
 
 @import '_icons';