sheetify-custom-media

A sheetify transform to add support for W3C-style CSS custom media queries syntax. Uses rework-custom-media to perform the transformation.

N.B. This is not a polyfill. This transform aims to provide a future-proof way of using a limited subset of the features provided by native CSS custom media queries.

Installation

npm install sheetify-custom-media

Usage

As a sheetify transform:

var media = require('sheetify-custom-media');
var sheetify = require('sheetify');

sheetify('path/to/my/index.css')
  .transform(media())
  .bundle();

Options

map

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

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

variables({map: myQueries});

CSS syntax

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

@custom-media <extension-name> <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 */
}

License

MIT