babel-plugin-em-media-query

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
babel-plugin-em-media-query
021.2.36 years ago7 years agoMinified + gzip package size for babel-plugin-em-media-query in KB

Readme

babel-plugin-em-media-query
!Build Statusci-imgci
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 optionsbabel-plugins.
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)';

Options

precision

Type: Integer
Default: 5
Rounding precision for values.

License

MIT © Ivan Nikolić