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.