refrakt inspect

Shows the HTML that the identity transform produces for any rune — BEM classes, data attributes, structural elements, and consumed meta tags. Use this to understand exactly what CSS selectors you need to write.

Basic usage

refrakt inspect hint --type=warning

This outputs the fully transformed HTML for a Hint rune with type="warning", showing the classes, data attributes, and structural elements the engine generates.

Variant expansion

Use =all to see every variant of an attribute at once:

refrakt inspect hint --type=all

This expands the type attribute across all its allowed values (note, warning, tip, etc.), so you can see the full set of BEM modifier classes and data attributes your CSS needs to cover.

Setting multiple attributes

Pass any rune attribute as a flag:

refrakt inspect api --method=POST --path="/users" --auth="Bearer token"

Listing runes

# Human-readable list
refrakt inspect --list

# JSON for scripting
refrakt inspect --list --json

Options

CSS audit

The --audit flag checks which generated selectors have matching rules in your CSS files.

Audit a single rune

refrakt inspect hint --audit

This generates all possible selectors for the Hint rune (root, modifiers, elements, data attributes) and checks each one against your CSS files. Each selector is reported as:

• covered — a matching CSS rule exists
• partial — some but not all selectors for the rune are covered
• missing — no matching CSS rule found

Full-theme audit

refrakt inspect --all --audit

Audits every rune in the config at once. Useful for catching gaps after adding new rune configs or refactoring CSS.

Custom CSS directory

By default, the audit auto-detects your CSS directory. To specify one explicitly:

refrakt inspect hint --audit --css packages/my-theme/styles/runes

Metadata and dimension audits

Beyond CSS coverage, inspect can audit metadata and universal theming dimensions across your rune configs:

# Audit metadata dimensions (which runes expose metadata meta tags)
refrakt inspect --all --audit-meta

# Audit universal theming dimensions (density, sections, media slots, etc.)
refrakt inspect --all --audit-dimensions

These audits show which runes participate in each dimension and whether the corresponding CSS surfaces exist in your theme.

Audit options

Typical workflow