Removes quotes from data url properties which contain brackets

[peterjwest]

If you have a quoted background-image property value which contains data with brackets (), Clean CSS will remove the quotes even though this breaks the data image e.g.

background-image:url("data:image/svg+xml;...()...");

I thought properties.urlQuotes would address this, but it seems to just strip out quotes after start and end quotes have already been stripped in urls-processor.js:

    .replace(/^url\((['"])? /, 'url($1')
    .replace(/ (['"])?\)$/, '$1)');

  if (!keepUrlQuotes && !/^['"].+['"]$/.test(url) && !/url\(.*[\s\(\)].*\)/.test(url) && !/url\(['"]data:[^;]+;charset/.test(url))
    url = url.replace(/["']/g, '');

And also it looks like these are stripped earlier in the process anyway, because my URLs never have quotes at this point.

[jakubpawlowicz]

@peterjwest sorry, was super busy recently - I can see it happening and will look into it soon.

[peterjwest]

no problem, thanks!

[jakubpawlowicz]

@peterjwest could you please provide an example data URI for this bug? I need one for testing purposes.

[peterjwest]

Here's an example:

background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%20overflow%3D%22visible%22%3E%3Cdefs%3E%3Cellipse%20id%3D%22a%22%20cx%3D%2250%22%20cy%3D%2250%22%20rx%3D%2250%22%20ry%3D%2250%22%2F%3E%3C%2Fdefs%3E%3Cuse%20xlink%3Ahref%3D%22%23a%22%20overflow%3D%22visible%22%20fill%3D%22%2300f%22%2F%3E%3CclipPath%20id%3D%22b%22%3E%3Cuse%20xlink%3Ahref%3D%22%23a%22%20overflow%3D%22visible%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url(%23b)%22%3E%3Cpath%20d%3D%22M0%20100h50V50H0z%22%20fill%3D%22%230f0%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

[jakubpawlowicz]

I can see it happening when importing from a CSS file. Fix is coming.

[peterjwest]

👍 👍 👍

[jakubpawlowicz]

Out in 3.4.7, thanks @peterjwest!

[peterjwest]

Thanks, I can verify it's working! As a side note, now the first data URL in my CSS file always has double quotes, no matter what the content is.

[jakubpawlowicz]

Hmmm, when I remove url(...) part from SVG above I can clearly see the output without quotes. Any ideas?

[peterjwest]

No, sorry.