Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@csstools/postcss-media-minmax

csstools6.4mMIT2.0.8TypeScript support: included

Use the range notation in CSS media queries

media queries, postcss-plugin, range

readme

PostCSS Media MinMax PostCSS Logo

npm install @csstools/postcss-media-minmax --save-dev

PostCSS Media MinMax lets you use the range notation in media queries following the Media Queries 4 Specification.

@media screen and (width >=500px) and (width <=1200px) {
    .bar {
        display: block;
    }
}

/* becomes */

@media screen and (min-width:500px) and (max-width:1200px) {
    .bar {
        display: block;
    }
}

Usage

Add PostCSS Media MinMax to your project:

npm install postcss @csstools/postcss-media-minmax --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssMediaMinMax = require('@csstools/postcss-media-minmax');

postcss([
    postcssMediaMinMax(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

See prior work by yisibl here postcss-media-minmax To ensure long term maintenance and to provide the needed features this plugin was recreated based on yisibl's work.

changelog