CSS nesting does not work fully in isolated CSS files #52422
Description
Is there an existing issue for this?
- I have searched the existing issues
Describe the bug
When using CSS nesting in an isolated CSS file, some scenarios do not work at all and others do not behave as expected.
Expected Behavior
If the intention is to work as the existing system does, then only the "leaf" nodes of the nested CSS should be given the attribute selector, the parent should never have it. Furthermore if a ::deep is used, then isolated CSS attributes should not be applied to any of a parents children.
Steps To Reproduce
With a set of classes as the following:
.parent {
& .child-1 {
}
& .child-2 {
}
& .child-3 {
}
}This output will be produced in the *.styles.css:
.parent[b-7apb7xee7k] {
& .child-1 {
}
& .child-2[b-7apb7xee7k] {
}
& .child-3[b-7apb7xee7k] {
}
}All rules have the attribute selector except the first child.
When you use ::deep like so:
::deep .parent {
& ::deep .child-1 {
}
& ::deep .child-2 {
}
& ::deep .child-3 {
}
}You get an output thus:
[b-7apb7xee7k] .parent {
& ::deep .child-1 {
}
&[b-7apb7xee7k] .child-2 {
}
&[b-7apb7xee7k] .child-3 {
}
}Exceptions (if any)
No response
.NET Version
8.0.100
Anything else?
No response