Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including sheetify-custom-media with all npm packages installed. Try it out:

var sheetifyCustomMedia = require("sheetify-custom-media")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

sheetify-custom-media v1.0.1

Spec compliant CSS custom media query syntax for sheetify

sheetify-custom-media

NPM version build status Test coverage Downloads

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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free