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.