Summary
Declarations that come after style rules no longer shift up, among some other improvements. These changes are available in Chrome from version 130 and are ready for testing in Firefox Nightly 132 and Safari Technology Preview 204.
In Chrome before 130, the CSS snippet shared earlier serializes to the following. You can inspect the "CSS after parsing" for yourself by reading back the cssText from the CSSStyleRule.
CSSMediaRule was not designed to contain declarations. Because it can contain nested rules, declarations automatically get wrapped in a CSSStyleRule. The CSS Working Group looked into several options to solve this problem.
Introducing the nested declarations rule is implemented in Chrome starting with Chrome 130. Another approach the CSS Working Group looked at was to have you wrap all nested declarations in a @nest rule. This was dismissed due to the regressed developer experience this would cause.
Before Chrome 130 those declarations would get hoisted. From Chrome 130 onwards the declarations no longer get hoisting. This means that CSS nesting got a whole lot better as of Chrome 130.
If you want to use the full version of the CSSNestedDeclarations, you can use the following JavaScript snippet. The full version is available at the bottom of the page.
