Update CSS grammar to allow /deep/ combinator as first element of a selector about sonar-css-plugin

[racodond]

Hi @HiperSoke,

Thanks for your feedback!
Is this code snippet part of an SCSS or CSS file?

Thank you

David

Hi racodond,

Thanks for your fast answer. That code snippet its part of a css file.

Regards.

I changed the /deep/ combinator to ::ng-deep as is the one that we should use for Angular 4 projects and seems that is isnt supported by the plugin, at least it can process the whole file so I can see other issues. I think that maybe you could add ::ng-deep as a deprecated combinator.

Check this url: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Regards.

[racodond]

I changed the /deep/ combinator to ::ng-deep as is the one that we should use for Angular 4 projects and seems that is isnt supported by the plugin

/deep/ is considered as a CSS combinator. Thus, in CSS it cannot be the first element of a selector. Hence, the parse error you get.

Unlike CSS, it is possible to have a CSS combinator as first element of a selector in SCSS. Hence the support of /deep/ in SCSS when it is the first element of a selector.

I'm not familiar with /deep/. Thus, it is really possible to have it as first element of a selector? If so, it'll require a change in the grammar.

::ng-deep is considered as a pseudo-element, that's why it is properly parsed.

I think that maybe you could add ::ng-deep as a deprecated combinator

OK. ::ng-deep is considered as a pseudo-element for now. Does it make sense to mark it as obsolete/deprecated in rule "Obsolete pseudo-elements and pseudo-classes should not be used". Or doesn't it make sense to consider it as a pseudo-element in an Anglular context? And it should really be considered as combinator in terms of wording?

I'm not an CSS expert, but I saw in a few examples that you can use /deep/ at the begining of an CSS file (checking the documentation of DevExtreme suit for Angular projects),
.
About the ::ng-deep I saw that other development teams are cosidering it as an pseudo-element. So for me looks fine to add it to that "Obsolete pseudo-elements and pseudo-classes should not be used" rule.

Regards.

[racodond]

I'm not an CSS expert, but I saw in a few examples that you can use /deep/ at the begining of an CSS file (checking the documentation of DevExtreme suit for Angular projects)

OK, I'll add support to this syntax.
.

About the ::ng-deep I saw that other development teams are cosidering it as an pseudo-element. So for me looks fine to add it to that "Obsolete pseudo-elements and pseudo-classes should not be used" rule.

OK. I created a dedicated issue: #45

[vaclav-dvorak]

just my two cents:

angular/angular#17557

from what i read /deep/ support will be removed from chrome as its semantically incorrect and ::ng-deep is angular specific replacement...

in this light im not sure the resolution you come to is correct :)

[racodond]

Hi @vaclav-dvorak,

I'm not sure to understand.
You agree with "OK. I created a dedicated issue: #45"?
But you do not agree with "OK, I'll add support to this syntax."?

Even if it is deprecated, "/deep/" syntax usage should not lead to a crash while analyzing a CSS file with SonarQube. The parser should be able to parse this syntax (even if it is not widely used and will be less and less).

David

[racodond]

Also created new issue: #47

[vaclav-dvorak]

Sorry for not being clear.

From what i read it feels to me that /deep/ should be in deprecated list and ::ng-deep shouldn't (as its angulars response for dropping of /deep/ support).
Even though I feel that your statement : "/deep/ is considered as a CSS combinator. Thus, in CSS it cannot be the first element of a selector." is correct i don't know if its strict truth. It makes sense for parser to be able to parse it for sure.

[racodond]

OK. Got it.

From what i read it feels to me that /deep/ should be in deprecated list and ::ng-deep shouldn't (as its angulars response for dropping of /deep/ support).

They plan to drop support of ::ng-deep as well. See https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

Even though I feel that your statement : "/deep/ is considered as a CSS combinator. Thus, in CSS it cannot be the first element of a selector." is correct i don't know if its strict truth. It makes sense for parser to be able to parse it for sure.

OK