Use autoprefixer to add vendor prefixes to CSS

Use postcss and the autoprefixer plugin to post-process
CSS to add vendor prefixes and remove use of compass
mixins which did the same thing.

This moves compatibility concerns out of our styling
and down to a post-processor whose options can be adjusted
as necessary and moves us a step towards removing the
build dependency on compass.

Looking at the generated output, it fixes several issues
where we were inconsistent about which prefixes were used.

Pyramid webassets does have an autoprefixer filter but
it was written for an older version of autoprefixer which
was a standalone tool rather than a postcss plugin. In future
this also paves the way to replacing the cleancss asset filter
with an optional step in the postcss-filter.js script.

h/static/styles/annotator/bucket-bar.scss

@@ -10,7 +10,7 @@
 }
 
 .annotator-bucket-indicator {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
   background: $white;
   border: solid 1px $gray-lighter;
   border-radius: 2px 4px 4px 2px;

h/static/styles/annotator/inject.scss

@@ -5,7 +5,7 @@ $base-font-size: 14px;
 
 //ADDER////////////////////////////////
 .annotator-adder {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
   direction: ltr;
   height: 35px;
   margin-left: -20px;
@@ -151,7 +151,7 @@ $base-font-size: 14px;
   }
 
   ul, li {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     @include reset-box-model;
     @include reset-list-style;
   }

h/static/styles/app.scss

 @import 'compass';
-@import 'compass/css3/flexbox';
 
 $base-font-size: 12px;
 $base-line-height: 20px;
@@ -101,12 +100,8 @@ $group-list-width: 270px;
   }
 
   .group-item {
-    @include display-flex;
-    @include flex-direction(row);
-
-    // IE 10 support
-    display: -ms-flexbox;
-    -ms-flex-direction: row;
+    display: flex;
+    flex-direction: row;
 
     padding: 10px;
     cursor: pointer;

h/static/styles/base.scss

-@import "compass/css3";
+@import 'compass/css3';
 @import 'compass/reset/utilities';
 
 @import "./variables";
@@ -6,15 +6,13 @@
 /* Style input placeholders */
 @mixin placeholder {
   &.placeholder { @content; }
-  &:-moz-placeholder { @content; }
-  &::-moz-placeholder { @content; }
-  &:-ms-input-placeholder { @content; }
-  &::-webkit-input-placeholder { @content; }
+  &:placeholder { @content; }
+  &::placeholder { @content; }
 }
 
 /* Shadow mixins */
 @mixin smallshadow($a: 0, $b: 1px, $c: .1) {
-  @include box-shadow($a $b 1px hsla(0, 0%, 0%, $c));
+  box-shadow: $a $b 1px hsla(0, 0%, 0%, $c);
 }
 
 @mixin quote {

h/static/styles/common.scss

@@ -29,9 +29,7 @@ body {
 }
 
 p {
-  -webkit-hyphens: auto;
-     -moz-hyphens: auto;
-          hyphens: auto;
+  hyphens: auto;
 
   & + p {
     margin: 1em 0 0;

h/static/styles/markdown-editor.scss

-@import 'compass/css3/user-interface';
-
 //MARKDOWN EDITOR //////////////////////////
 .markdown-preview {
   overflow: auto;
@@ -18,7 +16,7 @@
   width: 100%;
   margin-bottom: -.1em;
   padding: .7em .7em .7em .5em;
-  @include user-select(none);
+  user-select: none;
 
   &.disable {
     .markdown-tools-button {

h/static/styles/reset.scss

-@import 'compass/css3/box-sizing';
 @import 'compass/reset';
 
 /*
@@ -6,12 +5,13 @@
   adopted from http://necolas.github.com/normalize.css/
   */
 
-* { @include box-sizing(border-box); }
+* {
+  box-sizing: border-box;
+}
 
 html {
   height: 100%;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
 body { min-height: 100%; font-size: 100%; }

h/static/styles/simple-search.scss

-@import 'compass/css3/flexbox';
-
 @import "base.scss";
 @import "mixins/icons";
 
 .simple-search-form {
-  @include display-flex;
-  @include flex-flow(row nowrap);
-
-    /* IE10 support */
-  display: -ms-flexbox;
-  -ms-flex-flow: row nowrap;
+  display: flex;
+  flex-flow: row nowrap;
 
   position: relative;
   color: $gray-dark;
@@ -24,12 +18,8 @@
 }
 
 input.simple-search-input {
-  @include flex-grow(1);
-  @include order(1);
-
-  /* IE10 support */
-  -ms-flex: 1;
-  -ms-flex-order: 1;
+  flex-grow: 1;
+  order: 1;
 
   color: $text-color;
   border: none;

h/static/styles/tags-input.scss

@@ -2,7 +2,6 @@
 // http://mbenford.github.io/ngTagsInput/gettingstarted
 
 @import "mixins/forms";
-@import "compass/css3/user-interface";
 @import "variables";
 
 tags-input {
@@ -56,7 +55,7 @@ tags-input {
     }
 
     .remove-button {
-      @include user-select(none);
+      user-select: none;
       display: block;
       position: absolute;
       top: 0;
@@ -110,8 +109,6 @@ tags-input .autocomplete {
   width: 100%;
   background-color: white;
   border: thin solid rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0 .3em .6em rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 0 .3em .6em rgba(0, 0, 0, 0.2);
   box-shadow: 0 .3em .6em rgba(0, 0, 0, 0.2);
 
   .suggestion-list {

h/static/styles/threads.scss

@@ -28,15 +28,11 @@ $thread-padding: 1em;
     margin-left: -$thread-padding;
   }
 
-  @-webkit-keyframes pulse {
-    10% { background-color: #ffc; }
-  }
   @keyframes pulse {
     10% { background-color: #ffc; }
   }
 
   &.pulse {
-    -webkit-animation: pulse 1200ms ease-in-out;
     animation: pulse 1200ms ease-in-out;
   }
 

h/static/styles/topbar.scss

-@import 'compass/css3/flexbox';
-
 @import 'base';
 @import 'mixins/responsive';
 
@@ -17,23 +15,16 @@
 }
 
 .topbar .inner {
-  @include display-flex;
-  @include flex-flow(row nowrap);
-  @include align-items(center);
-  @include justify-content(space-between);
-
-  /* IE10 support */
-  display: -ms-flexbox;
-  -ms-flex-align: center;
-  -ms-flex-flow: row nowrap;
-  -ms-flex-pack: justify;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
 
   height: 28px;
 }
 
 .topbar .inner .simple-search {
-  @include flex-grow(1);
-  -ms-flex: 1;  /* IE10 support */
+  flex-grow: 1;
   margin-right: .75em;
   overflow: hidden;
 }

package.json

@@ -44,7 +44,9 @@
     "unorm": "^1.3.3"
   },
   "devDependencies": {
+    "autoprefixer": "^6.0.3",
     "chai": "^3.2.0",
+    "es6-promise": "^3.0.2",
     "jscs": "^1.13.1",
     "karma": "^0.13.10",
     "karma-browserify": "^3.0.3",
@@ -57,6 +59,7 @@
     "mocha": "^1.20.1",
     "phantom-ownpropertynames": "^1.0.0",
     "phantomjs": "^1.9.7",
+    "postcss": "^5.0.6",
     "proxyquire": "^1.6.0",
     "proxyquire-universal": "^1.0.8",
     "proxyquireify": "^3.0.0",

scripts/postcss-filter.js

+#!/usr/bin/env node
+
+// post-process CSS using PostCSS
+// (https://github.com/postcss/postcss)
+//
+// This adds vendor prefixes using autoprefixer
+// https://github.com/postcss/autoprefixer
+
+require('es6-promise').polyfill();
+
+var autoprefixer = require('autoprefixer');
+var postcss = require('postcss');
+
+var inputCss = '';
+
+process.stdin.on('data', function (chunk) {
+  inputCss += chunk;
+});
+
+process.stdin.on('end', function () {
+  postcss([autoprefixer])
+    .process(inputCss)
+    .then(function (result) {
+      console.log(result.css);
+    });
+});
+