Parser error with SVG datauri inlining

[richgilbank]

I hate to open an unclear/ambiguous issue, but I've been unable to track down what's actually going wrong here.
With the following CSS, simply running css.parse() is blowing up:

Error: undefined:1:249: property missing ':'

It seems to only be occurring when there are multiple rules on one line (i.e. minified) that contain the string "charset", only when the SVG is URL encoded. I've stripped it down as much as I can to get it to a readable size (original file: http://www.shopify.com/assets2/application-bf82c00b0b5b610626f416a6ccc3d6aa.css).

Any thoughts on what might be going on here? I'll try to take a closer look in the next few days but figured I'd open the issue in the meantime. Thanks!

.thing1{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%3E%3Cg%3E%3Crect%20transform=%22matrix(0.7071%20-0.7071%200.7071%200.7071%20-9.5016%2021.7357)%22/%3E%3C/g%3E%3C/svg%3E");}.thing2{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%3E%3C/svg%3E");}

[conradz]

The underlying issues (at least I'm pretty sure) is that the parsing for a value stops at the closing ) of matrix(, inside the quoted string. This is because as soon as it finds an open ( it searches for the closest matching ) (see this line).

A shorter example that reproduces the issue (I'm pretty sure it is the same issue, just a slightly different error) is this: .a{ b: url(")"); } .c { d: url(";"); }. Remove the ) in ")" and it parses fine.

[conradz]

Actually you can reproduce the exact same error message (property missing ':') with this: .a { b: url(")"); d: url(";a"); }.

[oilvier]

Hi,

Is there any advance on this issue ?

I encounter the same problem with SVG inlined which I have reduced to the following "conditions" :

It seems to occur when there's more than one call to an SVG in an inlined CSS.

• 2 SVG calls with inlined CSS -> it doesn't work

.foo{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220 0 13 9%22%20preserveAspectRatio%3D%22none%22%3E%0A%09%3Cpath%20fill%3D%22rgba(5,178,189,.99)%22%20d%3D%22M8.53 0L7.19 1.352l2.18 2.193H0v1.912h9.37L7.19 7.65l1.34 1.352 4.47-4.5z%22%20%2F%3E%0A%3C%2Fsvg%3E")}.bar{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220 0 25 21%22%20preserveAspectRatio%3D%22none%22%3E%0A%09%3Cpath%20fill%3D%22rgba(5,46,73,.99)%22%20d%3D%22M7.5,15.6l-4.8-4.9L0,13.4l6.4,6.5l0,0L7.5,21l18-18.3L22.8,0L7.5,15.6z%22%20%2F%3E%0A%3C%2Fsvg%3E")}

• Same as before, but with a new line between the 2 SVG calls -> it works

.foo{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220 0 13 9%22%20preserveAspectRatio%3D%22none%22%3E%0A%09%3Cpath%20fill%3D%22rgba(5,178,189,.99)%22%20d%3D%22M8.53 0L7.19 1.352l2.18 2.193H0v1.912h9.37L7.19 7.65l1.34 1.352 4.47-4.5z%22%20%2F%3E%0A%3C%2Fsvg%3E")}
.bar{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220 0 25 21%22%20preserveAspectRatio%3D%22none%22%3E%0A%09%3Cpath%20fill%3D%22rgba(5,46,73,.99)%22%20d%3D%22M7.5,15.6l-4.8-4.9L0,13.4l6.4,6.5l0,0L7.5,21l18-18.3L22.8,0L7.5,15.6z%22%20%2F%3E%0A%3C%2Fsvg%3E")}

• 1 SVG call -> it works

.foo{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220 0 13 9%22%20preserveAspectRatio%3D%22none%22%3E%0A%09%3Cpath%20fill%3D%22rgba(5,178,189,.99)%22%20d%3D%22M8.53 0L7.19 1.352l2.18 2.193H0v1.912h9.37L7.19 7.65l1.34 1.352 4.47-4.5z%22%20%2F%3E%0A%3C%2Fsvg%3E")}

[sadovnychyi]

I got this issue while using purifycss and used postcss-base64 to encode any inlined SVG into base64 as a workaround until #110 is merged.

[strarsis]

New editor styles transformation approach using PostCSS is now merged (many thanks @zaguiini)!