fix(core): load head styles/scripts from non-template sub-compositions#219
Merged
miguel-heygen merged 2 commits intomainfrom Apr 7, 2026
Merged
fix(core): load head styles/scripts from non-template sub-compositions#219miguel-heygen merged 2 commits intomainfrom
miguel-heygen merged 2 commits intomainfrom
Conversation
This was referenced Apr 7, 2026
Collaborator
Author
3 tasks
miguel-heygen
changed the title
4 tasks
miguel-heygen
force-pushed
the
fix/lint-infinite-repeat
branch
from
f295a17 to
af367d8
Compare
miguel-heygen
force-pushed
the
fix/subcomp-head-styles
branch
from
4a47377 to
77fcb40
Compare
2 tasks
miguel-heygen
force-pushed
the
fix/subcomp-head-styles
branch
from
2a3a719 to
5e8a67f
Compare
miguel-heygen
force-pushed
the
fix/lint-infinite-repeat
branch
from
dfc54d9 to
12c5b65
Compare
miguel-heygen
force-pushed
the
fix/lint-infinite-repeat
branch
from
12c5b65 to
17791d1
Compare
miguel-heygen
force-pushed
the
fix/subcomp-head-styles
branch
from
5e8a67f to
2285ae9
Compare
jrusso1020
approved these changes
Apr 7, 2026
Collaborator
Author
Merge activity
|
miguel-heygen
changed the base branch from
fix/lint-infinite-repeat
to
graphite-base/219
…tions When a sub-composition is a full HTML document (not wrapped in <template>), the composition loader only extracted <style> and <script> elements from within the [data-composition-id] root element. Any CSS in <head> (backgrounds, positioning, fonts) or scripts in <head> (GSAP CDN) were silently dropped. This caused the iris-wipe eval (prompt 25, scored 1.0/5) to render entirely black — the scene background colors and absolute positioning were defined in <head><style> and never loaded. Now extracts <head> styles and scripts from non-template sub-comp documents and injects them before the content-level assets. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…b-comps Same bug as the runtime and producer fixes, but in the bundler used by the studio preview. The bundler's sub-composition inlining parsed only body.innerHTML for non-template sub-compositions, dropping all <head> styles and scripts. This is why the iris-wipe showed black in the studio preview — the scene backgrounds and GSAP CDN script were in <head>. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
miguel-heygen
force-pushed
the
fix/subcomp-head-styles
branch
from
2285ae9 to
f8efac2
Compare
miguel-heygen
added a commit
that referenced
this pull request
Apr 7, 2026
…postcss ESM (#220) ## Summary Two fixes in the producer: 1. **Head styles/scripts extraction**: mirrors the runtime fix from PR #219. The producer's `inlineSubCompositions()` parsed only `bodyEl.innerHTML` from non-template sub-compositions, discarding all `<head>` content. 2. **Externalize postcss**: postcss is a CJS module with `require("path")` — bundling it into ESM output caused "Dynamic require of path is not supported" at runtime, breaking `npx tsx cli render` and `npx tsx cli preview` from the local dev build. ## Verified Re-rendered the iris-wipe composition (eval prompt #25, previously scored 1.0/5 — entirely black): | Frame | Before fix | After fix | | --- | --- | --- | | 0\.5s | Black | Red background + "HELLO" text | | File size | 16\.9 KB (all black) | 64\.8 KB (actual content) | Scene 1 now renders correctly. Scene 2's clip-path animation has a separate GSAP issue (the lint already warns about it via `scene_layer_missing_visibility_kill`). ## Test plan - [x] `pnpm --filter @hyperframes/producer build` succeeds - [x] `node --input-type=module -e "import './dist/index.js'"` loads without error - [x] Re-render iris-wipe produces visible content (64.8 KB vs 16.9 KB) - [x] Frame extraction confirms red "HELLO" scene renders correctly
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
2 participants
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.
Summary
Fixes a bug where non-template sub-compositions (full HTML documents loaded via
data-composition-src) lost all<head>styles and scripts. This affected three code paths:compositionLoader.ts) — browser preview via iframe fetchhtmlBundler.ts) — studio preview HTML bundling (this was causing the black preview)What it fixes
Eval prompt #25 (iris-wipe) renders entirely black in both the studio preview and rendered video because scene backgrounds (
#EF4444red,#3B82F6blue), positioning, and the GSAP CDN script were all in<head>and silently dropped.Verified
Rebuilt core, started studio preview, fetched the bundled HTML from
/api/projects/iris-wipe/preview— confirmed#scene1 { background: #EF4444 }and.scene { position: absolute }are now present in the output.Root cause
All three code paths did the same thing:
Test plan
pnpm --filter @hyperframes/core buildsucceeds🤖 Generated with Claude Code