Niche Portobello Mushroom

    This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

    postcss-media-variables

    2.0.1 • Public • Published

    PostCSS CSS Variables in @media queries

    PostCSS plugin to use CSS Custom Properties in @media query parameters.

    There's no specification for this! (but it feels so natural..)

    Example

    /* input */
    :root {
        --min-width: 1000px;
        --smallscreen: 480px;
    }
    @media (min-width: var(--min-width)) {}
    @media (max-width: calc(var(--min-width) - 1px)) {}
     
    @custom-media --small-device (max-width: var(--smallscreen));
    @media (--small-device) {}
    /* output */
    @media (min-width: 1000px) {}
    @media (max-width: 999px) {}
    @media (max-width: 480px) {}

    Install

    npm install postcss-media-variables --save-dev

    Usage

    postcss-media-variables has to be used twice!

    Every other plugin is optional, but keep this order of plugins if you use any of them.

    Since v1.1.0, this plugin plays well with postcss-custom-media!

    Example

    var fs = require('fs');
    var postcss = require('postcss');
     
    var mediaVariables = require('postcss-media-variables');
    var cssVariables = require('postcss-css-variables');
    var customMedia = require('postcss-custom-media');
    var calc = require('postcss-calc');
     
    var mycss = fs.readFileSync('input.css', 'utf8');
     
    // Process your CSS
    var output = postcss()
        .use(mediaVariables()) // first run
        .use(customMedia(/* options */))
        .use(cssVariables(/* options */))
        .use(calc(/* options */))
        .use(mediaVariables()) // second run
        .process(mycss, { /* postcss - options */ })
        .css;
     
    console.log(output);

    For more general PostCSS usage, see this section

    In the first run, postcss-media-variables inspects every @media and every @custom-media rule, parses their params and wraps the affected @media rules into helper rules. The information in the helper rules are calculated and resolved then. In the second run, this plugin removes those helper rules again and uses the newly calculated information from there to change the @media-rule parameters.

    Non-Standard and not proposed - so why?

    This plugin is created in personal need of a solution for the issue Resolve variables in media queries .

    Install

    npm i postcss-media-variables

    DownloadsWeekly Downloads

    2,996

    Version

    2.0.1

    License

    MIT

    Last publish

    Collaborators

    • wolfgangkluge