Parser error with SVG datauri inlining about css

[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")}

[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"); }.

[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)!