Skip to content

PostCSS plugin to declare global variables, accepts some internal references

License

Notifications You must be signed in to change notification settings

m18ru/postcss-global-vars

Repository files navigation

NPM Dependencies DevDependencies Tests

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.

About

PostCSS plugin to declare global variables, accepts some internal references

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published