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?

Bestialize

Does that help: intellij-support.jetbrains.com/hc/en-us/community/posts/… – Relator

@Relator You should use that in an answer quoting the relevant text. – Veg

After WebStorm update this issue no longer appears – Bestialize

Answer 1

::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

Pola

Answer 2

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.

Saransk

/deep/ is deprecated from 4.3 more info here - alligator.io/angular/styles-between-components-angular – Baste

If needed then you should use ::ng-deep but yes.. they are all to be deprecated :) – Memoir