gulp-harpy-css

Harpy CSS generator for gulp

Introduction

Harpy CSS is a tool that will help you create DRY CSS utility classes with all the power of Javascript at your hands. This is a gulp wrapper around the harpy-css package. The CSS generated by harpy-css follows a certain form, adhering to these rules:

1. Every rule contains exactly one declaration.
2. There are never two rules with the same declaration wrapped in the same media query.
3. Rules can have more than one selector
4. Each selector consist of exactly one class and one optional pseudo-class

How to use

Install using npm:

npm install --save-dev gulp-harpy-css

Use it in your gulpfile.js:

var harpy = require('gulp-harpy-css');
 
gulp.task('harpy-css', function() {
    return gulp.src('src/harpy/**/*.js')
    .pipe(harpy())
    .pipe(gulp.dest('dist/css'));
});

css will be available for you in your source files. It’s a Harpy CSS instance created with require('harpy-css').create(). After your code, css.stringify() will be run to retrieve the resulting css. In the file you will also have the following global variables:

• console: same as usual
• _: lodash
• color: color

You can pass more variables into the sourcefile by adding them in the call to gulp-harpy-css, like this:

var myObject = {
    foo: 'bar'
};
 
gulp.task('harpy-css', function() {
    return gulp.src('src/harpy/**/*.js')
    .pipe(harpy({
        'myObject': myObject
    }))
    .pipe(gulp.dest('dist/css'));
});

Example

Example source file:

css.add({
    name: 'mtm',
    property: 'margin-top',
    value: '1rem',
});
 
css.add({
    name: 'mvm',
}, {
    'marginTop': '1rem',
    'marginBottom': '1rem',
});
 
css.add({
    name: 'mhm',
}, [
    {
        property: 'margin-right',
        value: '1rem',
    }, {
        property: 'margin-left',
        value: '1rem',
    }
]);

The resulting CSS file:

.mtn,
.mvm {
    margin-top: 1rem
}
 
.mvm {
    margin-bottom: 1rem
}
 
.mhm {
    margin-right: 1rem
}
 
.mhm {
    margin-left: 1rem
}

Tips

If you want to generate a SCSS file instead so you can include it in your sass, use the gulp-rename to change the extention:

var harpy = require('gulp-harpy-css');
var harpy = require('gulp-rename');
 
gulp.task('harpy-css', function() {
    return gulp.src('src/harpy/**/*.js')
    .pipe(harpy())
    .pipe(rename({
        extname: '.scss',
    }))
    .pipe(gulp.dest('src/scss/harpy'));
});

When there are syntax or runtime errors in your source JS files, the task will stop. To prevent this you need an error handler, for example gulp-plumber together with gulp-notify:

var harpy = require('gulp-harpy-css');
var plumber = require('gulp-plumber');
var notify = require("gulp-notify");
 
gulp.task('harpy-css', function() {
    return gulp.src('src/harpy/**/*.js')
    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
    .pipe(harpy())
    .pipe(gulp.dest('dist/css'))
    .pipe(notify("harpy-css task complete"));
});

API

Read all about the harpy-css API in the harpy-css readme