How to remove WebStorm sass-lint error "Unknown pseudo selector 'ng-deep'"

Question

Angular 2+ with scss and ::ng-deep in WebStorm highlights this selector with text "Unknown pseudo selector 'ng-deep'"

I tried something like:

selector-pseudo-class-no-unknown: true
  ignorePseudoClasses: ng-deep

or

selector-pseudo-class-no-unknown: false

None of this works.

How to set exception in scss-lint.yml for this pseudo-selectors?

Does that help: https://intellij-support.jetbrains.com/hc/en-us/community/posts/206340199-Unknown-pseudo-selector-how-to-ignore- — Tonio, Aug 17 '17 at 11:15
@Tonio You should use that in an answer quoting the relevant text. — camden_kid, Sep 14 '17 at 10:14

score 20 · Accepted Answer · answered Oct 19 '17 at 16:10

::ng-deep is pseudo element, not pseudo class. This is equivalent in my .stylelintrc

{
  "rules": {
    "selector-pseudo-element-no-unknown": [true, {
      "ignorePseudoElements": ["ng-deep"]
    }]
  }
}

Also you need to uncheck Settings -> Inspections -> CSS -> Invalid Elements -> Invalid CSS pseudo selector

vlodko · Answer 2 · 2019-11-04T11:29:41.180

0

In Angular 4.x you can use /deep/ instead of ::ng-deep.

UPD 14.05.2018

Quote from angular.io:

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.

So basically you should not use any of them because Angular team will stop supporting this feature.

edited Nov 04 '19 at 11:29

answered May 08 '18 at 14:38

vlodko

184
1
9

1

/deep/ is deprecated from 4.3 more info here - https://alligator.io/angular/styles-between-components-angular/ – Andrew Evt May 10 '18 at 09:08
If needed then you should use ::ng-deep but yes.. they are all to be deprecated :) – Mackelito Jun 24 '20 at 07:38

How to remove WebStorm sass-lint error "Unknown pseudo selector 'ng-deep'"

2 Answers2