From ef2f646c9065f2b0576dfc33c02bf56ebf863794 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20=C3=81ngel?= Date: Tue, 7 Apr 2026 17:37:26 +0200 Subject: [PATCH] fix(producer): extract head assets from non-template sub-comps + fix postcss ESM (#220) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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 `` 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 --- packages/producer/build.mjs | 4 +-- .../producer/src/services/htmlCompiler.ts | 25 +++++++++++++++++++ 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/packages/producer/build.mjs b/packages/producer/build.mjs index 2f497a6bd..8d1bcfede 100644 --- a/packages/producer/build.mjs +++ b/packages/producer/build.mjs @@ -36,7 +36,7 @@ await Promise.all([ platform: "node", target: "node22", format: "esm", - external: ["puppeteer", "esbuild"], + external: ["puppeteer", "esbuild", "postcss"], plugins: [workspaceAliasPlugin], minify: false, sourcemap: true, @@ -48,7 +48,7 @@ await Promise.all([ platform: "node", target: "node22", format: "esm", - external: ["puppeteer", "esbuild"], + external: ["puppeteer", "esbuild", "postcss"], plugins: [workspaceAliasPlugin], minify: false, sourcemap: true, diff --git a/packages/producer/src/services/htmlCompiler.ts b/packages/producer/src/services/htmlCompiler.ts index 7ac6a0b53..a737d6f23 100644 --- a/packages/producer/src/services/htmlCompiler.ts +++ b/packages/producer/src/services/htmlCompiler.ts @@ -525,6 +525,31 @@ function inlineSubCompositions( : contentDoc.querySelector("[data-composition-id]"); const inferredCompId = innerRoot?.getAttribute("data-composition-id")?.trim() || null; + // When a sub-composition is a full HTML document (no