Merge pull request #2534 from robertknight/autoprefix_css

Use autoprefixer to add vendor prefixes to CSS

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;
@@ -133,6 +128,7 @@ $group-list-width: 270px;
 
   .group-details {
     margin-right: 20px;
+    flex-shrink: 1;
   }
 
   .share-link-container {

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,8 +29,6 @@ body {
 }
 
 p {
-  -webkit-hyphens: auto;
-     -moz-hyphens: auto;
   hyphens: auto;
 
   & + p {

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);
+    });
+});
+