babel-plugin-media-query-gap

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
babel-plugin-media-query-gap
121.2.37 years ago8 years agoMinified + gzip package size for babel-plugin-media-query-gap in KB

Readme

babel-plugin-media-query-gap
!Build Statusci-imgci
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 optionsbabel-plugins.
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ć