1860634 - Move CSS Warning Checks for Never Matching `:host` Selector Out of Parsing Code

Status: NEW

(Core :: CSS Parsing and Computation, enhancement)

Description

[David Shin[:dshin]]

Code currently resides here, as part of the parsing code.

With Bug 1833679, we're aiming to have these warnings to be more lint-like instead of relying on CSS errors being generated in console.

Separating the warning code out allowed introducing a bit more complicated checks separated from the parsing code. It also avoids having to re-parse the rules with the error reporter provided.

We should the never matching host selector check to the newly constructed infrastructure.

Comment 1

[David Shin[:dshin]]

:nchevobbe, is there a way for the current :has() slow selector warning infrastructure to warn the user about never matching selectors?
That'd be required to migrate the never matching :host warning (And it'd be useful for @scope work as well, because in it, :scope ~ [...] and :scope + [...] are trivially detected never matching selectors).

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

(In reply to David Shin[:dshin] from comment #1)

:nchevobbe, is there a way for the current :has() slow selector warning infrastructure to warn the user about never matching selectors?
That'd be required to migrate the never matching :host warning (And it'd be useful for @scope work as well, because in it, :scope ~ [...] and :scope + [...] are trivially detected never matching selectors).

Rules with never matching selectors won't be retrieved by the rule view in the first place, so we can't display anything on them.
The only existing thing we have is CSS warnings in the WebConsole.

It's not ideal because it's not displayed where the CSS devs are spending most of their time (and it's not enabled by default).
We could show such warnings in the Style Editor, directly next to the rule/selector that is impacted, but again, that's not a widely used tool.

It would be nice to be able to some of those warnings directly in the inspector/rules view (maybe an "issue" sub panel or something), so we could display rules that don't match anything (never matching selector, container query using non-existing container name, media queries with invalid conditions, :state() with non-existing state name, …)
Maybe we could have a simple section in the rules view which would list never matching rules, we could have an InspectorUtils method that would return warning messages explaining the issue alongside with the rule. We could then call it whenever there's a change in stylesheets