Incorrect image paths

[roelvanduijnhoven]

For a project I am developing I want to bundle two CSS files from seperate directories into a file in a third directory. Each of these two source CSS files reference to images relative to their working directory. Obviously the paths are no longer correct after they have been bundled and stored in a third location.

I would expect clean css to rewrite the url's so the change of location is reflected. This could be either done by:

• Rewriting the URLs to be absolute
• Rewriting the URLs so the relative path is updated

How can I accomplish this task? Or am I tackling the problem of bundling external libraries in a wrong way? Is the solution perhaps to just manually copy the needed assets to the correct location?

[GoalSmashers]

Hi @roelvanduijnhoven! The way we handle it in GoalSmashers.com is by using absolute URLs which is also a recommended way of referencing images from CSS files.

It could be improved by turning URLs to absolute when using -r <root path> option but it won't be foolproof.

[roelvanduijnhoven]

Thanks for your reply.

How do you handle vendor libraries? Sure we can make sure our own stylesheets use absolute URLs, but most vendor libraries won't (for good reasons :)).

[GoalSmashers]

If you keep input and output file in one directory then there's no problem, however we need to handle it somehow in other cases too.

Consider your request accepted.

[roelvanduijnhoven]

Thanks!

Just to clearify the use-case (and start a discussion?). Assume the following tree:

├── assets
└── components
    ├── bootstrap
    │   ├── img
    │   │   └── glyhs.gif
    │   └── less
    │       └── bootstrap.css
    └── jquery-ui
        ├── css
        │   └── style.css
        └── images
            ├── next.gif
            └── prev.gif

Now bundling bootstrap.css and style.css to assets/bundled.cs will only reserve images and paths if we rewrite the CSS.

I would say there are two obvious ways to get this done without moving files:

• Absolute
  Make all URLs relative to a specified root. Thus url(../images/next.gif) gets rewritten to url(/components/jquery-ui/images/next.gif)
• Relative
  Make sure relative links get updated to reflect the new location. Thus url(../images/next.gif) gets rewritten to url(../components/jquery-ui/css/../images/next.gif) by prepending the path from asests to the original location. And possibly finally rewritten to url(../components/jquery-ui/images/next.gif) after normalizing.

[GoalSmashers]

Exactly, @roelvanduijnhoven, that's how it should be done.

Expect some work on it soon!
We need to kick tires with 1.1.

[GoalSmashers]

About to start coding this feature. Basically there are four scenarios in clean-css:

• Neither --root nor --output is given: no way to resolve relative image paths - should raise an error
• --root given but not --output: can resolve relative image paths as absolute
• --output given but not --root: can resolve relative image paths as relative to output file path
• Both --root and --output given: can resolve relative images both ways (absolute is preferred)

[roelvanduijnhoven]

Yes that look's right (and highly useful :))

One might consider throwing a warning saying the configuration is ambiguous when both using --root and --output.

[GoalSmashers]

@roelvanduijnhoven all 4 options are covered now although there is still no warning if both --root and --output are given.

For a binary it should be OK to output it to stderr but when used as a JS library something like warnings array on CleanCSS object may be better.

We can also skip it for now and revisit in 1.2.
What do you think?

[roelvanduijnhoven]

We should definitely not delay this feature because of warning messages :)! Skip the thing and mention in the docs that the --root parameter invalidates the --output parameter.

[GoalSmashers]

Sure, but we will have another ticket about unified way to report errors and warnings.

We'll merge the changes later today so 1.1 could be out as soon as tomorrow.

[roelvanduijnhoven]

👍

[GoalSmashers]

@roelvanduijnhoven clean-css 1.1 is out with fix to this issue included. Thanks for helping us out!

[mpdude]

@roelvanduijnhoven Could you please post a more detailed description or example with which settings for your initial example this works and which URLs it produces? Thanks!

[roelvanduijnhoven]

To be honest: in the end we chose to move the images instead of rewriting the CSS using these techniques.

A Gruntfile is used to do the following:

• Install vendor libraries using Bower.
• Combine and minify CSS using grunt-contrib-cssmin, which uses @GoalSmashers CleanCss in the background.
• For each stylesheet that is combined and contains images we move the images from the bower directory to the correct path in the web folder.

This works perfectly for us.

[mpdude]

How do you keep the list of images up-to-date?

Could you provide an example Gruntfile based on the directory layout above and show me what gets copied where?

[rawtaz]

Moving (or copying) the images files like @roelvanduijnhoven mentioned, to make them located in a path that will match the original CSS url()s might work in some cases, but when for example multiple packages would reference the same folder it can get messy. In these cases one still need to do some rewriting.

[digitaljhelms]

I agree with @rawtaz, and messy doesn't begin to explain it when duplicate file locations & names come into play (i.e., files named ajax-loader.gif coming in from a Bower component that doesn't provide a way to specify the path to the asset and expects it to reside at /images/ajax-loader.gif yet another image by that name already resides there). While it would be ideal for the component being digested to be built properly to account for variances in pathing, things aren't always ideal...