1.0.2 • Published 10 years ago

gulp-ruleexpander v1.0.2

Weekly downloads
-
License
Unlicense
Repository
-
Last release
10 years ago

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.

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago