Merge pull request #617 from yahoo/post-css

Migrate to post-css for browser prefixes

Gruntfile.js

@@ -104,6 +104,19 @@ grunt.initConfig({
         }
     },
 
+    // -- PostCSS Config --------------------------------------------------------
+
+    postcss: {
+        options: {
+            processors: [
+                require('autoprefixer')({browsers: ['last 2 versions', 'ie >= 8', 'iOS >= 6', 'Android >= 4']})
+            ]
+        },
+        dist: {
+            src: 'build/*.css'
+        }
+    },
+
     // -- CSSLint Config -------------------------------------------------------
 
     csslint: {
@@ -258,6 +271,7 @@ grunt.loadNpmTasks('grunt-contrib-cssmin');
 grunt.loadNpmTasks('grunt-contrib-compress');
 grunt.loadNpmTasks('grunt-contrib-watch');
 grunt.loadNpmTasks('grunt-css-selectors');
+grunt.loadNpmTasks('grunt-postcss');
 grunt.loadNpmTasks('grunt-pure-grids');
 grunt.loadNpmTasks('grunt-stripmq');
 
@@ -275,6 +289,7 @@ grunt.registerTask('build', [
     'concat:build',
     'clean:build_res',
     'css_selectors:base',
+    'postcss',
     'cssmin',
     'license'
 ]);

package.json

@@ -11,6 +11,7 @@
   },
   "files": "build/",
   "devDependencies": {
+    "autoprefixer": "^6.3.1",
     "bower": "^1.3.7",
     "grunt": "^1.0.1",
     "grunt-cli": "^1.2.0",
@@ -22,6 +23,7 @@
     "grunt-contrib-cssmin": "^1.0.2",
     "grunt-contrib-watch": "^1.0.0",
     "grunt-css-selectors": "^1.1.0",
+    "grunt-postcss": "^0.7.1",
     "grunt-pure-grids": "^1.0.0",
     "grunt-stripmq": "0.0.6"
   },

src/buttons/css/buttons-core.css

@@ -8,12 +8,7 @@
     text-align: center;
     cursor: pointer;
     -webkit-user-drag: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
 

src/buttons/css/buttons.css

@@ -17,12 +17,8 @@
 .pure-button:hover,
 .pure-button:focus {
     /* csslint ignore:start */
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0);
+    filter: alpha(opacity=90);
     /* csslint ignore:end */
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
-    background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
-    background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
-    background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
     background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
 }
 .pure-button:focus {
@@ -42,11 +38,8 @@
     border: none;
     background-image: none;
     /* csslint ignore:start */
-    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
     filter: alpha(opacity=40);
     /* csslint ignore:end */
-    -khtml-opacity: 0.40;
-    -moz-opacity: 0.40;
     opacity: 0.40;
     cursor: not-allowed;
     box-shadow: none;

src/forms/css/forms.css

@@ -28,8 +28,6 @@ so we can ignore the csslint warning.
     box-shadow: inset 0 1px 3px #ddd;
     border-radius: 4px;
     vertical-align: middle;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
 
@@ -43,8 +41,6 @@ since IE8 won't execute CSS that contains a CSS3 selector.
     border: 1px solid #ccc;
     box-shadow: inset 0 1px 3px #ddd;
     border-radius: 4px;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
 

src/grids/css/grids-core.css

@@ -24,24 +24,12 @@
     */
     font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
 
-    /*
-    Use flexbox when possible to avoid `letter-spacing` side-effects.
+    /* Use flexbox when possible to avoid `letter-spacing` side-effects. */
+    display: flex;
+    flex-flow: row wrap;
 
-    NOTE: Firefox (as of 25) does not currently support flex-wrap, so the
-    `-moz-` prefix version is omitted.
-    */
-
-    display: -webkit-flex;
-    -webkit-flex-flow: row wrap;
-
-    /* IE10 uses display: flexbox */
-    display: -ms-flexbox;
-    -ms-flex-flow: row wrap;
-    
     /* Prevents distributing space between rows */
-    -ms-align-content: flex-start;
-	-webkit-align-content: flex-start;
-	align-content: flex-start;
+    align-content: flex-start;
 }
 
 /* IE10 display: -ms-flexbox (and display: flex in IE 11) does not work inside a table; fall back to block and rely on font hack */

src/menus/css/menus-core.css

@@ -1,7 +1,5 @@
 /*csslint adjoining-classes: false, box-model:false*/
 .pure-menu {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
 }