Skip to content

red-perfume/red-perfume-html

Repository files navigation

red-perfume-html

Replaces the classes applied in HTML with atomized versions based on a class map generated by red-perfume-css (see example below).

Contributing

All work for this project is documented and organized in this GitHub Project. Look for "Help Wanted". It is prioritized, top to bottom.

Usage

  1. npm install --save-dev red-perfume-html
const redPerfumeHtml = require('red-perfume-html');

const results = redPerfumeHtml({
  input: '<div class="dog"></div>',
  classMap: {
    '.dog': ['rp__padding__--COLON8px']
  }
});

console.log(results);

// Results would looks somewhat like this. (subject to change before v1.0.0)
{
  atomizedHtml: '<div class="rp__padding__--COLON8px"></div>',
  markupErrors: []
}

API:

Key Type Default Description
verbose Boolean true If true, consoles out helpful warnings and errors using customLogger or console.error.
customLogger Function console.error Advanced - You can pass in your own custom function to log errors/warnings to. When called the function will receive a message string for the first argument and sometimes an error object for the second argument. This can be useful in scenarios like adding in custom wrappers or colors in a command line/terminal. This function may be called multiple times before all tasks complete. Only called if verbose is true. If not provided and verbose is true, normal console.error messages are called.
classMap Object {} A class map generated by red-perfume-css. { 'dog': ['rp_0', 'rp_1'] }
input String '' A string of any valid HTML to be atomized. '<div class="dog"></div>'

Returns: an object containing these keys

Keys Type Description
atomizedHtml string The input string after atomized classes have been replaced.
markupErrors array An array of errors from attempting to read/write/parse/stringify markup files.