fix(producer): extract head styles/scripts from non-template sub-compositions

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>
This commit is contained in:
Miguel Ángel
2026-04-07 15:18:25 +00:00
committed by Miguel Ángel
co-authored by Claude Opus 4.6
parent 2bde83d5e3
commit 6cd6514daa
@@ -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 <template>), styles
// and scripts in <head> are not part of contentDoc (which only has body
// content). Extract them separately so backgrounds, positioning, fonts,
// and library scripts (e.g. GSAP CDN) are not silently dropped.
if (!templateEl) {
const compHead = compDoc.querySelector("head");
if (compHead) {
for (const styleEl of compHead.querySelectorAll("style")) {
const css = rewriteCssAssetUrls(styleEl.textContent || "", srcPath);
const scopeId = compId || inferredCompId;
if (scopeId && css.trim()) {
collectedStyles.push(scopeCssToComposition(css, scopeId));
} else {
collectedStyles.push(css);
}
}
for (const scriptEl of compHead.querySelectorAll("script")) {
const src = (scriptEl.getAttribute("src") || "").trim();
if (src && !collectedExternalScriptSrcs.includes(src)) {
collectedExternalScriptSrcs.push(src);
}
}
}
}
for (const styleEl of contentDoc.querySelectorAll("style")) {
const css = rewriteCssAssetUrls(styleEl.textContent || "", srcPath);
const scopeId = compId || inferredCompId;