Tailwind registers internal slots (`--tw-content`, `--tw-shadow`, …) via
`@property` rules that supply their defaults. `decompose` dropped those
rules, so utilities that reference a slot without setting it locally —
notably `after:*`/`before:*` emitting `content: var(--tw-content)` — left
a dangling reference that resolves to nothing and suppresses the
pseudo-element.
`decompose` now captures the `@property` registrations, and `emitCss`
gains a `properties` option to handle them, configurably:
- `mode: 'emit'` — emit `@property` rules for referenced slots,
preserving Tailwind's typed defaults.
- `mode: 'inline'` — substitute each slot's `initial-value` into the
values that reference it (a superset of `inlineVars` for the matched
slots), so the output is fully self-contained.
- `resolve(name, captured)` hook — override or supply a slot's config
(initial-value / syntax / inherits), or register one Tailwind didn't.
- `match` — restrict handling to matching names (default `/^--tw-/`).
`tailwindPlugin` forwards `properties` through its `onCss` path. Adds 9
tests (capture, emit, inline, resolve override, match, back-compat,
plugin e2e). Compiler suite: 178 passing.
Three correctness fixes for the `vanilla-css` Tailwind target, each
previously untested:
1. Preserve marker utilities. Utilities that produce no declarations
(`group`, `peer`, `group/<name>`) were silently dropped when rewriting
`className` to the semantic name, breaking every descendant
`group-*` / `peer-*` variant. They're now kept on the element
(`"play-button group"`), alongside any other class Tailwind doesn't
recognize.
2. Flag class-name collisions. Two distinct elements that derive the same
class name but resolve to different utilities would have their
conflicting declarations silently merged into one rule (e.g. the
forward/back `seek-icon`, buffering vs preview `spinner-icon`,
current/duration `time-value`). The plugin now tracks a per-name
utility signature and throws a fixable DiagnosticError on mismatch,
while identical recurrences (repeated `Tooltip.Popup`) pass cleanly.
3. Emit referenced theme variables. The generated CSS referenced
`var(--spacing)`, `var(--color-*)`, `var(--ease-*)` etc. with nothing
defining them. `emitCss` now accepts a `resolveThemeVar` resolver
(backed by `design.resolveThemeVar`) and emits a leading, transitively
resolved theme block — scoped to the skin's hoist root when set — so
the output resolves without a separate Tailwind theme on the page.
Adds 11 tests (markers, collisions, theme emission incl. transitive,
already-declared, scoped, and back-compat). Compiler suite: 169 passing.
Note: `@property`-registered `--tw-*` slots (e.g. `--tw-content`) resolve
to undefined and are left for a follow-up.
The in-flight compiler skin migration refactored the shared Tailwind token
modules from main's function API (`root = (isShadowDOM) => cn(...)`, flat
exports) into a string-aggregate API (`video`/`audio` nested objects) that
the constrained-JSX skins consume. Since then, main built 16 runtime skin
files on the function API — including the new live-video / live-audio
presets — which the new token shape cannot satisfy without porting.
Rather than regress main's skins or break the build, park the authored
migration sources (constrained-JSX skins + refactored token layer +
tailwind.css) under packages/skins/__old__, a sibling of src/ that sits
outside the package tsconfig include, tsdown globs, and (via biome ignore)
linting. Main remains the source of truth for live skins.
The full migration snapshot (build wiring, generated React skins/CSS, core
manifests, icons generate config, html/react edits) is preserved in the
git tag backup/pre-rebase-2b2bbfad. The audit and port backlog live in
.claude/plans/compiler-rebase-audit.md.
Introduce the build-time compiler for constrained-JSX skins, rebased onto
current main as a clean, additive package. Provides:
- core pipeline: parse, compile, generate, JSX runtime, define-component
- transforms: import rewriting, replace/wrap, drop-unused locals/imports
- matchers + react lowering (add-prop, child-as-prop)
- styles className analyzer
- tailwind subsystem: design-system loader, decompose, evaluator,
deriveClassName, emitCss, tailwindPlugin (three targets)
Self-contained: the integration smoke test now reads a vendored skin
fixture instead of the skins package, so the compiler builds and tests
green independently. 158 tests pass.
Wiring: register the project reference (tsconfig), commitlint scope,
CI test-matrix entry, and lockfile entries (lightningcss, tailwindcss).
The skin migration that consumes this compiler is parked separately —
its token refactor conflicts with skin work that landed on main; see the
follow-up commit and .claude/plans/compiler-rebase-audit.md.
Rahim