Nibbling Perfect Macaroni

    sheetify-custom-media

    1.0.1 • Public • Published

    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

    Install

    npm i sheetify-custom-media

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • bret
    • goto-bus-stop
    • yoshuawuyts
    • ahdinosaur
    • hughsk
    • jongacnik
    • zhouhancheng