CSS styles not applied if using multiple attribute selectors to style an element with the direct child selector #49157
Description
Which @angular/* package(s) are the source of the bug?
compiler
Is this a regression?
Yes
Description
If using multiple attribute selectors to style an element with the direct child selector, the styles are not applied.
This happens only in a development build.
Reproduction:
app.component.html
<div class="example-1">
Example 1
</div>
<div class="example-2">
Example 2
</div>app.component.scss
:host {
&:is([data-foo="bar"]) {
> div.example-1 {
background-color: lightskyblue; // working in dev and prod build
}
}
&:is([data-foo="bar"], [data-foo-2="bar-2"]) {
> div.example-2 {
background-color: violet; // ONLY working in prod build
}
}
}Please provide a link to a minimal reproduction of the bug
https://github.com/Marcarrian/angular-15-css-multiple-attribute-selectors-issue
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 15.1.6
Node: 16.16.0
Package Manager: npm 8.11.0
OS: win32 x64
Angular: 15.1.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1501.6
@angular-devkit/build-angular 15.1.6
@angular-devkit/core 15.1.6
@angular-devkit/schematics 15.1.6
@angular/cli 15.1.6
@schematics/angular 15.1.6
rxjs 7.8.0
typescript 4.9.5
Anything else?
No response
Reactions are currently unavailable