Support for nesting `@media` atrules inside rules?

[gabrielmfern]

This seems to be valid for Chrome, and I think it's for most browsers.

.foo {
  @media (min-width: 640px) {
    color: blue;
  }
}

I'm trying to parse the output from Tailwind CSS's runs, and this is how it uses media queries. At the same time, seems like stylis tries to handle this by placing the media query as a sibling of the rule, and not as children.

If I try to serialize-stringify it, it also changes the orders of things, but gets it to something that should work:

@media (min-width: 640px){.foo{color:blue;}}

[Andarist]

It only works in Chrome based on somewhat recent additions: https://drafts.csswg.org/css-nesting-1/#cssnesteddeclarations

At the same time, seems like stylis tries to handle this by placing the media query as a sibling of the rule, and not as children.

If you compile this CSS you will end with that media query with a .parent property pointing to .foo.