YUI Compressor is removing spaces from filter values

Question

I have a css containing filter for adding Grayout images in FF like this:-

filter: url(\"data:image/svg+xml;utf8,

Answer 1

I found out by experimenting with JW.'s idea that you can base64-encode the entire string, except for the final #grayscale part and adding the corresponding encoding part, or, even nicer. only url-encode the spaces between xml attributes and/or tag names and separating the matrix values by commas.

So in the end you have:

filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333,0.3333,0.3333,0,0,0.3333,0.3333,0.3333,0,0,0.3333,0.3333,0.3333,0,0,0,0,0,1,0'/></filter></svg>#grayscale");

which is compact and doesn't get altered by the css compressor

Answer 2

You can add commas between the feColorMatrix values:

<feColorMatrix type=\'matrix\' values=\'0.3333,0.3333,0.3333,0,0,0.3333,0.3333,0.3333,0,0,0.3333,0.3333,0.3333,0,0,0,0,0,1,0\'/>

but that doesn't fix the issue with the spaces between: svg xmlns

would love to understand that one too.

Answer 3

I came across this issue in the PHP port of the compressor (https://github.com/tubalmartin/YUI-CSS-compressor-PHP-port), and tracked it down to a line in the extract_data_urls method.

This extracts data urls (as you would expect, given its name) from the body of the css to prevent them being minified. However, it does a little bit of processing before it stores them:

$token = preg_replace('/\s+/', '', $token);

This replaces any run of whitespace characters with nothing, and so strips all the spaces out of the SVG tag. Changing this line to:

$token = preg_replace('/\s+/', ' ', $token);

fixed the issue for me by leaving a single space present.

As the PHP version is a direct port of the Java compressor, I would assume that this same bug.

Answer 4

The URL portion of the string (from <svg to </svg>) needs to be URL-encoded. Or you can put ;base64 after ;utf8 and Base64-encode the URL instead.

But it's incorrect to use spaces in a URL...that's why YUI compressor is messing it up.

Answer 5

I gather if your using the latest version (2.4.7) already, then this is likely something their CSS minifier doesn't account for and you will want to raise a bug report with them at http://yuilibrary.com/projects/yuicompressor/

I could not see any configuration option that would help in this case e.g. minifying blocks on to one line but not removing whitespace in-between.