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:
|
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.
I'm not sure if this is in scope for this project, but I was trying to parse this minified css:
which ought to be three selectors,
.foo,.btn, and.bar. However,cssparses it as a single.fooselector with a very mangled background-image declaration:I traced the problem as far as the declaration regexp here:
css/lib/parse/index.js
Line 227 in 434aa17
/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/to matchurl("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.