feat(grunt): add autoprefix with postcss

closes #4250

package.json

@@ -11,6 +11,7 @@
   },
   "devDependencies": {
     "angular2": "2.0.0-beta.0",
+    "autoprefixer": "^6.3.3",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.3",
     "expect.js": "~0.2.0",
@@ -33,6 +34,7 @@
     "grunt-karma": "~0.12.1",
     "grunt-ng-annotate": "^1.0.1",
     "grunt-notify": "^0.4.3",
+    "grunt-postcss": "^0.8.0",
     "grunt-sass": "^1.1.0",
     "grunt-string-replace": "~1.2.1",
     "grunt-systemjs-builder": "^0.2.5",

public/sass/components/_panel_graph.scss

@@ -279,29 +279,12 @@
   top: 50%;
   left: -5px;
   transform: rotate(-90deg);
-  -o-transform: rotate(-90deg);
-  -ms-transform: rotate(-90deg);
-  -moz-transform: rotate(-90deg);
-  -webkit-transform: rotate(-90deg);
   transform-origin: left top;
-  -o-transform-origin: left top;
-  -ms-transform-origin: left top;
-  -moz-transform-origin: left top;
-  -webkit-transform-origin: left top;
 }
 
 .right-yaxis-label {
   top: 50%;
   right: -5px;
-
-  -webkit-transform: rotate(90deg);
-  -webkit-transform-origin: right top;
-  -moz-transform: rotate(90deg);
-  -moz-transform-origin: right top;
-  -ms-transform: rotate(90deg);
-  -ms-transform-origin: right top;
-  -o-transform: rotate(90deg);
-  -o-transform-origin: right top;
   transform: rotate(90deg);
   transform-origin: right top;
 }

public/vendor/css/spectrum.css

@@ -148,21 +148,11 @@ License: MIT
 
 /* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
 .sp-sat {
-    background-image: -webkit-gradient(linear,  0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
-    background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
-    background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
-    background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
-    background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
     background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
     filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
 }
 .sp-val {
-    background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
-    background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
-    background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
-    background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
-    background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
     background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
     filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');

public/vendor/css/timepicker.css

@@ -101,12 +101,7 @@
 .datepicker table tr td.today.disabled,
 .datepicker table tr td.today.disabled:hover {
   background-color: #fde19a;
-  background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
-  background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
-  background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
-  background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
-  background-image: linear-gradient(top, #fdd49a, #fdf59a);
+  background-image: linear-gradient(to top, #fdd49a, #fdf59a);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
   border-color: #fdf59a #fdf59a #fbed50;
@@ -151,12 +146,7 @@
 .datepicker table tr td.active.disabled,
 .datepicker table tr td.active.disabled:hover {
   background-color: #006dcc;
-  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
-  background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
-  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
-  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
-  background-image: linear-gradient(top, #0088cc, #0044cc);
+  background-image: linear-gradient(to top, #0088cc, #0044cc);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
   border-color: #0044cc #0044cc #002a80;
@@ -223,12 +213,7 @@
 .datepicker table tr td span.active.disabled,
 .datepicker table tr td span.active.disabled:hover {
   background-color: #006dcc;
-  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
-  background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
-  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
-  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
-  background-image: linear-gradient(top, #0088cc, #0044cc);
+  background-image: linear-gradient(to top, #0088cc, #0044cc);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
   border-color: #0044cc #0044cc #002a80;

tasks/default_task.js

@@ -2,7 +2,16 @@
 module.exports = function(grunt) {
   'use strict';
 
-  grunt.registerTask('css', ['sass', 'concat:cssDark', 'concat:cssLight', 'styleguide', 'sasslint']);
+  grunt.registerTask('css', [
+    'sass',
+    'concat:cssDark',
+    'concat:cssLight',
+    'styleguide',
+    'sasslint',
+    'postcss'
+    ]
+  );
+
   grunt.registerTask('default', [
     'jscs',
     'jshint',

tasks/options/postcss.js

@@ -0,0 +1,21 @@
+module.exports = function(config) {
+
+  return {
+    options: {
+      map: true, // inline sourcemaps
+
+      // or
+      map: {
+        inline: false, // save all sourcemaps as separate files...
+        annotation: 'dist/css/maps/' // ...to the specified directory
+      },
+
+      processors: [
+        require('autoprefixer')({browsers: 'last 2 versions'}), // add vendor prefixes
+      ]
+    },
+    dist: {
+      src: '<%= genDir %>/css/*.css'
+    }
+  }
+};