Angular 12 Warning: 1 rules skipped due to selector errors: :host-context(.isDarkTheme) -> unmatched pseudo-class :host-context

Viewed 3662

I'm using .isDarkTheme as a class on the <body> of my Angular app. I then use this class as a reference to play with the Dark or Light theme of the app.

We're working on the transition to Angular 12, and when making a build, we get this warning:

Warning: 1 rules skipped due to selector errors:
  :host-context(.isDarkTheme) -> unmatched pseudo-class :host-context

Environment

  • Update to Angular 12
  • Use of Angular Material

We're using .isDarkTheme with the :host-context in different ways in the SCSS files.

With an inline class:

:host-context(.isDarkTheme) .container {
    background-color: rgba($mat-dark-color, var(--theme-form-background-opacity, $mat-form-alpha));
  }

And with nested class:

:host-context(.isDarkTheme) {
  .bg,
  .select,
  .bar {
    background-color: var(--theme-background-background, $mat-light-color);
  }
}

The warning seems global and not related to a specific file, so is there a way that's not right? Or is :host-context not a good practice?

Please let me know if you have questions, or if my issue isn't detailed enough. Thanks in advance for your help :)

0 Answers
Related