Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including postcss-media-query-filter with all npm packages installed. Try it out:

var postcssMediaQueryFilter = require("postcss-media-query-filter")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

postcss-media-query-filter v0.1.0

PostCSS plugin which allows to remove undesirable media-queries from output depending on provided min/max width

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free