rule-expander

CSS Rule Generator

Installation

Web

<script type='text/javascript' src='https://rawgit.com/ISNIT0/rule-expander/master/index.js'></script>

Node

npm i --save-dev rule-expander

Usage

Web

var rule = '.u-${directions.char}-10 {${directions.dir}:10px;}';
var config = {
    directions: [{
        char: 'l',
        dir: 'left'
    }]
};
 
document.write(RuleExpander(rule, config));

Node

var RuleExpander = require('rule-expander');
 
var rule = '.u-${directions.char}-10 {${directions.dir}:10px;}';
var config = {
    directions: [{
        char: 'l',
        dir: 'left'
    }]
};
 
console.log(RuleExpander(rule, config));

Gulp

https://github.com/ISNIT0/gulp-css-rule-expander

Backgorund:

https://weblog.sh/~joe/generating-css-utilities-the-functional-way-NkyvaECHx