Web Inspector: Nested style groupings are presented in reverse order in Styles sidebar panel

• Component: Web Inspector
• Status: NEW ---

[Patrick Angle]

Given a rule like
```
@media (min-width: 100px) {
    @supports(color: red) {
        body {
            background-color: red;
        }
    }
}
```

we currently show a list of grouping above the rule in the style sidebar in the reverse of that order. e.g.:
```
@support (color: red)
@media (min-width: 100px)
body {
    background-color: red;
}
```

But it would actually make more sense for us to mirror the declaration more closely and show...
```
@media (min-width: 100px)
@support (color: red)
body {
    background-color: red;
}
```

as it better represents the original CSS. This becomes particularly noticeable with bug 233208 which adds showing `@layer` groupings, where the order is important.

[Radar WebKit Bug Importer]

<rdar://problem/85488875>