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.
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