CSS nesting improves with CSSNestedDeclarations

One of the gotchas with CSS nesting is that, originally, the following snippet does not work as you might initially expect:

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }
    
    background-color: green;
}

Looking at the code, you would assume that the <div class=foo> element has a green background-color because the background-color: green; declaration comes last. But this isn't the case in Chrome before version 130. In those versions, which lack support for CSSNestedDeclarations, the background-color of the element is red.

After parsing the actual rule Chrome prior to 130 uses is as follows:

.foo {
    width: fit-content;
    background-color: green;

    @media screen {
        & {
            background-color: red;
        }
    }
}