PostCSS plugin which allows to remove undesirable media-queries from output depending on provided min/max width
Let's assume next options were provided to plugin:
{
minWidth: 500,
maxWidth: 1000,
}
@media all and (min-width: 100px) {
.cn1 {
color: red;
}
}
@media all and (min-width: 200px) and (max-width: 600px) {
.cn2 {
color: blue;
}
}
@media all and (max-width: 400px) {
.cn3 {
color: green;
}
}
@media all and (min-width: 1200px) {
.cn4 {
color: white;
}
}
.cn1 {
color: red;
}
@media all and (min-width: 200px) and (max-width: 600px) {
.cn2 {
color: blue;
}
}
postcss([ require('postcss-media-query-filter')(options) ])
Options:
- minWidth - Number (defaults to -Infinity) - styles for lower width will be treated as not needed
- maxWidth - Number (defaults to Infinity) - styles for higher width will be treated as not needed
- type - String (defaults to screen) - media query type which will be used by css-mediaquery for matching (all, screen, print etc)
See PostCSS docs for examples for your environment.