Rebasing URL's doesn't work for certain situations

[chris-monahan]

I am trying to use clean-css in order to bundle CSS from a variety of sources including Font-Awesome. In order for these to work then I need to import the web fonts.

The default rebase is not what I want because the original CSS url's reference the original files in ./node_modules which will not be distributed in the final package. Instead the font-files have been copied to another directory (/dist/fonts/). By setting {'rebase': false} I can nearly get what I want however now the original relative paths of e.g "../fonts/fontawesome-webfont.woff?v=4.7.0" now don't work for us.

In order to get them to work I can see two real options.

1. Move all of the fonts out of /dist/fonts to /fonts .

While this will work for this specific instance it is messy and is completely dependent on how the original package was structured. We are ceding control of how our files are arranged to third party libraries, and there is no guarantee they will even be consistent. (I.e. this will only work because font-awesome uses ../fonts/ as their source directory. If another library used something else, we would need to use that).

2. Use arbitrary property transformations on all src properties

If necessary this will be what I try next. While I think this will work for us it seems like an approach that could get unnecessarily complex and brittle when you start dealing with things like CSS urls in other contexts and in more complex properties etc. I would rather a better solution.

Seems like this is something that should be possible in CleanCSS - an ability to rewrite URL's in some way other than relative rebasing. A simple absolute prefix would work for us, where you say "take the file component and stick it on the end of a fixed path", but as this could be more complicated I could see there being value in having some more flexibility. Perhaps a way of limiting absolute paths to only certain properties, or a callback to filter URL's like what is currently used for arbitrary property transformations, except specifically for URL's and handling some of the complexity for you.

Environment

• clean-css version - npm ls clean-css: clean-css@4.1.11
• node.js version - node -v:v8.11.0
• operating system: Windows 10

Configuration options

using gulp
...
.pipe(cleanCSS({rebase: false})) /*though obviously this wouldn't be the configuration we would use*/

[jakubpawlowicz]

Could be related to #1029.

[jakubpawlowicz]

Won't fix as clean-css is going into maintenance mode.

[binyamin]

@jakubpawlowicz Thanks for your work here, You built a great tool. According to the readme, CleanCSS could receive occasional bug-fixes. Shouldn't this qualify? Currently, the rebaseTo option seems to do nothing.

[jakubpawlowicz]

Hey @binyamin. It depends if anyone is able to suggest an easy solution to this, and I am not sure if there's any. @chris-monahan suggested "take the file component and stick it on the end of a fixed path" and that could be an easy solution, perhaps even via a plugin instead of a change to clean-css itself. Is it something that would work for you?

[binyamin]

@jakubpawlowicz Yes, I think so. You could even normalize the path afterward, using path.normalize. I would check if it's an absolute path first, though. Also, I feel like this issue should be reopened until it's fixed.

[jakubpawlowicz]

I will reopen it but I don't have capacity to fix it, so PRs are more than welcome.

Idea - clean-css v5+ has a plugin interface, so I wonder if it's doable via a plugin instead.