postcss-global-vars

PostCSS plugin to declare global variables, accepts some internal references.

It’s based on postcss-external-vars plugin, some kind of fork, but totally rewritten in TypeScript.

The main idea is to allow internal references (use some variables in the value of other variables).
Also, it can process variables in media-queries.

Example

Input:

div.test
{
    width: $global.test.width;
    height: $global.test.height;
    padding: $global.test.padding.vertical $global.test.padding.horizontal;
}
 
@media (max-width: $global.screen.mobile)
{
    width: calc($global.test.width / 2);
}

Data:

{
    "test": {
        "width": "200px",
        "height": "100px",
        "padding": {
            "vertical": "10px",
            "horizontal": "20px"
        }
    },
    "screen": {
        "mobile": "700px"
    }
}

Output:

div.test
{
    width: 200px;
    height: 100px;
    padding: 10px 20px;
}
 
@media (max-width: 700px)
{
    width: calc(200px / 2);
}

Install

npm install --save-dev postcss-global-vars

Usage

const postcss = require( 'postcss' );
const globalVars = require( 'postcss-global-vars' ).default;
 
const data = {
    colors: {
        main: 'red',
        lighter: 'color($global.colors.main l(+30%))',
    },
};
 
const css = '.test {color: $global.colors.main; background: $global.colors.lighter;}';
 
const result = postcss( [globalVars( {data} )] ).process( css ).css;
 
console.log( result ); // => '.test {color: red; background: color(red l(+30%));}'

Options

prefix

Type: string
Default: '$global.'

A prefix for global variable name.

data

Type: object
Default: {data:{}}

Data to be used as global variables.

Interface:

interface VariablesData
{
    [key: string]: string | number | VariablesData;
}

Change Log

View changelog.

License

MIT.