Miss any of our Open RFC calls?Watch the recordings here! »

postcss-media-query-filter

0.1.0 • Public • Published

postcss-media-query-filter Build Status

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,
}

Input:

@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;
    }
}

Output:

.cn1 {
    color: red;
}
 
@media all and (min-width: 200px) and (max-width: 600px) {
    .cn2 {
        color: blue;
    }
}

Usage

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.

Install

npm i postcss-media-query-filter

DownloadsWeekly Downloads

14

Version

0.1.0

License

MIT

Unpacked Size

150 kB

Total Files

12

Last publish

Collaborators

  • avatar