Add splitList: bool to selector-nested-pattern

[aaronjensen]

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

A bug

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

selector-nested-pattern

What CSS is needed to reproduce this issue?

.baz {
  .foo,
  .bar {
    color: pink;
  }
}

What stylelint configuration is needed to reproduce this issue?

e.g.

{
  "rules": {
    "selector-nested-pattern": "^.*$"
  }
}

Which version of stylelint are you using?

e.g. 7.1.0

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

CLI with stylelint --config myconfig *.css

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

Yes, it's related to postcss/scss nesting

What did you expect to happen?

No warnings to be flagged.

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

The following warnings were flagged:

Expected nested selector ".foo,   .bar" to match specified pattern   selector-nested-pattern

[hudochenkov]

Thank you for using a template.

It's not a bug. From rule description:

The selector value will be checked in its entirety. If you'd like to allow for combinators and commas, you must incorporate them into your pattern.

[laverdet]

It may be worth revisiting this now that nested patterns are officially supported in the CSS specification. & selectors are required and getting a stylelint configuration which works here is cumbersome. I landed on this configuration: "selector-nested-pattern": "^((^|,)\\s*&([^,]+|[^,]*\\([^)]+\\)[^,]*))+$" but it seems unreasonable that we need to go to such lengths.

The expression is annoying because you need to catch nested commas like: &.foo, &:not(.bar, .etc). It, of course, only allows one level of parenthesis nesting. I'm not sure how deep you can go with parenthesized selectors but 1 level is the most I've seen in practice.

[jeddy3]

@laverdet Thanks for chiming in. It does seem cumbersome, especially as we recently turned on a rule in the standard config to encourage the use of the :not(x, y) pattern.

We can add an splitList: bool (default: false) option to apply the pattern against each selector in a list, rather than the whole selector. This will avoid a breaking change to the rule.

(Prehaps there's a better name?. Prior art is the disallowInList option. Spec ref for "list".)

I've labelled the issue as ready to implement. Please consider contributing if you have time.

There are steps on how to add a new option in the Developer guide.