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

css angular angular-components scss-lint
Adam Michalski picture Adam Michalski · Aug 3, 2017 · Viewed 7.7k times · Source

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?

Answer

Arelav picture Arelav · Oct 19, 2017

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

Related questions

How to style child components from parent component's CSS file?

I've got a parent component: <parent></parent> And I want to populate this group with child components: <parent> <child></child> <child></child> <child></…

Read More
Angular 2: How to style host element of the component?

I have component in Angular 2 called my-comp: <my-comp></my-comp> How does one style the host element of this component in Angular 2? In Polymer, You would use ":host" selector. I tried it in Angular 2. But it doesn't …

Read More
Vertical tabs with Angular Material

Using the proper Angular Material directive, how do I change the direction to vertical? Starting with vertical tabs: Then want to drop to content below mat-select dropdown: EDIT: Will be working on adapting https://stackoverflow.com/a/43389018 into my answer, …

Read More