node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »


rework-custom-media Build Status

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


npm install rework-custom-media


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();



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.