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).

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.