🐞 bug report

Affected Package

The issue is caused by package ¯\_(ツ)_/¯

Is this a regression?

¯\_(ツ)_/¯

Description

Using this

:host ::ng-deep {
  @font-face {
    // ...
  }
}

produces wrong css

@font-face {
  -shadowcsshost-no-combinator ::ng-deep {
    // ...
  }
}

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-host-ngdeep-fontface?file=src%2Fapp%2Fapp.component.scss

🔥 Exception or Error

🌍 Your Environment

Angular Version: 11.0.8

Anything else relevant?

We use such approach to scope global katex css to component's level (and so keep this styles with lazy loaded component, not in app's global styles.scss), that renders katex equations

:host ::ng-deep {
  @import '../../../../../../node_modules/katex/dist/katex';
}

where node_modules/katex/dist/katex contains selectors and @font-face definitions. Selectors are correctly parsed, font-faces nope and this breaks equations correct rendering (expected katex fonts are not loaded).
Similarly we use this approach for some other libs with same purpose - to scope global styles inside component