Brackets in data URI cause url reducer to parse incorrectly

[JasonBerry]

This very basic SVG image:

<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
  <rect width="14" height="14" transform="translate(2 2)"/>
</svg>

... when whitespace is stripped and data URI'd correctly becomes:

data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2018%2018%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20transform%3D%22translate(2%202)%22%2F%3E%3C%2Fsvg%3E

When using this data URI as a background-image, CleanCSS chokes on the brackets used by the translate function and generates malformed CSS by dropping the quotes inside the url().

This happens in the byUrl function in the urls/reduce module, so specifying compatibility options like { compatibility: { properties: { urlQuotes: true } } } to CleanCSS doesn't help.

/* What should happen */
.foo {
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2018%2018%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20transform%3D%22translate(2%202)%22%2F%3E%3C%2Fsvg%3E");
}

/* What actually happens */
.foo {
  background-image: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2018%2018%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20transform%3D%22translate(2%202) %22%2F%3E%3C%2Fsvg%3E);
}

[jakubpawlowicz]

That's a bug then. If possible you can use --skip-rebase to prevent it.