Add PostCss and Autoprefixer to LESS to CSS Grunt process task

nagendra421 · Aug 20, 2015 · b72b101 · b72b101
1 parent b4c433d
commit b72b101
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 81 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -6,6 +6,7 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-debug-task');
     grunt.loadNpmTasks('grunt-contrib-jshint');
     grunt.loadNpmTasks('grunt-contrib-copy');
+    grunt.loadNpmTasks('grunt-postcss');
     grunt.loadTasks('build/grunt/tasks');
 
     // support different test sets for public|private repo
@@ -227,6 +228,19 @@ module.exports = function(grunt) {
         less: {
             options: {
                 destDir: "<%= kendo.options.destDir %>",
+                autoprefixer: {
+                    browsers: ([
+                        "Explorer >= 7",
+                        "Chrome >= 21",
+                        "Firefox ESR",
+                        "Opera >= 15",
+                        "Android >= 2.3",
+                        "Safari >= 6.2.6",
+                        "ExplorerMobile >= 10",
+                        "iOS >= 6",
+                        "BlackBerry >= 10"
+                    ]).join(",")
+                }
             },
             compile: {
                 src: [ "styles/**/kendo*.less" ],

diff --git a/build/grunt/tasks/less.js b/build/grunt/tasks/less.js
@@ -1,11 +1,15 @@
 var PATH = require("path");
 var LESS = require("less");
 var CSSMIN = require("cssmin").cssmin;
+var postcss = require("postcss");
 
 module.exports = function(grunt) {
     grunt.registerMultiTask("less", "Build CSS styles", function(){
         var task = this;
-        var destDir = task.options().destDir;
+        var options = task.options();
+        var destDir = options.destDir;
+        var autoprefixer = require("autoprefixer-core")(options.autoprefixer);
+
         task.files.forEach(function(f){
             f.src.forEach(function(f){
                 var base = PATH.dirname(f);
@@ -14,15 +18,24 @@ module.exports = function(grunt) {
                     filename : PATH.basename(f),
                     syncImport: true
                 });
-                grunt.log.writeln("Compiling stylesheet: " + f);
+                grunt.log.writeln("Compiling LESS file: " + f);
                 p.parse(grunt.file.read(f), function(err, tree){
                     try {
                         var css = tree.toCSS();
-                        grunt.file.write(PATH.join(destDir, f.replace(/\.less$/, ".css")), css);
-                        var cssmin = CSSMIN(css);
-                        grunt.file.write(PATH.join(destDir, f.replace(/\.less$/, ".min.css")), cssmin);
+                        postcss([ autoprefixer ]).process(css).then(function (result) {
+                            result.warnings().forEach(function (warn) {
+                                console.warn(warn.toString());
+                            });
+
+                            var cssFile = f.replace(/\.less$/, ".css");
+                            grunt.log.writeln("Autoprefixing CSS file: " + cssFile);
+
+                            grunt.file.write(PATH.join(destDir, cssFile), result.css);
+                            var cssmin = CSSMIN(result.css);
+                            grunt.file.write(PATH.join(destDir, f.replace(/\.less$/, ".min.css")), cssmin);
+                        });
                     } catch(ex) {
-                        grunt.log.error("Can't LESS-compile " + f);
+                        grunt.log.error("Can't process LESS file " + f);
                         console.log(ex);
                     }
                 });