PostCSS Media MinMax

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.

Current Tags

3.0.1 ... latest (2 months ago)

PostCSS Media MinMax

Usage

Current Tags

29 Versions