1.0.4 • Published 6 months ago

rehype-wrap-sibling v1.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

rehype-wrap-sibling

build npm version

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

NameTypeDescription
selectorstringCSS selector to select an element(s).
wrapperstring?Element to wrap the selected element and its sibling.
wrapPreviousSiblingboolean?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