New Rule: no-unmatchable-anb-selector

[TKDev7]

Rule details

Disallow unmatchable An+B selectors.

What type of rule is this?

Warns about a potential problem

Example code

a:nth-child(0n+0) {}
/*↑             ↑
 * This unmatchable An+B selector */

Prior Art

selector-anb-no-unmatchable: https://stylelint.io/user-guide/rules/selector-anb-no-unmatchable/

Participation

• I am willing to submit a pull request to implement this rule.

Additional comments

An+B selectors are one-indexed. Selectors that always evaluate to 0 will not match any elements.

[nzakas]

Sounds good to me. Marking as accepted. 👍

[jeddy3]

Is it worth expanding the scope of this rule to detect more unmatchable selectors and naming it no-unmatchable-selectors?

For example, pseudo-elements:

div::after a {}
div::after::before {}

:is(div::before) {}

div::before {
  .parent:hover & {} /* is desugared to `.parent:hover :is(div::before) {}`, and is unmatchable */
}

::slotted(div a) {}

And pseudo-classes like :host:

div :host {}
:host(> .class) {}

There are likely more unmatchable selectors mentioned across the specs.

I'm not very familiar with the ones (::slotted and :host) from the CSS Scoping module, but support for detecting them has been requested in Stylelint before from teams working with Web Components.

[nzakas]

Is it worth expanding the scope of this rule to detect more unmatchable selectors and naming it no-unmatchable-selectors?

I like that idea. It also gives us flexibility to start with a small group that we're sure of and add more over time.

@thecalamiity what do you think?

[Mouvedia]

…but support for detecting them has been requested in Stylelint…

stylelint/stylelint#8566
stylelint/stylelint#5575