Giters

filamentgroup / criticalCSS

Finds the Above the Fold CSS for your page, and outputs it into a file

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Relative paths to background images in CSS

malcomio opened this issue · comments

commented

If the original CSS contains a relative path to an image, the output CSS will keep that relative path. Once the CSS is put inline, it's likely to generate a 404.

This is quite common in the case of themes for content management systems, e.g. in Drupal, the CSS is likely to be at /sites/all/themes/themename/css, or in Wordpress it would be in /wp-content/themes/themename/css, so it's common for the image path to be ../images/image.png

I guess a workaround would be to author the original CSS to include the full path, but that makes the code less portable.

commented

+1. Had the same problem recently. It would be great if there was a way to pass an optional path to criticalCSS, that replaces the relative path.

commented

I've run into the same problem and fixed it by adding a simple string replace
output = output.replace("images/", "wp-content/themes/ms-theme/images/");

BUT: I would also love to see an exclude-option.

commented

I faced the same problem due to Drupal themes.

I solved this problem using grunt-criticalcss in conjunction with grunt-contrib-cssmin. cssmin allows you to set a root path which will rebase paths to be absolute.

clean-css could be an option if you're not using grunt.