Does not change relative references to background-image in stylesheet.

[mikelittman]

I have a LESS stylesheet that I compile and minify in a subsequent gulp task.
It appears that revision is running on the file as there is a changed filename in my build target, but the reference stays the same.

Does this plugin not support relative image references?
Here is my image path ../../assets/img/root/tile-one/Homepage_Buildings_Horizontal_Tile.png

[smysnk]

Can you post your gulp task and folder structure around these files. Also how is the image referenced?

[mikelittman]

Yup!
Thanks for the quick response.

https://gist.github.com/mikelittman/1ff88f2aabc4508ff7ca

Sorry, in regards to image reference, here is the area of the LESS stylesheet:

.faded{
        z-index: 9;
        background: url("@{relative-img-path}/assets/img/root/tile-one/Homepage_Buildings_Horizontal_Tile.png") repeat-x;
        height: 20px;
        position: absolute;
        bottom: 9px;
        left: 0;
        width: 100%;
    }

Which compiles down to:

.content-container .content-box.splash .faded {
  z-index: 9;
  background: url("../../assets/img/root/tile-one/Homepage_Buildings_Horizontal_Tile.png") repeat-x;
  height: 20px;
  position: absolute;
  bottom: 9px;
  left: 0;
  width: 100%;
}

[mikegleasonjr]

👍 Talking about LESS is just noise in this discussion.

If you have the following structure:

css/app.css
images/image.jpg
index.html

And you reference image.jpg in app.css like: background: url('../images/image.jpg')

The reference won't be replaced. The resulting css/app.hash.css will still contain background: url('../images/image.jpg')

Just for a quick test, if you remove the relative path ../ in the css (which will 404 in the browser), the reference is replaced in the css.

I have looked at the options and can't find something where I could override the search and replace function.

Any ideas?

[island205]

@mikegleasonjr background: url('../images/image.jpg') could work, i believe.

[mikegleasonjr]

@island205 Hello and thanks for your interest in this issue...

But I don't quite understand your comment (sorry). Do you meant to copy paste something else? background: url('../images/image.jpg') is what I have in my CSS and the reference is not being replaced by the revved one (like background: url('../images/image-a1b2c3.jpg')) because there's ../ in front.

Like your case in your javascript file in your issue (2nd point). I ended up overriding referenceToRegexs like you, so thanks for workaround btw :)

[island205]

What i mean:

If you have the following structure:

css/app.css
images/image.jpg
index.html

And you reference image.jpg in app.css like:background: url('../images/image.jpg')

The reference will be replaced.

[mikegleasonjr]

I'm afraid it's not...

On Wed, Dec 9, 2015, 19:15 Zhi Cun [email protected] wrote:

What i mean:

If you have the following structure:

css/app.css
images/image.jpg
index.html

And you reference image.jpg in app.css like:background:
url('../images/image.jpg')

The reference will be replaced.

—
Reply to this email directly or view it on GitHub
#88 (comment).

[mikegleasonjr]

I spyed the function referenceToRegexs and put logs at the end of the function:

console.log(reference.path)
console.log(regExps)

Which output something like:

images/login/bg.jpg
[ /([^a-zA-Z0-9\.\-\_\/])(images\/login\/bg)(\.jpg)([^a-zA-Z0-9\.\-\_\/]|$)/g ]

And if I take this regex and try to match it with what's in the CSS we have (node REPL):

> '[...]background:url("../images/login/bg.jpg") no-repeat[...]'.match(/([^a-zA-Z0-9\.\-\_\/])(images\/login\/bg)(\.jpg)([^a-zA-Z0-9\.\-\_\/]|$)/g)
null

So no, the reference is not replaced in the CSS.

[island205]

It look like a bug, i will try to figoure out it.