@u1f992/rehype-selector-transforms

This package provides reusable, high-level rehype plugins for applying declarative document transformations with CSS selectors. Transformations are applied in configuration order, so each one can operate on the results of earlier transformations.

They can keep Markdown manuscripts readable in ordinary previews while adding or removing typesetting-specific structures for CSS typesetting in Vivliostyle CLI.

empty

The empty plugin removes all child nodes from elements matching CSS selectors.

A cross-reference anchor can be left empty because CSS-generated content supplies its label:

[](#fig){.xref-img}

![caption](img.png){#fig}

figure {
  counter-increment: img;
}

figcaption::before {
  content: "Figure " counter(img);
}

.xref-img::before {
  content: "Figure " target-counter(attr(href), img);
}

An ordinary Markdown preview does not evaluate this CSS, so the empty anchor has no visible label. Text can be added to the anchor for the preview:

[Figure ??](#fig){.xref-img}

Figure ?? is an actual child of the anchor, not a fallback interpreted by CSS. If left in place, it appears alongside the generated label during typesetting. This plugin removes all children from matching elements before typesetting while preserving the elements and their attributes.

wrap and wrapInner

Some complex typesetting layouts require nested boxes that cannot be produced by a single element's margin, border, and padding. The wrap and wrapInner plugins add div or span wrappers around selected elements or their contents, keeping presentational markup out of Markdown source documents.

wrap

The wrap plugin places a generated element around each selected element.

Applying wrap repeatedly to the same element creates multiple layers from the outside in:

<div class="heading-outer">
  <div class="heading-inner">
    <h1>Heading</h1>
  </div>
</div>

wrapInner

The wrapInner plugin preserves the selected element and wraps all of its children in a generated element. For example, wrapInner can insert a span as a formatting box inside a heading or another element that accepts phrasing content. This keeps presentational markup out of Markdown source documents.

<h1>
  <span class="heading-content">Heading</span>
</h1>

More advanced replacements

The replace plugin supports transformations that cannot be expressed as a fixed inner or outer wrapper. It can replace each selected element with any number of generated nodes.