String property values containing ) cause closing of string to fail, capturing everything thereafter

[JorianWoltjer]

This issue was previously reported at reworkcss#171, the upstream of this fork, but it doesn't seem likely that this will be fixed any time soon. Read it for more details.

Expected Behaviour

A closing paratheses ()) should not close a url("...") string while still inside quotes.

Actual Behaviour

It seems like ) inside a URL string in CSS causes this parser to close it prematurely, causing errors of invalid syntax afterward (still inside the string) and causing the closing of the string to fail sometimes, capturing everything until the next url("") silently.

Reproduce Scenario

Sample Code that illustrates the problem

Error:

.bg1 { background:url(");") }

const { parse, stringify } = require("@adobe/css-tools");
const ast = parse('.bg1 { background:url(");") }');

Capturing rules in between:

.bg1 { background:url(")") } .between{ color:red } .bg2 { background:url("") }

const { parse, stringify } = require("@adobe/css-tools");
const ast = parse('.bg1 { background:url(")") } .between{ color:red } .bg2 { background:url("") }');
console.log(util.inspect(ast, false, null, true))

This issue was encountered in the wild while trying to parse the Bootstrap 4.0 minified CSS. It contains the following code containing an SVG with ) inside of the string, causing it to skip around 70.000 bytes of CSS until it finds the next url(""):

.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml...stroke='rgba(0, 0, 0, 0.5)'...")}

Logs taken while reproducing problem

Error:

Uncaught:
$cb508b9219b02820$export$2e2bcd8739ae039 [Error]: :1:26: missing '}'
    at error (/tmp/tmp.6G9MC1PG1U/node_modules/@adobe/css-tools/dist/index.cjs:131:21)
    at declarations (/tmp/tmp.6G9MC1PG1U/node_modules/@adobe/css-tools/dist/index.cjs:300:30)
    at rule (/tmp/tmp.6G9MC1PG1U/node_modules/@adobe/css-tools/dist/index.cjs:557:27)
    at rules (/tmp/tmp.6G9MC1PG1U/node_modules/@adobe/css-tools/dist/index.cjs:166:74)
    at stylesheet (/tmp/tmp.6G9MC1PG1U/node_modules/@adobe/css-tools/dist/index.cjs:138:27)
    at $b499486c7f02abe7$export$98e6a39c04603d36 (/tmp/tmp.6G9MC1PG1U/node_modules/@adobe/css-tools/dist/index.cjs:560:44) {
  reason: "missing '}'",
  filename: '',
  line: 1,
  column: 26,
  source: '") }'
}

Capturing rules in between:

{
  type: 'stylesheet',
  stylesheet: {
    source: undefined,
    rules: [
      {
        type: 'rule',
        selectors: [ '.bg1' ],
        declarations: [
          {
            type: 'declaration',
            property: 'background',
            value: 'url(")") } .between{ color:red } .bg2 { background:url("")',
            position: $0865a9fb4cc365fe$export$2e2bcd8739ae039 {
              start: { line: 1, column: 8 },
              end: { line: 1, column: 78 },
              source: ''
            }
          }
        ],
        position: $0865a9fb4cc365fe$export$2e2bcd8739ae039 {
          start: { line: 1, column: 1 },
          end: { line: 1, column: 79 },
          source: ''
        }
      }
    ],
    parsingErrors: []
  }
}