Wrong image path with LESS

[tleunen]

Hi,

I created an issue report in the Grunt spritesmith repo but I think it's better here as the project uses json2css to convert in LESS format.

I'm using the LESS library in my development environment as a client side system, this allows me to change the less files without recompiling them but I encounter a problem with the background path.

When I inspect the element, the path looks like this: background-image: url(http://myserver.com/css/'../images/Atlas.png');

As you can see, there are quotes around the "image name" so the value is incorrect.

I don't know what could cause this issue. Does anyone have an idea?

[tleunen]

It seems LESS, when using as a client side system, automatically applies the root base url if he detects that the path is not absolute, and as you can see in my previous message, it creates a little bug ^^

As the quotes are optionals in the url (source), would it be possible to remove them?

.sprite-image(@sprite) {
  @sprite-image: ~`"@{sprite}".split(', ')[6].slice(1, -2)`;
  background-image: url(@sprite-image);
}

[twolfson]

Ah, that is pretty interesting. This is related to Ensighten/grunt-spritesmith#23

I am up for removing the quotes as long as we introduce escaping of sprite-image URLs since technically, you are allow to have a ) in your URL.

[tleunen]

Yep I see. I should have a look at the LESS library for the client-side instead and see if I can see why it append the root url.

[tleunen]

I've tested the code in the other thread.

 .sprite-image(@sprite) {
    @sprite-image: ~`"@{sprite}".split(', ')[6].slice(1, -2)`;
    background-image: url("@{sprite-image}");
  }

And this give me the right output, right path with double quotes. I'm not familiar enough with LESS to know exactly why this work. I also tried to replace all the single quotes by double quotes and vice versa in the less template, but it doesn't work either so it doesn't seem to be something wrong with the single quotes that are not handle properly by LESS.

[twolfson]

Very strange indeed. I think escaping the string remains as the appropriate solution.

As for implementation, we should have a new key for templates to hook in to escapedImage.

Aside: If we ever need a encodeURIComponent flavor, we can use encodedImage.

[twolfson]

Sorry for the very long delay on this. I have released the update in json2css@3.1.0.

[tleunen]

Nice thanks! I was using my quick fix because I didn't have the time to make a 'good' fix for this one so thanks a lot.