Declaration parsing fails with this mess of quotes, brackets & braces

[jdelStrother]

I'm not sure if this is in scope for this project, but I was trying to parse this minified css:

.foo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%3E%3Ccircle r='3' fill='rgba(0,0,0,0)'/%3E%3C/svg%3E")}.btn{color:#FF0}.bar{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%3E%3Cpath fill='%233ad599'/%3E%3C/svg%3E")}

which ought to be three selectors, .foo, .btn, and .bar. However, css parses it as a single .foo selector with a very mangled background-image declaration:

var css = require("css");
var str = `.foo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%3E%3Ccircle r='3' fill='rgba(0,0,0,0)'/%3E%3C/svg%3E")}.btn{color:#FF0}.bar{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%3E%3Cpath fill='%233ad599'/%3E%3C/svg%3E")}`;
console.log(css.stringify(css.parse(str)))
/*
.foo {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%3E%3Ccircle r='3' fill='rgba(0,0,0,0)'/%3E%3C/svg%3E")}.btn{color:#FF0}.bar{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%3E%3Cpath fill='%233ad599'/%3E%3C/svg%3E");
}
*/

I traced the problem as far as the declaration regexp here:

css/lib/parse/index.js

Line 227 in 434aa17

var val = match(/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/);

, where it's trying to use /^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/ to match url("data:image/svg+xml;charset=utf-8,%3Csvg%3E%3Ccircle r='3' fill='rgba(0,0,0,0)'/%3E%3C/svg%3E")}.btn{color:#FF0}.bar{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%3E%3Cpath fill='%233ad599'/%3E%3C/svg%3E")} but I'm struggling to figure out suitable regexp magic to avoid the over-eager matching.

[phgn0]

I'm having a similar problem, for me it's failing the parsing on "url(\"data:image/svg+xml;charset=utf-8,%3Csvg data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 202.5 202.5' stroke='%23fff'%3E%3Ctitle%3Esearch-mag-glass%3C/title%3E%3Ccircle cx='158.7' cy='247.5' r='56.7' transform='rotate(-45 -97.007 264.582)' fill='none' stroke-miterlimit='10' stroke-width='30'/%3E%3Cpath fill='none' stroke-miterlimit='10' stroke-width='30' d='M111.8 111.8l80.1 80.1'/%3E%3C/svg%3E\").

With the regex change in #110 it works.