Active CSS Pipeline breaks URI-encoded SVG, set as background-image in CSS.

[ulilu]

When activating the Configuration > System > Asset > CSS Pipeline, all SVGs implemented via URI-encoded background-images in CSS disappear.

From what i can see, there is a very specific reason – the Grav processing seems to strip out the whitespace between the "%3Csvg" and the "xmlns=", thus rendering the svg invalid for the browser:

background-image: url("data:image/svg+xml;charset=utf8,%3Csvgxmlns='http://www.w3.org/2000/svg' ...

(And for those wondering about the peculiar character escaping: The optimized URI-encoding is produced via this script (including explanation): https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)

[rhukster]

Can you provide please me with a .css file to test with?

[ulilu]

sure thing, here you go.
(just create an empty div with a class of "mucem")
mucem.css.zip

[rhukster]

So the problem was that the CSSMin library we are using (part of Minify library) was stripping out these spaces. I did a little research and found a newer (better?) library that seems to do a more reliable job.

I've set this this new library as the default, and it might fix a few other issues i've seen in the past. It is possible to set Grav to use the 'old' library for CSS and JS independently.

This is available in develop and will be available in Beta 6 which i plan on releasing tomorrow.

[rhukster]

Actually i might try another couple of libraries to make sure i've picked the best one.

Also you can simply disable CSS Minify in system config to fix this issue temporarily.

[ulilu]

Thanks, will do! Can't wait to test the new beta 👍