CSS Layers is a new CSS feature that lets developers organize their CSS into layers, giving better control over specificity. Chrome and Firefox support this feature, and it has now landed in the Safari Technology Preview.

It appears that Angular's style encapsulation bails out when encountering this new syntax. Style rules declared in a @layer declaration are not encapsulated:

/* This will not be encapsulated */
@layer utilities {
  p {
    color: darkgreen;
  }
}

/* This will be encapsulated */
p {
  font-size: 40px;
}

Emits:

<style>
  @layer utilities {
    p {
      color: darkgreen;
    }
  }

  p[_ngcontent-mvb-c45] {
    font-size: 40px;
  }
</style>

Reproduction: https://stackblitz.com/edit/angular-ivy-qce65m?file=src%2Fapp%2Fapp.component.css