Dumb CSS generation

generateCss.js

// LESS version
var less = require("less");

var lessTask = {
	parseTime: function(source, options, callback) {
		less.parse(source, options, function(err, root, imports, options) {
		    if (err) { return callback(err); }

		    var result;
		    try {
		        var parseTree = new less.ParseTree(root, imports);
		    }
		    catch (err) { return callback(err); }

		    callback(null, parseTree);
		});
	},
	compileTime: function(parseTree, options, callback) {
		try {
			callback(null, parseTree.toCSS(options));
		} catch(e) {
			callback(e);
		}
	}
}

var lessString = "strong, b { color: @color1; }";
for(var i=0; i<14; i++){
	lessString += lessString;
}

var start = new Date();
lessTask.parseTime(lessString, { globalVars: { "@color1": "red" } }, function(e, tree){
	if(e) return console.log("Parse error", e);
	var parseDone = new Date();
	lessTask.compileTime(tree, { globalVars: { "@color1": "blue"} }, function(e, css) {
		if(e) return console.log("Compile error", e);
		var compileDone = new Date();
		console.log("LESS parsed in", parseDone - start, "and compiled in", compileDone - parseDone);
	});
});


// PostCSS version
var postcss = require('postcss');
var cssProperties = require('postcss-custom-properties');

var postCSSString = "strong, b { color: var(--color1) }";
for(var i=0; i<14; i++){
	postCSSString += postCSSString;
}

var start = new Date();
var tree = postcss.parse(postCSSString);
var parseDone = new Date();
var p = postcss([ cssProperties({ variables: { 'color1': 'red'}})]);
var css = p.process(tree).css;
var compileDone = new Date();
console.log("PostCSS parsed in", parseDone - start, "and compiled in", compileDone - parseDone, "sample output", css.length, css.slice(0,100));


// Straight JS version
var React = require('react/addons');
var _ = require('lodash');
var CSSPropertyOperations = require("react/lib/CSSPropertyOperations");

var toCSS = function(styleDescriptions) {
	return _.map(styleDescriptions, function(styles, selectors){
		var rules = CSSPropertyOperations.createMarkupForStyles(styles);
		return selectors + "{" + rules + "}";
	}).join();
};

var straightJS = function(colors) {
	var css = "";
	for(var i=0; i<Math.pow(2,14); i++) {
		css += toCSS({ "strong, b": { color: colors.color1 } });
	}
	return css;
}
var start = new Date();
var css = straightJS({ color1: "red" });
var end = new Date();
console.log("JS done in", end - start, "sample output:", css.slice(0,100));

Yes this is a dumb benchmark, because I didn't feel like manually writing a thousand lines of realistic css in three different languages. But it's something:

LESS parsed in 422 and compiled in 949
PostCSS parsed in 320 and compiled in 699
JS done in 184

Reduced the JS version about 40% by removing the use of _.map in the inner loop.