Build-time CSS combiner that respects relative url references? - css

Question

Looking for a build-time CSS combiner/minifier that respects relative URL references.
That is, if one of the files I am combining is at
/path/to/style.css
and contains
background-image: url(images/my-image.png)
the resulting file should contain
background-image: url(/path/to/images/my-image.png).
Should work cross-platform Mac and PC, so either .NET via Mono or Node seem like obvious choices.

Answer 1

Check out WebAssets / Github
Asset management application for Python web development - use it to
merge and compress your JavaScript and CSS files.
It includes filters/ precompiles for cssmin, cssutils, yui_css, less, sass, clevercss, compass, scss, coffeescript, gzip, etc.
Specific to your question:
cssrewrite Source filter that rewrites relative urls in CSS files.
CSS allows you to specify urls relative to the location of the CSS
file. However, you may want to store your compressed assets in a
different place than source files, or merge source files from
different locations. This would then break these relative CSS
references, since the base URL changed.
This filter transparently rewrites CSS url() instructions in the
source files to make them relative to the location of the output path.
It works as a source filter, i.e. it is applied individually to each
source file before they are merged.
No configuration is necessary.
The filter also supports a manual mode:
get_filter('cssrewrite', replace={'old_directory', '/custom/path/'})
This will rewrite all urls that point to files within old_directory to use /custom/path as a prefix instead.
General Usage:
from webassets import Environment
my_env = Environment('../static/media', '/media')
""""As you can see, the environment requires two arguments,
the path in which your media files are located, as well as
the url prefix under which the media directory is available.
This prefix will be used when generating output urls. Next,
you need to define your assets, in the form of so called
bundles, and register them with the environment. The easiest
way to do it is directly in code:""""
from webassets import Bundle
js = Bundle('common/jquery.js', 'site/base.js', 'site/widgets.js', filters='jsmin', output='gen/packed.js')
my_env.register('js_all', js)
In this case you'll replace your js src with output.
Here is an alternate notation:
directory: ../static
url: /media
debug: True
updater: timestamp
bundles:
bundle-name:
filters: sass,cssutils
output: cache/default.css
contents:
- css/jquery.ui.calendar.css
- css/jquery.ui.slider.css
Also has special hooks for Django, Flask, Jinja2, Werkzeug..
Documentation is here. Hope this helps!

Answer 2

Here's a basic Python script that will combine all CSS files in a directory and replace references to your images folder:
import os
import fnmatch
output_text = ''
for filename in os.listdir('.'):
if fnmatch.fnmatch(filename, '*.css'):
output_text += open(filename, 'r').read()
output_text = output_text.replace('url(images', 'url(/path/to/images'))
f = open('combined.css', 'w')
f.write(output_text)
f.close()
This is off the top of my head and hasn't been tested, so it might contain errors.
In response to your comment:
Alternatively, you could use server-side CSS, like SASS/Compass or LESS.
With SASS/Compass you can dynamically change the path to assets (images) using the config.rb file, or from the command-line. You can toggle between relative and absolute paths easily in the same way. Your stylesheets are automatically compressed. To make sure that your files are combined, you can just create a master.scss file and #import each file. Most of my experience is with SASS but I believe LESS has similar features.
This is probably not ideal, however. It would be much simpler, portable, and more efficient to take care of this in a Python/Ruby script. It wouldn't take much effort to expand on the Python script above to make it compress the output file and match all relative paths. Then you can make it automatically run by having something like Foreman watching the build directory for changes.