Implement not-* variant with @media, @supports and @container variants

[RobinMalfait]

The not-* variant worked with other variants that only included selectors, however some variants where only @media, @supports, and @container is used, the not-* variant would not work.

This PR solves that by inverting the query using the not keyword.

This allows us to use not-print:flex which compiles to:

@media not print {
  .not-print\:flex {
    display: flex;
  }
}

[sanbei101]

There is nothing wrong with that！

[RobinMalfait]

Closed in favor of: #14743