Does not work with Angular

[pechisworks]

Here is a simple Stackblitz example with Angular: https://stackblitz.com/edit/angular-fs9pjh

When i enable the Container Queries Flag in Chrome it is working, but not with the polyfill.

[surma]

Hm, seems like Angular does CSS pre-processing of it’s own. The CQ Polyfill is working (as in, it’s transpiling the CSS) successfully. Here’s the style that’s in the repro you provided:

.container-row[_ngcontent-sqj-c0] {
  width: 100%;
  display: flex;
  flex-direction: row;
  contain: layout style inline-size;
}
.container-col[_ngcontent-sqj-c0] {
  background: #f00;
  width: 100%;
}
:is(::ng-deep .container-col ).cq_d9a07053c984a84ebcd22bcfbc383d9 {
    background: #0f0 !important;
    width: 50%;
  }

The last selector is clearly generated by the cq polyfill. I’m guessing Angular’s transpiler doesn’t support :is() yet, as it doesn’t tough the ::ng-deep. There’s not much I can do.

Someone with Angular knowledge might be able to do a tighter integration. engine.ts exports a function called transpileStyleSheet(sheetSrc: string, srcUrl?: string): string. If someone can hook it up in a way that Angular’s transpiler runs first, and then the CQ polyfill runs, it might just work.

[devknoll]

As @surma pointed out, this seems like an issue with Angular, and so a bug should be filed upstream there. I'm going to close out this issue, but please feel free to open a new one if you run into any further issues.

Thank you!