Babel-plugin-em-media-query NPM

babel-plugin-em-media-query

Babel plugin for transforming min/max-width/height media queries to ems.

Install

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

Usage

Use it via available plugin activation options.

For .babelrc file:

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

Then, in your code:

/* Before */

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

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

/* After */

window.matchMedia('screen and (min-width:37.5em) and (max-width:46.1875em)');

const jackie = 'screen and (min-width:37.5em)';