This package has been deprecated

    Author message:

    Switch to postcss-custom-properties instead

    postcss-vars

    0.1.0 • Public • Published

    postcss-vars

    Add a "not so bad" CSS custom properties support to your CSS, using PostCSS. This is not a polyfill. Native custom properties are way more powerful, due to cascade and inheritance.

    Largely inspired by rework-vars.

    Install

    npm install postcss-vars

    Use

    Only variables defined in :root (and not in media-queries) will be used. Let's take this css:

    :root {
        --color-one: blue;
        --color-two: green;
        --color-three: var(--color-two);
    }
    .elem {
        color: var(--color-one);
    }
    .item {
        background: linear-gradient(var(--color-two)red);
    }
    @media (min-width: 50em) {
        .elem {
            color: var(--color-two);
        }
    }

    Fix variables, and you will get the following output:

    :root {
        --color-one: blue;
        --color-two: green;
        --color-three: var(--color-two);
    }
    .elem {
        color: blue;
    }
    .item {
        background: linear-gradient(greenred);
    }
    @media (min-width: 50em) {
        .elem {
            color: green;
        }
    }

    API

    processor

    This is the core function. Combine it with others PostCSS plugins, such as Autoprefixer:

    var autoprefixer = require('autoprefixer'),
        postcssVars = require('postcss-vars'),
        postcss = require('postcss');
    var fixed = postcss().
                use(postcssVars.processor).
                use(autoprefixer.postcss).
                process(css).css;

    postcss

    This is the full process function. Pass the css as the first argument and grab your fixed CSS.

    var postcssVars = require('postcss-vars');
    var fixed = postcssVars.postcss(css).css;

    License

    MIT

    Keywords

    none

    Install

    npm i postcss-vars

    DownloadsWeekly Downloads

    0

    Version

    0.1.0

    License

    none

    Last publish

    Collaborators

    • iamvdo