-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Description
Describe the bug
When using css nesting, all Declarations in a QualifiedRule block (and probably any SimpleBlock) are moved to the top, above AtRule and other QualifiedRule instances, producing CSS that behaves differently than the input css in certain senarios.
Take the example from the MDN docs:
.foo {
background-color: silver;
@media (screen) {
color: tomato;
}
color: black;
}
The above is equal to
.foo {
background-color: silver;
}
@media (screen) {
.foo {
color: tomato;
}
}
.foo {
color: black;
}
However, swc_css parses it similarly to a browser that doesn't support CSSNestedDeclarations, producing the equivalent of the following:
.foo {
background-color: silver;
color: black;
}
@media (screen) {
.foo {
color: tomato;
}
}
Input code
.foo {
background-color: silver;
@media (screen) {
color: tomato;
}
color: black;
}Config
Playground link (or link to the minimal reproduction)
SWC Info output
No response
Expected behavior
As documented in MDN docs, equivalent of the following CSSOM:
↳ CSSStyleRule
.style
- background-color: silver
↳ CSSMediaRule
↳ CSSNestedDeclarations
.style (CSSStyleDeclaration, 1) =
- color: tomato
↳ CSSNestedDeclarations
.style (CSSStyleDeclaration, 1) =
- color: black
Actual behavior
Equivalent of the following CSSOM:
↳ CSSStyleRule
.style
- background-color: silver
- color: black
↳ CSSMediaRule
↳ CSSNestedDeclarations
.style (CSSStyleDeclaration, 1) =
- color: tomato
Version
Additional context
Reproduction link above contains a failing test case that I expect to succeed.
Helpful visualisation: https://swc-css.netlify.app/?code=eJzTS8vPV6jmUlBISkzOTi_KL81L0U3Oz8kvslIozswpSy2yBso55KamZCYqaBQnF6Wm5mmC1SsoQJWV5OcmluSDlNUCsZpeUmIRqoKi1BSYLFQkKQdomTVXLRcAxR0l1w