fix(producer): extract head assets from non-template sub-comps + fix postcss ESM#220
Merged
miguel-heygen merged 2 commits intomainfrom Apr 7, 2026
Merged
fix(producer): extract head assets from non-template sub-comps + fix postcss ESM#220miguel-heygen merged 2 commits intomainfrom
miguel-heygen merged 2 commits intomainfrom
Conversation
miguel-heygen
changed the title
This was referenced Apr 7, 2026
Collaborator
Author
3 tasks
miguel-heygen
force-pushed
the
fix/producer-postcss-esm
branch
from
2dee4e8 to
7a618b8
Compare
miguel-heygen
force-pushed
the
fix/subcomp-head-styles
branch
from
4a47377 to
77fcb40
Compare
2 tasks
miguel-heygen
force-pushed
the
fix/producer-postcss-esm
branch
from
7a618b8 to
eb54b7b
Compare
miguel-heygen
force-pushed
the
fix/subcomp-head-styles
branch
from
2a3a719 to
5e8a67f
Compare
miguel-heygen
force-pushed
the
fix/producer-postcss-esm
branch
from
eb54b7b to
eb1f836
Compare
miguel-heygen
force-pushed
the
fix/subcomp-head-styles
branch
from
5e8a67f to
2285ae9
Compare
miguel-heygen
force-pushed
the
fix/producer-postcss-esm
branch
from
eb1f836 to
f1e8590
Compare
jrusso1020
approved these changes
Apr 7, 2026
Collaborator
Author
Merge activity
|
miguel-heygen
changed the base branch from
fix/subcomp-head-styles
to
graphite-base/220
miguel-heygen
added a commit
that referenced
this pull request
Apr 7, 2026
#219) ## 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**: 1. **Runtime** (`compositionLoader.ts`) — browser preview via iframe fetch 2. **Bundler** (`htmlBundler.ts`) — studio preview HTML bundling (**this was causing the black preview**) 3. Producer fix is in PR #220 ## What it fixes **Eval prompt #25** (iris-wipe) renders entirely black in both the studio preview and rendered video because scene backgrounds (`#EF4444` red, `#3B82F6` blue), 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: ```js const contentHtml = template ? template.innerHTML : bodyEl.innerHTML; // ^ <head> content is already lost here ``` ## Test plan - [x] All 429 core tests pass - [x] Studio preview endpoint returns correct bundled HTML with head styles included - [x] `pnpm --filter @hyperframes/core build` succeeds 🤖 Generated with [Claude Code](https://claude.com/claude-code)
postcss is a CJS module that uses `require("path")` internally.
When esbuild bundles it into the ESM producer output, the dynamic
require call fails at runtime with "Dynamic require of path is
not supported". This broke `npx tsx cli render` and `npx tsx cli
preview` from the local dev build.
Fix: add postcss to the external list alongside puppeteer and
esbuild — it stays as a runtime dependency resolved from
node_modules instead of being bundled.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ositions Mirrors the runtime compositionLoader fix: the producer's inlineSubCompositions() was parsing only `bodyEl.innerHTML`, discarding all <head> content. CSS backgrounds, positioning, fonts, and library scripts (GSAP CDN) defined in <head> were silently dropped during compilation. Also externalizes postcss in the esbuild config to fix "Dynamic require of path is not supported" error that broke local dev rendering via `npx tsx cli render`. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
miguel-heygen
force-pushed
the
fix/producer-postcss-esm
branch
from
f1e8590 to
6cd6514
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
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
Two fixes in the producer:
inlineSubCompositions()parsed onlybodyEl.innerHTMLfrom non-template sub-compositions, discarding all<head>content.require("path")— bundling it into ESM output caused "Dynamic require of path is not supported" at runtime, breakingnpx tsx cli renderandnpx tsx cli previewfrom the local dev build.Verified
Re-rendered the iris-wipe composition (eval prompt #25, previously scored 1.0/5 — entirely black):
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
pnpm --filter @hyperframes/producer buildsucceedsnode --input-type=module -e "import './dist/index.js'"loads without error