a example on user functions

[lukeapage]

and how to add to node?

less/less.js#129

[giuseppeg]

Anything new on this side?
I am fiddling a bit and my function is being copied but not "registered".

less = {
  functions: {
    pxToRem: function (value, context) {
      var dimensionObj = less.tree.functions.unit({
        value: value
      });

      return (dimensionObj.value / context) + "rem";
    }
  }
};

It is copied to less.tree.functions.pxToRem but when I call it from a less file is not parsed.

Also, could someone explain me how to use the native functions from a user function?
Stuff like this.unit("20px", "rem"); don't seem to work.

[lukeapage]

@giuseppeg

this should be equal to less.tree.functions.. why doesn't this.unit work?

If you look at the source code https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js#L229

the unit function accepts a value node and a unit (string).

Your problem might be because of casing. Try renaming it pxtorem - I have a feeling functions might be taken to lower case before being looked up. It might be nice to try with the non lower cased first to support casing in user functions (or else document this!).

let us know if you get success.

[giuseppeg]

@lukeapage thanks for the reply.
switching to lowercase doesn't seems to make any difference. The function is not being invoked at all therefore the compiled css would be font-size: pxtoem(16px); for instance.

Regarding the unit you are right, this.unit works (I don't know why it wasn't or what I did wrong).
However when I pass a unit (string) it fails:

TypeError: Object rem has no method 'toCSS'

And it make sense, infact unit is clrearly an object

unit: function (val, unit) {
    return new(tree.Dimension)(val.value, unit ? unit.toCSS() : "");
},

[lukeapage]

are you in browser or node?

[giuseppeg]

Browser, less 1.4.0 beta

[lukeapage]

our unit tests test this works.. (and they pass)

https://github.com/cloudhead/less.js/blob/master/test/browser/runner-main.js#L1

are you setting less before including the script (assume so otherwise it wouldn't be copied to the tree).

I can only suggest you debug and work out why it isn't finding your function. put a breakpoint here

https://github.com/cloudhead/less.js/blob/master/lib/less/tree/call.js#L35

[lukeapage]

p.s. did you set for function definition to lowercase or just the call or both? Its the definition that is important.

[giuseppeg]

Prepare the facepalm emoticon... there was a typo in the function name.
Anyway you were right! The function name has to be in lower case (this should be documented in my opinion).

here is my working function:

pxtorem: function (value, context) {
  var unitless;

  if (typeof context !== "number") {
    context = 10;
  }

  unitless = this.unit(value);
  return new(less.tree.Dimension)((unitless.value / context), "rem");
}

Anything I could have done better?
Sorry if I have wasted your time and thanks again.

[lukeapage]

it should be documented, you are right.

context might be a number, but it also might be a dimension, so you would need to do context = context.value || context;

[giuseppeg]

+1 for the dimension thing.
Should it be:

if (typeof context === "undefined") {
    return value;
}

context = context.value || context;

instead?

[lukeapage]

yes... depends how properly you want to do things. the function file is a good place to work out what less does

getting a number from an argument...

https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js#L505

using defaults...

https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js#L236