broccoli-themer

broccoli-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 broccoli-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 broccoli-themer as a development dependency:

npm install --save-dev broccoli-themer

Then, add it to your Brocfile.js:

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

themer(tree, selectors, 'output-file')

Ouput JSON file:

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

LICENSE

MIT