# red-perfume-html

> Atomizer of CSS classes in HTML strings

Latest version **0.4.1** (published 2022-01-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install red-perfume-html
pnpm add red-perfume-html
yarn add red-perfume-html
bun add red-perfume-html
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2022-01-01 |
| First published | 2022-01-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 40.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | The Jared Wilcurt |
| Maintainers | thejaredwilcurt |
| Keywords | html, atomizer, atomic, build, tool |

## Links

- npm: https://www.npmjs.com/package/red-perfume-html
- Repository: https://github.com/red-perfume/red-perfume-html
- Homepage: https://github.com/red-perfume/red-perfume-html#readme
- Issues: https://github.com/red-perfume/red-perfume-html/issues
- npm.io page: https://npm.io/package/red-perfume-html

## Dependencies (1)

- [parse5](https://npm.io/package/parse5.md) ^6.0.1

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.4.1 (latest) — 2022-01-01

## README

# 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`

```js
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.

---
_Source: https://npm.io/package/red-perfume-html · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._