postcss-global-vars
v1.0.0
Published
PostCSS plugin to declare global variables, accepts some internal references
Downloads
32
Maintainers
Readme
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
License
MIT.