PostCSS Mq Optimize

PostCSS plugin Removes invalid media queries or its expressions.

/* Input example */
@media (min-width: 200px) and (max-width: 300px) {
  .foo {}
}
@media (min-width: 200px) and (max-width: 300px) and (min-width: 100px) {
  .bar {}
}
@media (min-width: 200px) and (max-width: 300px) and (min-width: 200px) {
  .baz {}
}
@media (min-width: 200px) and (max-width: 300px) and (max-width: 100px) {
  .qux {}
}
@media screen and (max-width: 300px), (max-width: 200px) {
  .quux {}
}

/* Output example */
@media (min-width: 200px) and (max-width: 300px) {
  .foo {}
}
@media (min-width: 200px) and (max-width: 300px) {
  .bar {}
}
@media (min-width: 200px) and (max-width: 300px) {
  .baz {}
}
@media screen and (max-width: 300px), (max-width: 200px) {
  .quux {}
}

Usage

postcss([ require('postcss-mq-optimize') ])

See PostCSS docs for examples for your environment.