Fix TypeError with @nest in combination with pseudo-classes with multiple arguments in selector-max-compound-selectors

[woble]

Describe the issue. Is it a bug or a feature request (new rule, new option, etc.)?

Complex nesting via use of @nest (postcss-nesting) in combination with :not() and/or :matches() with multiple arguments produces an error.

Split from #2269

Which rule, if any, is this issue related to?

Seems to be related to selector-max-compound-selectors.

What CSS is needed to reproduce this issue?

.de {
    @nest
    .cd:not(:hover, :focus) & {
        & .fg {
            color: red;
        }
    }
}

What stylelint configuration is needed to reproduce this issue?

{
  "rules":
  {
    "selector-max-compound-selectors": 3
  }
}

Which version of stylelint are you using?

7.9.0

How are you running stylelint: CLI, PostCSS plugin, Node API?

CLI

Does your issue relate to non-standard syntax (e.g. SCSS, nesting, etc.)?

• Use of @nest via postcss-nesting.
• Multiple arguments in :not().

What did you expect to happen?

No warnings to be flagged.

What actually happened (e.g. what warnings or errors you are getting)?

Error: Expected closing parenthesis.
    at new error (C:\Users\user\AppData\Roaming\npm\node_modules\stylelint\node_modules\postcss-selector-parser\dist\processor.js:29:23)
    at Parser.error (C:\Users\user\AppData\Roaming\npm\node_modules\stylelint\node_modules\postcss-selector-parser\dist\parser.js:234:15)
    at Parser.parentheses (C:\Users\user\AppData\Roaming\npm\node_modules\stylelint\node_modules\postcss-selector-parser\dist\parser.js:303:22)
    at Parser.parse (C:\Users\user\AppData\Roaming\npm\node_modules\stylelint\node_modules\postcss-selector-parser\dist\parser.js:533:22)
    at Parser.loop (C:\Users\user\AppData\Roaming\npm\node_modules\stylelint\node_modules\postcss-selector-parser\dist\parser.js:519:18)
    at new Parser (C:\Users\user\AppData\Roaming\npm\node_modules\stylelint\node_modules\postcss-selector-parser\dist\parser.js:104:21)
    at Processor.process (C:\Users\user\AppData\Roaming\npm\node_modules\stylelint\node_modules\postcss-selector-parser\dist\processor.js:26:21)
    at resolvedNestedSelector.forEach.resolvedSelector (C:\Users\user\AppData\Roaming\npm\node_modules\stylelint\lib\rules\selector-max-compound-selectors\index.js:76:55)
    at Array.forEach (native)
    at rule.selectors.forEach.selector (C:\Users\user\AppData\Roaming\npm\node_modules\stylelint\lib\rules\selector-max-compound-selectors\index.js:74:48)

[jeddy3]

@woble Thanks for creating a new issue! Much easier to digest.

It looks to be a bug. I tried postcss-selector-parser with .de .cd:not(:hover, :focus) .fg and it seemed to have no problem with it. So, it does indeed look to be a problem with the combination of @nest.

Labelling as help wanted and bug.

[hudochenkov]

Problem with postcss-resolve-nested-selector. It resolves selector as [".de .cd:not(:hover .fg", ":focus) .de .fg"].

To be fair, :not only supports simple selectors by CSS3 specification. In working draft of CSS4 it supports complex selectors.

Selectors Level 3
Selectors Level 4

[woble]

Perhaps @davidtheclark can be of some help.

[alexander-akait]

Seems bug in postcss-resolve-nested-selector

[github-actions]

This issue is older than one month. Please ask before opening a pull request, as it may no longer be relevant.