Error `property missing ':'` on quoted `url()` containing `)` and `;` (e.g. SVG data URLs)

[remarkablemark]

Expected Behavior

A declaration with a quoted url() that contains ) and ; should parse as a single declaration:

inlineStyleParser('background: url("a)b;c") no-repeat;');
// [{ property: 'background', value: 'url("a)b;c") no-repeat' }]

Actual Behavior

The parser throws property missing ':' at the column of the semicolon:

inlineStyleParser('background: url("a)b;c") no-repeat;');
// Error: undefined:1:23: property missing ':'

Steps to Reproduce

1. Call inlineStyleParser with a value that has a quoted URL containing ) before ;.
2. The parser treats the ) inside the quoted string as the end of the url() function, then splits on the semicolon as if it were a declaration delimiter.

Minimal reproduction:

inlineStyleParser('background: url("a)b;c") no-repeat;');

See remarkablemark/style-to-object#112

Environment

• Version: 0.2.7

Keywords

url, svg, data-url, semicolon, parenthesis, quoted string, declaration, background, animateTransform