rework-custom-media 

A Rework (>=1.0.0) plugin to add support for the
W3C-style CSS Custom Media Queries syntax.

Installation

``
npm install rework-custom-media
`

Use

As a Rework plugin:

`js
// dependencies
var fs = require('fs');
var rework = require('rework');
var media = require('rework-custom-media');

// css to be processed
var css = fs.readFileSync('build/build.css', 'utf8').toString();

// process css using rework-custom-media
css = rework(css).use(media()).toString();
`

Options

$3

Optionally, you may define the for each
in a JavaScript object that is passed to the function.

`js
var options = {
map: {
'--wide-screen': 'screen and (min-width:900px)'
}
}

var out = rework(css).use(media(options)).toString();
`

CSS syntax

A custom media query is defined with the @custom-media rule. Its scope is
global.

`css
@custom-media ;
`

This defines that the custom media query named by the
represents the given .

The can then be used in a media feature. The alias must be
wrapped in parentheses.

`css
@custom-media --narrow-window screen and (max-width: 30em);

@media (--narrow-window) {
/ narrow window styles /
}
`

If an undefined ` is used by a media feature, the media
feature will be stripped from the output, and a warning will be logged to the
console.

License

MIT