plugin-ins functions

[guillaume86]

Hi,

It's not really a problem but it was the only place I found to ask...
I was wondering if there's a nice way to "plugin" new functions into the less.js "tree.functions" ?
For the moment i've hacked into the source, not very nice...

For the record, i need a rgbstr (Color => RGB String) function to make a bg_image_gradient mixin,
something like this:

.bgimggrad (@startcolor: #ccc, @Stopcolor: #ccc, @SiZe: 50) {
background: @Stopcolor e(%("url('/images/grad/%s/%s/%s')",rgbstr(@startcolor),rgbstr(@Stopcolor),@SiZe)) 0 0 repeat-x;
}

that returns this:
background: #ccc url("/images/grad/204,204,204/204,204,204/50") 0 0 repeat-x;

to use with a dynamic gradient generator like this one: http://djangosnippets.org/snippets/787/

Guillaume

[cloudhead]

Actually you should just be able to add it directly, after including less:

less.tree.functions.rgbstr = function () { return new(tree.Anonymous)("hello world") };

Try it, it should work.

[guillaume86]

Well, i don't know why, but it doesn't work, the output is still "rgbstr(#ccc)".
Here's my function (it's working when written inside the object):

less.tree.functions.rgbstr = function (color) {
var str = parseInt(color.rgb[0]) + ',' + parseInt(color.rgb[1]) + ',' + parseInt(color.rgb[2]);
return new(less.tree.Quoted)('"' + str + '"', str);
};

[guilhermeaiolfi]

Same here. Any tips?

[fny]

The line return new(less.tree.Quoted)('"' + str + '"', str); gives you a quoted object, so you'll need to call an attribute or method to get a value. Here's a brief annotation for the source file for Quoted lib/less/tree/quoted.js.

// [1] Defines Quoted attributes; note the params
tree.Quoted = function (str, content, escaped, i) {
    this.escaped = escaped;
    this.value = content || '';
    this.quote = str.charAt(0);
    this.index = i;
};

// [2] Quoted.toCSS();
tree.Quoted.prototype = {
    toCSS: function () {
        ...
    },

    // [3] Build me this biznass when no method/attribute is called
    eval: function (env) {
        ...
        // [4] Here's what you returned
        return new(tree.Quoted)(this.quote + value + this.quote, value, this.escaped, this.index);
    }
};

Take this dummy mockup:

less.tree.functions.rgbstr = function (color) {var str = color; return new(less.tree.Quoted)('"' + str + '"', str,true,1);};       

Calling less.tree.functions.rgbstr("hotpink") returns this:

{
    "escaped": true,
    "eval": function (b) {
        var c = this,
            d = this.value.replace(/`([^`]+)`/g, function (d, e) {
                return (new a.JavaScript(e, c.index, !0)).eval(b).value
            }).replace(/@\{([\w-]+)\}/g, function (d, e) {
                var f = (new a.Variable("@" + e, c.index)).eval(b);
                return "value" in f ? f.value : f.toCSS()
            });
        return new a.Quoted(this.quote + d + this.quote, d, this.escaped, this.index)
    },
    "index": 1,
    "quote": "\"",
    "toCSS": function () {
        return this.escaped ? this.value : this.quote + this.value + this.quote
    },
    "value": "hotpink"
}

Just ask for what you want and its yours: less.tree.functions.rgbstr("hotpink").value // "hotpink"

[lukeapage]

Might be nice to put this on the wiki?

[matthew-dean]

Absolutely. The more we could document about the inner workings of the LESS parser, the easier it would be for other JS developers to contribute patches. The ability to do this was news to me until you labeled it.

[ixti]

Is it possible to pass some kind of "extra" object into less during parsing stage that could be used then by function? I want to have a helper asset_path and asset_data_uri in my less file, so now I know how to add helpers, but this helpers are "dependant" on another object (Mincer.Environment in my case and which might not be uniq or singleton).

[lukeapage]

more info is now on the homepage - setting less.functions before including less will include those functions into less.

would be nice to add an example, will add this request to lesscss.org - less/old-lesscss.org#54