PostCSS Forced Variables

Description

The plugins purpose is to help enforce more consistent SASS-like variable usage in stylesheets.

Features

Reads an array of CSS properties and provides warnings when these properties could be using pre-existing variables.

Throws errors when CSS properties from the array do not use variables.

Setup:

npm install postcss-forced-variables

Follow the format below:

// require in postcss-forced-variables
var forcedVariables = require('postcss-forced-variables');

//  ...

// add the following call to your processors array.
// ruleset must be an Array of CSS properties.
// variables must be an Object of Key:Value pairs consisting of $Variable:Value
forcedVariables({ruleset : ['color', 'font-size'], variables : { $white : 'fff', $fontLarge : '16px'});

Example of Warning Generation

/* Consider the following CSS being processed */
.body { 
  color: #fff;
}

// The following call will result in a Warning that the value #fff has a variable which can be used in the CSS.
forcedVariables({ruleset : ['color'], variables : { $white : 'fff'});

Example of console warning output:

forced-variables : <css input>: Warning! The value #fff has a variable that could be used here. 

Example of Error Generation

.body { 
  color: #fff
}

// The following call will result in an Error being thrown that states a variable must be used in the CSS.
forcedVariables({ruleset : ['color'], variables : { $white : 'fff'});

Example of error output:

Error: forced-variables: <css input> Error! Variable have been set to required for this rule
.body { 
  color: #fff
}

Feel free to e-mail me at alekhrycaiko@gmail.com with any suggestions or questions!