chrisvariety/gulp-themer

Generates JSON hashmap of css selectors for theming.

gulp-themer

Generates JSON hashmap of css selectors for theming.

Let's say you want to provide options for theming your site to the end user.

You could structure your CSS like so:

.font {
  unicode-bidi: normal; // dummy property, use whatever you like
}

.alt-font {
  unicode-bidi: normal;
}

// in another file far far away...

body {
  @extend .font;
}

h1, h2, h3 {
  @extend .alt-font;
}

Then, running gulp-themer on the CSS file, you should get a json file full of selectors:

{
  "font": "body",
  "alt-font": "h1, h2, h3"
}

You can then use these selectors to apply your end user's custom colors.

Usage

First, install gulp-themer as a development dependency:

npm install --save-dev gulp-themer

Then, add it to your Gulpfile.js:

var themer = require('gulp-themer');

gulp.task('scripts', function() {
    gulp.src('./css/**/*.css')
        .pipe(themer(['font', 'alt-font']))
        .pipe(gulp.dest('./public/dist/'))
});

Ouput JSON file:

{
  "font": "body, .selector-one",
  "alt-font": "h1, h2, h3, .selector-two"
}

LICENSE

MIT