swc_css: Declarations in SimpleBlock always moved above everything else, breaking CSS Nesting behaviour

[louy]

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)

https://github.com/louy/css-rtl-compiler/blob/3391bbd70451a944e09f4aeb9a904bdd15b38dab/css-rtl-compiler-core/src/lib.rs#L114-L142

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

[email protected]

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