postcss-nested-vars
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    postcss-nested-vars

    NPM version npm license Travis Build Status codecov Dependency Status

    npm

    PostCSS plugin for nested Sass-like variables.

    Introduction

    Instead of assuming all variables are global, this plugin assumes the variable for which you are looking can be found in the current nested container context or in one of its ancestors (i.e., root, rule or at-rule).

    $color: red;
    a {
        color: $color;
        $color: white;
        color: $color;
        b {
            color: $color;
            $color: blue;
            color: $color;
        }
        color: $color;
    }

    Transpiles into:

    a {
        color: red;
        color: white;
        b {
            color: white;
            color: blue;
        }
        color: white;
    }

    You can also target rule selectors, at-rule params and declaration properties with a special $(varName) syntax, same as postcss-simple-vars:

    $bar: BAR;
    $(bar{}
    @media foo$(bar) {
        foo-$(bar)-baz: qux;
    }

    Transpiles into:

    BAR {}
    @media fooBAR {
        foo-BAR-baz: qux;
    }

    Related Projects

    Installation

    $ npm install postcss-nested-vars
    

    Usage

    JavaScript

    postcss([ require('postcss-nested-vars')(/* options */) ]);

    TypeScript

    import * as postcssNestedVars from 'postcss-nested-vars';
     
    postcss([ postcssNestedVars(/* options */) ]);

    Options

    globals

    Type: Object
    Required: false
    Default: {}

    Global variables that can be referenced from any context.

    logLevel

    Type: string: <error|warn|silent>
    Required: false
    Default: error

    If a variable cannot be resolved, this specifies how to handle it. warn and silent modes will preserve the original values (e.g., $foo will remain $foo).

    Testing

    Run the following command:

    $ npm test
    

    This will build scripts, run tests and generate a code coverage report. Anything less than 100% coverage will throw an error.

    Watching

    For much faster development cycles, run the following commands in 2 separate processes:

    $ npm run build:watch
    

    Compiles TypeScript source into the ./dist folder and watches for changes.

    $ npm run watch
    

    Runs the tests in the ./dist folder and watches for changes.

    Install

    npm i postcss-nested-vars

    DownloadsWeekly Downloads

    547

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • jedmao