Using gulp-clean-css, font file paths specified in url() setting a wrong path

[angularPublic]

Hi,

With the recent changes, gulp build that using gulp-clean-css having issues with url() path values.
Example, this below
url('../fonts/glyphicons-halflings-regular.woff2')
is converted to below,
url('scripts/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2')
Where, scripts is my library folder.
in the minified css.

I guess, this related to rebaseTo changes?

[FcoJavierSainz]

I saw the same problem with images
was changed from

background-image: url('../images/load.png');

background-image:url(images/load.png)

[vishnu4]

same issue here. important to note that i'm using gulp-clean-css w/out ANY parameters, if that helps. no rebase/relativeto/whatever.

[jonyeezs]

I too have this issue. But i believe I've found the issue.

TL;DR: clean-css option update -> cleanCSS({rebase: false})

Here's why...

in clean-css v4.0:

root, relativeTo, and target options are replaced by a single rebaseTo option - this means that rebasing URLs and import inlining is much simpler but may not be (YMMV) as powerful as in 3.x;

The rebase is defaulted to true

rebase - controls URL rebasing; defaults to true;

this looks like it will get the relative path of the project and rebase it, which is what @angularPublic and I are experiencing.

I'm guessing all of us have the same pipe for this:

• gulp.src from a lib/src/app/scripts folder
  • cleanCSS
    • gulp.dest to a distributed folder

at the point of setting the url() it's getting the relative path of the gulp.src and rebasing it on that, which by our build step is not desired.

rebaseTo - .., defaults to the current directory;

So don't rebase and let the browser handle the relative path.

edit: I haven't look at code, this is all just from the README.md...and seems to work for me.

[tiberiuzuld]

What @jonyeezs said rebase: false fixed my issue

[scniro]

Interesting! Sorry about that everyone. Perhaps I can simply default rebase to false if no option provided. Should be an easy enough fix. I can publish it up very soon.

[scniro]

All set! Thanks everyone for being so attentive to this and to @jonyeezs for doing most of the heavy lifting. 3.3.1 is out and should be on npm also. Please drop a comment here, someone, when you get a moment to confirm if all is well so I can close this out.

[vishnu4]

That fixed it for me, you can mark closed. Thanks!

[jonyeezs]

Hi @scniro thanks for looking into it.

That sounds like it'll solve the problem for the peeps in here.
But it might be going against the grain of clean-css, ie silently changing the defaults.

Definitely fixes for the uninitiated, but for those who are more familiar with clean-css, may find this an issue.

Perhaps make a note about the breaking changes and rebase default (which looks to have been introduce in version 3.0.0 and since now matters due to commit 92ddf63)?

thoughts?

[scniro]

I think the default behavior was just completely broken while in the gulp pipeline. We're specifying files via gulp.src([...]) but in order to get the rebasing to work I need to pass the files in that keyed object with the file path as you can see in the changeset.

However, simply because we're in the gulp pipeline the file paths we glob in aren't exact to what they really are. In this case, I think it's okay. After all, if no rebaseTo option is passed, the file in equals the file out. In other words...

// in
.whatever { background:url(../../avatar.png) }

gulp => no rebaseTo

//out
 .whatever { background:url(../../avatar.png) }

This seems desirable in all ways. Before the fix this morning, the resulting rule looked something like

//before fix
 .whatever { background:url(C:/this/is/my/actual/gulp/file/path/avatar.png) }

Which, I think will always be the unintentional result. However, should the situation every arise where this is somehow desirable, I can surface rebase as an option. I can get that pushed up later today, however it's looking like I'll still default it to false, though now with an option.

[angularPublic]

@scniro . Thanks for looking into this.
After the fix for defaulting rebase to false fixed my case. I mean, the original issue is solved now. You shall close the bug.

Introducing rebase as an optional param would be nice.
Good work buddy! Have a nice day!

[brian-lamb-software-engineer]

Thanks for this, I was having issues almost same as OP, The correct url path ../fonts/font-awesome-webfont.woff2?v=4.7.0 was being transformed to ../../../fonts/font-awesome-webfont.woff2?v=4.7.0.

I was only having the problem when running the gulp --production switch, and not just gulp.

solved it with .pipe(config.production ? plugins.cleanCss({rebase: false}) : plugins.util.noop())

[Suja-Uddin]

@jonyeezs you saved my life! just added cleanCSS({rebase: false}) and solve my two days problem :)

I have been using gulp with clean-css and this is my file structure :

before :

• app->css->styles->components-rounded.min.css ( inside this file url: ../portlet-remove-icon.png)

• app->images->portlet-remove-icon.png

after :

• app->css->components-rounded.min.css (now url: ../../portlet-remove-icon.png)

• app->images->portlet-remove-icon.png

After setting {rebase: false}, portlet icon url is kept as before 👍