postcss-external-vars

    1.3.0 • Public • Published

    postcss-external-vars Build Status

    PostCSS plugin for injecting external variables to your CSS.

    /* Input example */
    .foo {
      color: $color.primary;
    }
    /* Output example */
    .foo {
      color: #bada55;
    }

    Install

    $ npm install postcss-external-vars
    

    Usage

    const externalVars = require('postcss-external-vars');
     
    const data = {
        color: {
            primary: '#bada55',
            background: '#1337af'
        }
    };
     
    const css = '.foo {color: $color.primary}';
     
    // Use stand-alone:
    const result = externalVars.process(css, {data}).css;
    //=> '.foo {color: #bada55}'
     
    // Or as PostCSS plugin:
    const postcss = require('postcss');
     
    const result = postcss([externalVars({data})]).process(css).css;
    //=> '.foo {color: #bada55}'

    Check PostCSS docs out for examples in your preferred environment.

    API

    externalVars([opts])

    opts

    data

    Type: object
    Required

    An object of properties to be used within your CSS.

    prefix

    Type: string
    Default: $

    A prefix for variable names. May contain several characters.

    externalVars.tester([opts])

    Returns a function that will accept string to check if it contains any variables and return boolean. Useful to filter your css declarations before processing.

    Options are the same.

    externalVars.matcher([opts])

    Returns a function that will accept string and return an array of all the matched variable names within it.

    Options are the same.

    License

    MIT © Dmitriy Sobolev

    Install

    npm i postcss-external-vars

    DownloadsWeekly Downloads

    707

    Version

    1.3.0

    License

    MIT

    Last publish

    Collaborators

    • dsblv