rehype-wrap-sibling

A rehype plugin to wrap a selected element and its sibling in a container element.

• The plugin will wrap all occurrences of the provided selector and its sibling if one exists.
• The selected element(s) and next sibling are wrapped by default.
• HTML comments between the selected element(s) and sibling element will not be preserved.
• The plugin doesn't prettify output of the wrapper: whitespace, line endings, etc.

Installation

This package is ESM only. In Node.js (version 18+), install with npm:

npm i rehype-wrap-sibling

Usage

/* example.js */

import * as fs from 'node:fs/promises';
import { rehype } from 'rehype';
import rehypeWrapSibling from 'rehype-wrap-sibling';

const document = await fs.readFile('./input.html', 'utf8');

const file = await rehype()
	.data('settings', { fragment: true })
	.use(rehypeWrapSibling, {
		selector: 'h1',
		wrapper: 'hgroup#doc-title',
	})
	.process(document);

await fs.writeFile('./output.html', String(file));

<!-- input.html -->

<h1>HTML: Living Standard</h1>
<p>Last Edited: 7 July 2022</p>

<!-- output.html -->

<hgroup id="doc-title"><h1>HTML: Living Standard</h1><p>Last Edited: 7 July 2022</p></hgroup>

Options

Name | Type | Description ---|---|--- selector | string | CSS selector to select an element(s). wrapper | string? | Element to wrap the selected element and its sibling. wrapPreviousSibling | boolean? | If true, the selected element(s), and its previous sibling are wrapped.

• If no wrapper option is provided by the user, the default container element will be <div></div>.
• The selector option can be a CSS selector supported via hast-util-select.
• The wrapper option can be a selector supported via hast-util-parse-selector.

License

MIT :copyright: James Williams