As far as I know, Less doesn't have the ability to utilize user-defined functions. Stylus, however, does. So if you're willing to hop onto an alternate CSS preprocessor, then there is great fun to be had! (Stylus is really very simliar to Less, and it shouldn't take much to switch to it. Plus connect-assets already supports Stylus, so it should plug into your environment easily.)
server.js
var fs = require('fs');
var stylus = require('stylus');
stylus(fs.readFileSync("styles.styl", 'utf8')) //load stylus file
.define("versionedFile", versionedFile) //add our custom function to the stylus env
.render(function(err, css){ //render!
if (err) {
throw err;
}
fs.writeFileSync("styles.css", css); //write the compiled css to a .css file
});
//our custom function
function versionedFile(filename) {
... lookup versioned file of filename ...
return "versionedFilename.png"
}
styles.styl
.image-block {
background-image: url(versionedFile('unversionedFilename.png')); //this is how we use our custom function
}
Which will compile into:
styles.css
.image-block {
background-image: url("versionedFilename.png"); //hooray!
}
