gulp-harpy-css
v0.4.0
Published
Harpy CSS generator for gulp
Downloads
17
Readme
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:
- Every rule contains exactly one declaration.
- There are never two rules with the same declaration wrapped in the same media query.
- Rules can have more than one selector
- 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:
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