csslesscodekit

CodeKit 2 - compiling less with empty lines in code


I'm using Codekit 2.1.8 to compile my LESS files. In my LESS files I have empty lines and I want to have them in compilied CSS file too, but Codekit seems to delete them. I can't find any options in Codekit related to this issue.

Example:

LESS file:

p {
    font-size: 14px;
}



a {
    color: red;
}

Compilied CSS file with Codekit:

p {
    font-size: 14px;
}
a {
    color: red;
}

Solution

  • When using the default command line or client side you can easily add your own plugins since v2. Less preserves /**/ comments.

    Add in your LESS code for instance /*3*/ for 3 newlines.

    Now write the plugin, call this file less-plugin-add-newlines.js:

    var getCommentsProcessor = require("./comments-processor");
    
    module.exports = {
        install: function(less, pluginManager) {
            var CommentsProcessor = getCommentsProcessor(less);
            pluginManager.addPostProcessor(new CommentsProcessor());
        }
    };
    

    Than write the comments-processor.js:

    String.prototype.repeat = function( num )
    {
        return new Array( num + 1 ).join( this );
    }
    
    
    module.exports = function(less) {
        function CommentProcessor(options) {
            this.options = options || {};
        };
    
        CommentProcessor.prototype = {
            process: function (css) {
                var r = new RegExp("(\\/\\*)([0-9]+)(\\*\\/)","g");
                return css.replace(r,function(m1,m2,m3){ return "\n".repeat(m3*1-1); });
            }
        };
    
        return CommentProcessor;
    };
    

    less

    p1 {
    p:3;
    }
    /*3*/
    p2 {
    p:3;
    }
    /*4*/
    p2 {
    p:3;
    }
    

    The preceding will compile into when running lessc --plugin=less-plugin-add-newlines.js index.less:

    p1 {
      p: 3;
    }
    
    
    
    p2 {
      p: 3;
    }
    
    
    
    
    p2 {
      p: 3;
    }