feat(compiler): add @videojs/compiler package#1696
Draft
mihar-22 wants to merge 7 commits into
Draft
Conversation
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
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.
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.
Update the rebase audit: marker-class drop, class-name collisions, and undefined theme vars are fixed; note the remaining `--tw-*` @Property follow-up and the real collisions the new diagnostic will surface during the port.
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.
mihar-22
force-pushed
the
t3code/2b2bbfad
branch
from
3a9c358 to
21392cc
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🚧 WIP
Adds the
@videojs/compilerpackage — the tooling that compiles constrained-JSX skins to target frameworks (React/WC) and styling transforms (Tailwind/Vanilla).