Nested selectors in sass parent selector & are not encapsulate properly #50215
Description
Which @angular/* package(s) are the source of the bug?
compiler
Is this a regression?
No
Description
With the default value of View.encapsulation, nested selectors in sass parent selector & like below are not encapsulate properly.
:host {
dl {
color: blue;
dt {
font-weight: bold;
text-decoration: underline;
}
}
&[red] {
dl {
color: red;
dt {
font-weight: normal;
text-decoration: line-through;
}
}
}
}
Generated style:
[_nghost-ffs-c12] dl[_ngcontent-ffs-c12]{color:blue}
[_nghost-ffs-c12] dl[_ngcontent-ffs-c12] dt[_ngcontent-ffs-c12]{font-weight:bold;text-decoration:underline}
[red][_nghost-ffs-c12] dl{color:red}
[red][_nghost-ffs-c12] dl dt{font-weight:normal;text-decoration:line-through}
Some attribute selectors are missing, so that styles are applied in the wrong order due to CSS Specificity.
Expected style is below (and angular 15.1.1 generate this properly).
[_nghost-ffs-c12] dl[_ngcontent-ffs-c12]{color:blue}
[_nghost-ffs-c12] dl[_ngcontent-ffs-c12] dt[_ngcontent-ffs-c12]{font-weight:bold;text-decoration:underline}
[red][_nghost-ffs-c12] dl[_ngcontent-ffs-c12]{color:red}
[red][_nghost-ffs-c12] dl[_ngcontent-ffs-c12] dt[_ngcontent-ffs-c12]{font-weight:normal;text-decoration:line-through}
angular 15.1.2+ reproduce this behavior.
Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/angular-p2auoh?file=src%2Fsome.component.scss
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in (run ng version)
Angular: 15.1.2
Anything else?
Angular 15.1.1 does not reproduce this.
Angular 16.0.0 reproduce this.
Reactions are currently unavailable