# rehype-class-names

> A utility plugin to use with rehype that adds class names to HAST (html tree)

Latest version **2.0.0** (published 2024-03-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install rehype-class-names
pnpm add rehype-class-names
yarn add rehype-class-names
bun add rehype-class-names
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2024-03-25 |
| First published | 2023-01-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 3.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Rider Jensen |
| Maintainers | riderjensen |
| Keywords | rehype, hast, classes |

## Links

- npm: https://www.npmjs.com/package/rehype-class-names
- Repository: https://github.com/riderjensen/rehype-class-names
- Homepage: https://github.com/riderjensen/rehype-class-names#readme
- Issues: https://github.com/riderjensen/rehype-class-names/issues
- npm.io page: https://npm.io/package/rehype-class-names

## Dependencies (4)

- [unified](https://npm.io/package/unified.md) ^11.0.4
- [@types/hast](https://npm.io/package/@types/hast.md) ^3.0.0
- [hast-util-select](https://npm.io/package/hast-util-select.md) ^6.0.0
- [hast-util-classnames](https://npm.io/package/hast-util-classnames.md) ^3.0.0

## Recent versions

- 2.0.0 (latest) — 2024-03-25
- 1.0.14 — 2023-08-15
- 1.0.13 — 2023-08-13
- 1.0.12 — 2023-08-12
- 1.0.11 — 2023-01-23
- 1.0.10 — 2023-01-23
- 1.0.9 — 2023-01-23
- 1.0.8 — 2023-01-23
- 1.0.7 — 2023-01-23
- 1.0.6 — 2023-01-23
- 1.0.5 — 2023-01-23
- 1.0.4 — 2023-01-23
- 1.0.3 — 2023-01-23
- 1.0.2 — 2023-01-23
- 1.0.1 — 2023-01-23
- … 1 more at https://npm.io/package/rehype-class-names/versions

## README

# Rehype Class Names

Adding classes to elements with rehype. Includes typescript support

## Installation

```
npm install rehype-class-names
```

## API

### `rehype().use(addClasses, additions])`

Add to `rehype` or `unified` pipeline with `.use`, where `additions` is an object
with keys that are the css selectors and the values are the classes you want to add.  

For more information on what keys you can pass, see the [`hast-util-select`](https://github.com/syntax-tree/hast-util-select#support) documentation.
For more information on what values you can pass, see the [`hast-util-classnames`](https://github.com/syntax-tree/hast-util-classnames#use) documentation.

Example:

```js
.use(addClasses, {
    'h1,h2,h3': 'title',
    h1: 'is-1',
    h2: 'is-2',
    h3: { 'hello': false, 32: true },
    h4: 10,
    h5: [],
    p: 'one two',
    a: "test",
    ol: "list-decimal",
    li: ['test', 'mega'],
})
```

This will output

```html
<h1 class="title is-1">header</h1>
<h2 class="title is-2">sub 2</h2>
<h3 class="title 32">sub 3</h3>
<h4 class="10">sub 4</h4>
<h5 class="">Sub 5</h5>
<p class="one two">
  Profile pictures are important.
  <a href="riderjensen.com" class="test">Rider Jensen</a>
</p>
<ol class="list-decimal">
  <li class="test mega">Create a Github repository</li>
  <li class="test mega">Pushed up code</li>
  <li class="test mega">Connect account to Github</li>
</ol>
```

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