gulp-ruleexpander

Rule Expander

##Usage

npm install --save-dev gulp-ruleexpander

var RuleExpander = require('gulp-ruleexpander');

gulp.task('default', function(){
  return gulp.src('./site.css')
    .pipe(RuleExpander(require('./config.json'))) // Loads config from local file
    .pipe(gulp.dest('./dist'));
});

##Reasoning I recently became interested in 'Functional CSS'. It's great, and I went kinda crazy with Utility classes. The main problem I encountered was to do with maintainability:

//Backgrounds
u-bg-colour-1 {background-color:@colour-1;}
u-bg-colour-2 {background-color:@colour-1;}
u-bg-colour-3 {background-color:@colour-1;}
u-bg-colour-4 {background-color:@colour-1;}

//Colors
u-co-colour-1 {color:@colour-1;}
u-co-colour-2 {color:@colour-1;}
u-co-colour-3 {color:@colour-1;}
u-co-colour-4 {color:@colour-1;}

//Border-Colours
...

You may be able to see that adding a colour, will require modifying many different parts of the file. It gets worse when you introduce modifiers:

//Backgrounds
u-bg-colour-1 {background-color:@colour-1;}
u-bg-colour-2 {background-color:@colour-1;}
u-bg-colour-3 {background-color:@colour-1;}
u-bg-colour-4 {background-color:@colour-1;}
//Backgrounds: hover
u-bg-colour-1--hover:hover {background-color:@colour-1;}
u-bg-colour-2--hover:hover {background-color:@colour-1;}
u-bg-colour-3--hover:hover {background-color:@colour-1;}
u-bg-colour-4--hover:hover {background-color:@colour-1;}
//Backgrounds: selected
u-bg-colour-1--selected[aria-selected=true] {background-color:@colour-1;}
u-bg-colour-2--selected[aria-selected=true] {background-color:@colour-1;}
u-bg-colour-3--selected[aria-selected=true] {background-color:@colour-1;}
u-bg-colour-4--selected[aria-selected=true] {background-color:@colour-1;}

//Colors
...

You will probably also notice that a lot of code is re-used, making maintenance a time-consuming and laborious process. The above, when using CSS-Rule-Expander, can be represented by the following:

//Backgrounds
.u-bg-${colours}${modifiers.name}${modifiers.selector} {background-color:${colours};}

//Colors
...

This is all based on JSON data behind the scenes, so adding a colour, is as simple as inserting a string.

More Examples:

//Backgrounds
.u-bg-${colours}${modifiers.name}${modifiers.selector} {background-color:${colours};}

//Colors
.u-co-${colours}${modifiers.name}${modifiers.selector} {color:${colours};}

/* Borders
---------------------------------- */
//Colours
.u-bo-c-${colours}${modifiers.name}${modifiers.selector} {border-color:${colours};}

//Border Widths
.u-b${directions.char}-${lengths} {border-${directions.name}:${lengths}px;}

//Border Styles
.u-bs-${borderstyles} {border-style:${borderstyles};}

{
    "colours": [ "red", "green"],
    "modifiers": [{
        "name": "--hover",
        "selector": ":hover"
  }, {
        "name": "--active",
        "selector": ":active"
  }],
    "directions": [{
        "char": "t",
        "name": "top"
    }, {
        "char": "b",
        "name": "bottom"
    }, {
        "char": "l",
        "name": "left"
    }, {
        "char": "r",
        "name": "right"
    }],
    "lengths":[0, 1, 2, 5, 10, 15, 30, 50],
    "borderstyles":["solid", "dashed"]
}

The above becomes 165 lines worth of utility classes. Notice there are no 'each' loops, everything gets automatically unpacked.