Add selector-pseudo-element-no-invalid rule

[salzhrani]

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

a new rule warn about writing a decedent to a pseudo element

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

.foo::after .bar {
  color: pink;
}

Which version of stylelint are you using?

7.6.0

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

e.g. "CLI with stylelint --config myconfig *.css"

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

it also affects scss

.foo::after {
  .bar {
    color: pink;
  }
}

What did you expect to happen?

a warning like: Pseudo elements have no descendants

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

no errors

[jeddy3]

@salzhrani Thank you for the suggestion and for using the template.

@stylelint/core We can discuss this in #2126 as its another spec validation rule.

[alexander-akait]

@jeddy3 css validation have error, I think this does not apply to us, best solution is plugin

[davidtheclark]

If we do make a rule for this, I think it should be a little more general, like selector-pseudo-element-no-invalid. In the spec there are some specific rules:

• only one pseudo-element may appear per complex selector
• the pseudo-element must appear after the compound selector that represents the subjects of the selector
• the pseudo-element may appear only if the subject of the selector is the last compound selector in the selector.

[jeddy3]

If we do make a rule for this, I think it should be a little more general, like selector-pseudo-element-no-invalid.

Agreed that that would be best regardless of whether this is a plugin or a core rule.

@salzhrani FYI, we're currently doing an audit of the existing rules and formalising the boundary between core rules and plugins. Your suggestion falls close to where the boundary might fall, as such there might be a wait on resolving this issue. As an aside, if we do split spec enforcement rules into a plugin pack, would you interested in championing such a thing and helping to maintain it?

[alexander-akait]

/cc @jeddy3 @davidtheclark what our decision on this issue?

[davidtheclark]

I think that there should be an independent tool that validates selectors. Or maybe this could be an addition to postcss-selector-parser. Then we could have a single selector-no-invalid rule.

Looks like csstree has selector validation on the roadmap. Somebody could write a standalone package for this, too.

[jeddy3]

Looks like csstree has selector validation on the roadmap.

Yep, it looks like there are some exciting things happening over at csstree when it comes to spec validation!

[alexander-akait]

@davidtheclark @jeddy3 agree, closing. If in the future we decide to validate rules in the core, then this is a separate issue 👍