[Feature Request] Add support for merging @media and @supports queries.

[SukkaW]

E.g.:

@media screen and (min-width: 480px) {
  .a { color: red }
}

@media screen and (min-width: 480px) {
  .b { color: blue }
}

@media (min-width: 480px) {
  .c { color: green }
}

@media (max-width: 769px) {
  .d { color: yellow }
}

@media screen and (min-width: 480px) {
  .e { color: orange }
}

Should become:

@media screen and (min-width: 480px) {
  /* This two can be safely merged */
  .a { color: red }
  .b { color: blue }
}

/* Non identical @media query shouldn't be merged */
@media (min-width: 480px) {
  .c { color: green }
}

@media (max-width: 769px) {
  .d { color: yellow }
}

/* Although it is an identical media query as before, but it shouldn't be merged into .a & .b  */
@media screen and (min-width: 480px) {
  .e { color: orange }
}

[devongovett]

Note that this can only be done safely when the media queries are adjacent. Not sure how common that is in real world code. If there are any other rules in between, then reordering them may cause specificity issues.

[SukkaW]

Note that this can only be done safely when the media queries are adjacent. Not sure how common that is in real world code. If there are any other rules in between, then reordering them may cause specificity issues.

Currently I am feeding parcel-css with cogen-ed CSS (with a precompiled CSS-in-JS library) and I have sorted the media queries beforehead.

As for others, maybe parcel-css can have an "advanced" option that sorts media queries, and the option.should be disabled by default.

[nicksrandall]

I think it would worth exploring a series of "unsafe" optimizations that users could opt into as long as they knew the risks associated. I feel like optimizations like this would be helpful 95% of the time.