When compiling the provided SCSS , the generated CSS omits the required child combinator > in the :has() selector, resulting in incorrect styling behavior.
Steps to Reproduce:
- Use the following SCSS code:
.test {
&-panel {
.test-card:has(>&.expanded) {
display: block;
}
}
}
- Re-compile file
- Observe the output CSS
Expected CSS Output:
.test-card:has(>.test-panel.expanded) {
display: block;
}
Actual CSS Output:
.test-card:has(.test-panel.expanded) {
display: block;
}
Issue Analysis:
The SCSS :has(>&.expanded) intends to target direct children (via >) of .test-card with class .expanded. However, the compiled CSS drops the > symbol, making the selector less specific (targeting any descendant instead of direct children). This breaks the intended styling logic.
Environment Details:
WebCompiler2022+1.14.15
BuildWebCompiler2022-1.14.10 (fallback due to empty file issue in 1.14.15)
VS2026.18.0.0
dotnet10.0.0
When compiling the provided SCSS , the generated CSS omits the required child combinator
>in the:has()selector, resulting in incorrect styling behavior.Steps to Reproduce:
Expected CSS Output:
Actual CSS Output:
Issue Analysis:
The SCSS
:has(>&.expanded)intends to target direct children (via>) of.test-cardwith class.expanded. However, the compiled CSS drops the>symbol, making the selector less specific (targeting any descendant instead of direct children). This breaks the intended styling logic.Environment Details:
WebCompiler2022+1.14.15
BuildWebCompiler2022-1.14.10 (fallback due to empty file issue in 1.14.15)
VS2026.18.0.0
dotnet10.0.0