Versions: SQ 8.3, scanner 4.3.0, css plugin 1.2.0
Rule: css:S4664
I have these rules in my CSS:
mat-expansion-panel ::ng-deep div.mat-expansion-panel-body > mat-form-field { ... }
mat-selection-list > mat-form-field { ... }
The first selects a mat-form-field that is immediately under a div, and the second selects a mat-form-field directly under a mat-selection-list. Since the parent can never be a div and a mat-selection-list at the same time, these rules can never apply to the same element.
Two things stand out to me about these rules. They both involve custom components, with dashes in the tag name, similar to this other problem. One of them also has the Angular-specific ::ng-deep combinator. I know ::ng-deep is deprecated by Angular but I think the double-colon syntax is supposed to be valid CSS.
Ideally, the rule could be fixed so that it treats the example above correctly, i.e. notices that the rules can never match the same element. If this turns out to be Angular’s fault because the piercing combinator is invalid CSS, I’d like to know that here, and it would be nice to maybe include a brief note about non-standard syntax in the rule’s help text.