Do not emit empty rules/at-rules

[RobinMalfait]

This PR is an optimization where it will not emit empty rules and at-rules. I noticed this while working on #16120 where we emitted:

:root, :host {
}

There are some exceptions for "empty" at-rules, such as:

@charset "UTF-8";
@layer foo, bar, baz;
@custom-media --modern (color), (hover);
@namespace "http://www.w3.org/1999/xhtml";

These don't have a body, but they still have a purpose and therefore they will be emitted.

However, if you look at this:

/* Empty rule */
.foo {
}

/* Empty rule, with nesting */
.foo {
  .bar {
  }
  .baz {
  }
}

/* Empty rule, with special case '&' rules */
.foo {
  & {
    &:hover {
    }
    &:focus {
    }
  }
}

/* Empty at-rule */
@media (min-width: 768px) {
}

/* Empty at-rule with nesting*/
@media (min-width: 768px) {
  .foo {
  }

  @media (min-width: 1024px) {
    .bar {
    }
  }
}

None of these will be emitted.

[philipp-spiess]

Should this just be all at-rules? 🤔 Nevermind me here

[RobinMalfait]

@media (foo) {}

Should be removed imo

[philipp-spiess]

yeah i noticed this too, you just responded before i could update my comment heh

[RobinMalfait]

Hehe, I think in theory we could invert the condition and don't touch everything but the @media (but then we need to check for @suspports as well.

In a perfect world @layer foo {} is also removed, (because you should use @layer foo; but we don't make that distinction.