babel-plugin-media-query-gap

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

Useful when you want to prevent double breakpoints.

Install

npm install babel-plugin-media-query-gap --save

Usage

Use it via available plugin activation options.

For .babelrc file:

{
	"plugins": [
		"babel-plugin-media-query-gap"
	]
}

Then, in your code:

/* Before */

// Standard matchMedia call
window.matchMedia('screen and (max-width:600px)');

// Special leading comment before string or template literal
const jackie = /* @media */ 'screen and (max-width:600px)';

/* After */

window.matchMedia('screen and (max-width:599px)');

const jackie = /* @media */ 'screen and (max-width:599px)';

License

MIT © Ivan Nikolić