ParseError with :is() or :matches() containing :has()

[SuperPat45]

To reproduce:

:is(:not(:has(>.foo)), :has(>.foo.bar)) {
    overflow: clip;
}

Current behavior:

Throw a: ParseError: Missing closing ')'

Expected behavior:

No exception has the number of close parenthesis is correct Environment information:

• less version: 4.2.0
• nodejs version: 20.17
• operating system: windows

[dosubot[bot]]

Hey @SuperPat45! I'm here to help you with any bugs, questions, or contributions you have while waiting for a human maintainer. Let's tackle this issue together!

To resolve the ParseError "Missing closing ')'" when using :is() or :matches() containing :has() in the given CSS code with less version 4.2.0 on Windows, you need to ensure that the Less parser correctly handles nested parentheses. The provided chunker.js code is responsible for parsing the input and tracking parentheses levels.

The error occurs because the parser does not correctly handle the nested structure of :is() or :matches() containing :has(). To fix this, you need to modify the parser to correctly track and match nested parentheses.

Here is the corrected CSS code:

:is(:not(:has(>.foo)), :has(>.foo.bar)) {
    overflow: clip;
}

And here is the relevant part of the chunker.js code that needs to be modified to handle nested parentheses correctly:

case 40: // (
    parenLevel++;
    lastOpeningParen = chunkerCurrentIndex;
    continue;
case 41: // )
    if (--parenLevel < 0) {
        return fail('missing opening `(`', chunkerCurrentIndex);
    }
    continue;

Ensure that the parenLevel is correctly incremented and decremented for each opening and closing parenthesis. This will help the parser to correctly match nested parentheses and avoid the "Missing closing ')'" error ^[1].

To continue talking to Dosu, mention @dosu.

[matthew-dean]

Related to: https://github.com/less/less.js/issues/4268

[puckowski]

I submitted a PR #4290

The following Less

@num: 3;
:nth-child(@{num}) {
  selector: interpolated;
}


a:is(.b, :is(.c)) {
  color: blue;
}

:is(:not(:has(>.foo)), :has(>.foo.bar)) {
  overflow: clip;
}

becomes:

:nth-child(3) {
  selector: interpolated;
}
a:is(.b, :is(.c)) {
  color: blue;
}
:is(:not(:has(>.foo)), :has(>.foo.bar)) {
  overflow: clip;
}