Support for Updated Shadow DOM Styling Rules

[mko]

Angular 2 is in Release Candidate mode, and with it comes Shadow DOM Styling (also known as CSS Scoping). Unfortunately, Angular 2 is very keen on bleeding edge syntaxes, already deprecating the 2014 CSS Scoping in favor of the Editor's Draft of CSS Scoping. Currently, CSSLint does not support all of the updated Shadow DOM Styling syntaxes as valid CSS, despite it being valid CSS interpreted properly by the browser. This makes developing an Angular 2 app using CSSLint difficult if you're utilizing the non-deprecated syntaxes for your component styles.

For example, when defining a block:

:host >>> .deep-element {
    position: relative;
}

CSSLint errors with the following error:

 1:1  error  Please check validity of the block starting from line #1  Fatal

In this case, the issue is that the shadow-piercing descendant combinator (>>>) has replaced the deep combinator (/deep/) as the proper syntax for a super-descendent selector. There are other changes as well like ::content being renamed to ::slotted, but the only change I've seen impact linting was the /deep/ to >>> selector change.

The simple workaround is to continue using the /deep/ selector as long as Angular 2 supports it, but this is a ticking time-bomb as the revised CSS Scoping Module seems to be nearing publication. For more details about how Angular 2 uses component styles (i.e. Shadow DOM Styling rules): https://angular.io/docs/ts/latest/guide/component-styles.html

Admittedly, the CSS Scoping Module that defines the updated mechanisms by which Web Components and styling works with the Shadow DOM is still in an Editor's Draft (see https://drafts.csswg.org/css-scoping/ for the full spec), but these rules are starting to be implemented in the wild. It would be really useful to see support for the updated Editor's Draft rules in CSSLint, either as an optional configuration or just wholesale implementation.

Also, I know it doesn't make sense to spend a bunch of resources working on something solely for a single framework's benefit. I do think, however, there are likely other use cases for this shadow-piercing descendant combinator actively as there are projects like https://www.polymer-project.org/1.0/docs/devguide/styling and https://github.com/Wildhoney/ReactShadow which actively are styling the Shadow DOM.

[mko]

Additional details around /deep/ deprecation in active use outside of the Angular 2 context: https://www.chromestatus.com/features/6750456638341120

[spottedmahn]

It would be really nice if this was addressed. It throws off Visual Studio and makes it looks like I have errors in my code when I don't!

[tlcoder]

I agree, this would be very helpful.

[rtm]

But using /deep/ gives me

photo-tabs.component.css
1: error at line 8, col 15
Expected LBRACE at line 8, col 15.
mat-tab-group /deep/ .mat-tab-label {

photo-tabs.component.css
2: error at line 8, col 15
Unexpected token '/' at line 8, col 15.
mat-tab-group /deep/ .mat-tab-label {

Is this expected?