cloudhead/less.js — Issue #657: Unable to use a variable in a url() with dynamic stylesheet loading
Author: paulogaspar7
Created: 2012-02-23 13:11:52+00:00
State: open

At twitter bootstrap you have a couple of variable used to fill in url()s.

They are declared here:
* https://github.com/twitter/bootstrap/blob/master/less/variables.less#L58

and look like this:

// Sprite icons path
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";

And they are used here:
* https://github.com/twitter/bootstrap/blob/master/less/sprites.less#L24

on a bit of code looking like this:

background-image: url(@iconSpritePath);
...
}
.icon-white {
background-image: url(@iconWhiteSpritePath);
...

If you dynamic load it using:
` `
` `

... with less 1.2.2 you get:

Cannot call method 'charAt' of undefined
in sprites.less
at Object. (http://localhost:8000/assets/js/less-1.2.2.js:2873:47)
at Object. (http://localhost:8000/assets/js/less-1.2.2.js:766:28)
...
at Object.rule (http://localhost:8000/assets/js/less-1.2.2.js:1157:33)

...which refers to:
https://github.com/cloudhead/less.js/blob/master/dist/less-1.2.2.js#L2873

where you can find this line of code from the tree.URL() function:

val.value = paths[0] + (val.value.charAt(0) === '/' ? val.value.slice(1) : val.value);

So, apparently the variable was not resolved.

Notice that it all works with lessc!!!

This was the subject of issue #623 which was closed without being solved.
(Possibly because @Anahkiasen turned to using lessc???)

Anahkiasen reported he no longer has an error when he quotes the variables, but not having an error does not means the variables are now resolved. What happens when you replace this less code:

background-image: url(@iconSpritePath);

...by the quoted variant which Anahkiasen mentions on
* https://github.com/cloudhead/less.js/issues/623#issuecomment-4134237

...is this:

background-image: url("@iconSpritePath");

...is that you simply get this CSS output:

background-image: url("@iconSpritePath");

So, no error but no proper variable resolution either since Less just interprets the quoted variant as a literal instead of as a variable.