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!