postcss-media-query-gap

PostCSS plugin for applying gap on max-width/height media queries.

Useful when you want to prevent double breakpoints.

Install

npm install postcss postcss-media-query-gap --save

Usage

import postcss from 'postcss';
import mediaQueryGap from 'postcss-media-query-gap';

postcss([
	mediaQueryGap({
		/* options */
	})
]);

/* Before */

@media screen and (min-width: 600px) and (max-width: 739px) {
	.foo {
		color: red;
	}
}

/* After */

@media screen and (min-width: 600px) and (max-width: 738px) {
	.foo {
		color: red;
	}
}

License

MIT © Ivan Nikolić