less.render function return [object HTMLInputElement] when parsing less

[AjithR04]

I have used less.js version 2.5.1 in my application and used javascript variables inside the less document.

script.js
var headercolor = "#dddddd";

main.less
@header-color: ~headercolor;

control.less
@import "main.less";
.headercolor{
color: @header-color;
}

Its working perfectly on the web page, but when I have tried to parse the less to CSS from the javascript codes using less.render its not correctly parse the CSS output. It parse the CSS value as [object HTMLInputElement].

less.render(lessinput).then(function (output) {
var lessCSS = output.css;
// Here I get [object HTMLInputElement] in the output.css like below CSS
.headercolor{
color: [object HTMLInputElement];
}
});

Is there anything I missed to parse the CSS from script side?

FYI previously I have used 1.3.3 version less.js and its working perfectly by using parser.parse with toCSS function.

[AjithR04]

I saw the changes for render function from the below link.

https://github.com/less/less.js/blob/master/lib/less/render.js

I have also tried to use old parser and toCSS functions by using below codes but it also returns the same result.

less.render(lessinput, {}, function (err, output) {
var lessCSS = output.css;
});

[seven-phases-max]

Please use backticks to format your code.

---

Are you sure you don't have anything like var headercolor = $('.headercolor'); or so anywhere else in your scripts? Because this is actually the only way you can get such result.
(Demo - there your snippet is working as expected).

---

Either way, even if you will find your problem and it will work again, I don't think that passing data to Less via global JS variables is ever a good idea. You know neither context nor the time inline JavaScript statements are evaluated in, so a code like this is just asking for troubles.

To pass an arbitrary data to your Less code use globarVars/modifyVars options. Like this for example.

[AjithR04]

Thanks for your great help. Yes my javascript variable gets html element instead of its input value which is the cause of the issue. I have correct it and its working perfectly right now. Thanks again :-)