Which @angular/* package(s) are the source of the bug?

compiler, Don't known / other

Is this a regression?

No

Description

When using emulated view encapsulation, component CSS that uses the :is or :where pseudo class selector functions gets compiled incorrectly.

Example 1

Consider the following 2 selectors, which differ only in the number of items inside of :is:

:is(.foo) {}
:is(.foo, .bar, .baz) {}

I expected each item in the :is selector list to be transformed the same, but the first and last items are treated differently from the middle items. This is the compiled result:

[_ngcontent-uly-c97]:is(.foo) {}
[_ngcontent-uly-c97]:is(.foo, .bar[_ngcontent-uly-c97], .baz)[_ngcontent-uly-c97] {}

Example 2

When used before or after :host, the number of items inside of :is unexpectedly affects the presence of an [_ngcontent] qualifier outside of :is. The qualifier is missing for 1 item, but added for >1 item. This component CSS:

:is(.foo) :host {}
:is(.foo, .bar) :host {}

:host :is(.foo)  {}
:host :is(.foo, .bar)  {}

Compiles to:

:is(.foo)   [_nghost-kfp-c134] {}
[_ngcontent-kfp-c134]:is(.foo, .bar)   [_nghost-kfp-c134] {}

[_nghost-kfp-c134]   [_ngcontent-kfp-c134]:is(.foo)  {}
[_nghost-kfp-c134]   [_ngcontent-kfp-c134]:is(.foo, .bar)[_ngcontent-kfp-c134]  {}

Reproduction

https://stackblitz.com/edit/angular-ivy-yc96o6?file=src/app/app.component.css demonstrates a live reproduction of this issue.

For my specific use case, I had a selector that looked like:is(a, b, c) :host. I was able to work around the problem by rewriting it to either of :host-context(a, b, c) :host or a :host, b :host, c :host (both compile to the same output). But in general, using :is and :where seems either unsupported or broken. If it's unsupported, I think it would be helpful if the compiler threw an error because the current behavior is hard to predict and does not seem useful.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-yc96o6?file=src/app/app.component.css

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

I'm not using `ng`, so I can't provide `ng version` output. But the reproduction in StackBlitz is using @angular/* packages at version 13.3.3.

Anything else?

No response