CodeKit 2 - compiling less with empty lines in code - css

Question

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

Answer 1

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