Description
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.