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

compiler

Is this a regression?

Yes

Description

Below is the css and unit test i wrote to confirm it's generated incorrectly.

original css

:host[size=full]>espresso-modal-container>espresso-modal-content-container {
min-width: 100vw;
max-width: 100vw;
width: 100vw;
min-height: 100%;
max-height: 100%;
height: 100%
}

expected css

[size=full][HOSTA]>espresso-modal-container[CONTENTA]>espresso-modal-content-container[CONTENTA] {
min-width: 100vw;
max-width: 100vw;
width: 100vw;
min-height: 100%;
max-height: 100%;
height: 100%
}

actual css

[size=full]>espresso-modal-container>espresso-modal-content-container[HOSTA] {
min-width: 100vw;
max-width: 100vw;
width: 100vw;
min-height: 100%;
max-height: 100%;
height: 100%
}

angular unit test i added to shadow_css_spec.ts

describe('ShadowCss', () => {
it('should handle attribute before host', () => {
const css = ':host[size=full]>espresso-modal-container>espresso-modal-content-container{min-width:100vw;max-width:100vw;width:100vw;min-height:100%;max-height:100%;height:100%}';
const expected = '[size=full][HOSTA]>espresso-modal-container[CONTENTA]>espresso-modal-content-container[CONTENTA]{min-width:100vw;max-width:100vw;width:100vw;min-height:100%;max-height:100%;height:100%}';
expect(shim(css, 'CONTENTA', 'HOSTA')).toEqualCss(expected);
});

Please provide a link to a minimal reproduction of the bug

all is in above details

Please provide the exception or error you saw

incorrect css generated as shown and reproduced via the unit test above

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

Angular CLI: 16.1.15
Node: 18.13.0
Package Manager: yarn 1.22.19
OS: darwin x64

Anything else?

confirmed this works as expected in 14, not sure about 15