Merging mixed rules | Order bug

[AaronLayton]

It would be really good if CSSShrink could figure out the `@media' rules in this snippet and merge them together. It seems to have an issue when they are in this order but if you put both the 768's together then it picks up on it (I am testing on http://cssshrink.com/ )

header {
  color: red;
}
@media only screen and (min-width: 768px) {
  header {
    color: green;
  }
}
@media only screen and (min-width: 1024px) {
  header {
    color: blue;
  }
}

section {
  color: green;
}
@media only screen and (min-width: 768px) {
  section {
    color: blue;
  }
}
@media only screen and (min-width: 1024px) {
  section {
    color: red;
  }
}

[yairEO]

I recommend this - https://www.npmjs.com/package/gulp-combine-media-queries

Also the title is wrong. it should be Merging mixed media queries | Order bug because this ticket is only about media queries.