Using Data URIs in CSS

[Martin Sutherland]

The CSSPathRewriter currently mangles Data-URIs in CSS. For example,
if you want to use a Data-URI as an image background, your CSS will
look something like:

.icon{
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...') no-
repeat 0 0;
}

During minification and CSS rewriting, this then becomes:

.icon{background:url('full/path/to/data:image/
png;base64,iVBORw0KGgoAAAANSUhEUg...') no-repeat 0 0;

The addition of a path renders the embedded image invalid.

A short-term fix for this is to add a non-breaking space character
(see http://en.wikipedia.org/wiki/Non-breaking_space) to confuse the
minifier and parser sufficiently for it not to add the path. Adding
the non-breaking space betwen the "url" and the opening ")" seems to
work:

.icon{
background:url ('data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...') no-
repeat 0 0;
}

is turned into

.icon{background:URl('data:image/
png;base64,iVBORw0KGgoAAAANSUhEUg...') no-repeat 0 0;

I don't know why the text "url" is turned into "URl" (uppercase U,
uppercase R, lowercase l), but it does the job.

Longer-term, the fix needs to be in the Squishit source code: the
FindDistinctRelativePathsIn and
FindDistinctLocalRelativePathsThatExist functions inside
CSSPathRewriter should detect data-URIs, and not attempt to fix their
paths.

[Martin Sutherland]

Quick follow-up: because the non-breaking whitespace is not valid
whitespace according to the CSS2.1 spec (http://www.w3.org/TR/CSS21/
syndata.html#whitespace), using this hack causes the data-uri images
to be *invalid* in non-minified mode. So the data-uri images will only
work after they have been run through Squishit...

-Martin.

On Jun 14, 2:00 pm, Martin Sutherland <sun...@gmail.com> wrote:
> The CSSPathRewriter currently mangles Data-URIs in CSS. For example,
> if you want to use a Data-URI as an image background, your CSS will
> look something like:
>
> .icon{
>         background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...') no-
> repeat 0 0;
>
> }
>
> During minification and CSS rewriting, this then becomes:
>
> .icon{background:url('full/path/to/data:image/
> png;base64,iVBORw0KGgoAAAANSUhEUg...') no-repeat 0 0;
>
> The addition of a path renders the embedded image invalid.
>
> A short-term fix for this is to add a non-breaking space character

> (seehttp://en.wikipedia.org/wiki/Non-breaking_space) to confuse the

[Justin Etheredge]

Thanks for looking into this, I'll try to get a fix into the CSSPathRewriter soon.

[Justin Etheredge]

A commit has been made to the trunk to resolve this.