Which @angular/* package(s) are relevant/related to the feature request?

compiler

Description

Currently (when using emulated view encapsulation) Angular can compile the SCSS into invalid (or at least unusable) CSS.

Given the current CSS stackblitz where :host is wrongly nested inside :host:

:host {
  .box {
    width: 5rem;
    height: 3rem;
    background-color: red;

    :host.green & {
      background-color: green;
    }
  }
}

Angular will output the following style:

[_nghost-ng-c2309544192]   .box[_ngcontent-ng-c2309544192] {
  width: 5rem;
  height: 3rem;
  background-color: red;
}

.green[_nghost-ng-c2309544192]   :is(-shadowcsshost   .box[_ngcontent-ng-c2309544192]) {
  background-color: green;
}

The problem is the -shadowcsshost is not a selector yet is still emitted. The solution to the CSS is to not nest the style inside the :host but bugs happen and I would prefer a compile error to a production bug.

Proposed solution

I suggest that the compiler fails if there is a -shadowcsshost in the output style.

Alternatives considered

Alternative is to detect wrong use of nested :host, but I suppose that is more complicated.