css aggragation breaks urls in theme css file [#172830]

If you have URLs that are relative to the server root then CSS aggregation will break these URLs.

For example, in your theme CSS you can reference a background image like this:
background-image: url(/theme/images/Footer.gif);

Since the URL starts with a / it is relative to the server root.

When you enable CSS aggregation this is rewritten and becomes:
background-image: url(/sites/example.com/themes/example//theme/images/Footer.gif);

and results in a 404

URLs that start with / should not be rewritten.

A workaround is to use a relative URL in your CSS. Assumin the above images folder is in the theme folder then you can write:
background-image: url(images/Footer.gif);
and this gets rewritten properly to:
background-image: url(/sites/example.com/themes/example/images/Footer.gif);

Another workaround is to use the full URL, including protocol and server name:
background-image: url(http://example.com/theme/images/Footer.gif);

In this example /theme is a web server alias to /sites/example.com/themes/example, but there could be other cases when you want a URL to start with a /.

Comment	File	Size	Author
#5	css-aggregation.patch	823 bytes	Jorrit

Comments

Comment #1

mariuss commented 6 September 2007 at 00:55

The code that rewrites the URLs in aggregated CSS files is in drupal_build_css_cache, in the includes/common.inc file:

          // Fix all paths within this CSS file, ignoring absolute paths.
          $data .= preg_replace('/url\(([\'"]?)(?![a-z]+:)/i', 'url(\1'. $path . '\2', $contents);

The regular expression avoids URLs starting with a protocol, (?![a-z]+:), but not URLs starting with /.

Comment #2

dvessel commented 8 September 2007 at 02:45

Priority:

Critical

» Normal

I'd consider this a bug but in what situation would an absolute path be needed?

Comment #3

mariuss commented 8 September 2007 at 05:36

Couple of examples:
- your site is installed at http://example.com/drupal/ and you want to use images from http://example.com/images/
- in order to avoid long paths like /sites/example.com/theme/mytheme/images/ in apache you have an alias called /theme that points to /sites/example.com/theme/mytheme/

But this is really besides the point. The fix is trivial:

          // Fix all paths within this CSS file, ignoring absolute paths.
          $data .= preg_replace('/url\(([\'"]?)(?![a-z]+:|\/)/i', 'url(\1'. $path . '\2', $contents);

Comment #4

Jorrit commented 12 January 2008 at 19:33

That fix will turn
background: url('/static/bg_menu.gif') repeat-y;
into
background: url(/drupal5/sites/all/themes/travelhome/'/static/bg_menu.gif') repeat-y;

For me this works:
$data .= preg_replace('/url\(([\'"]?)(?![\'"]?(?:[a-z]+:|\/))/i', 'url(\1'. $path . '\2', $contents);

There is some repetition, but apparently preg is not greedy enough, it will not match the first ([\'"]?), even when there is a '.

(Tested with Drupal 5.6, PHP 5.2.5 on Gentoo for both absolute urls with / and http:// in front, and relative urls)