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:

// 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

map

Optionally, you may define the <media-query-list> for each <extension-name> in a JavaScript object that is passed to the function.

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.

@custom-media <extension-name> <media-query-list>;

This defines that the custom media query named by the <extension-name> represents the given <media-query-list>.

The <extension-name> can then be used in a media feature. The alias must be wrapped in parentheses.

@custom-media --narrow-window screen and (max-width: 30em);
 
@media (--narrow-window) {
  /* narrow window styles */
}

If an undefined <extension-name> 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