fix(compiler): skip CSS var() in font resolver (#1655)

* fix(compiler): skip CSS var() in font resolver — fixes FONT_FETCH_FAILED on distributed renders The font scanner treated `var(--ui-font)` as a literal font family name, causing fail-closed distributed renders to throw FONT_FETCH_FAILED for any composition using CSS custom properties in font-family declarations. CSS var() expressions resolve at browser paint time, not at compile time. The regex-based font scanner cannot resolve them statically — skip them and let headless Chrome handle variable substitution during render. Closes #1654 — Miga * test(regression): add distributed css-var-fonts fixture Regression test for compositions that use CSS custom properties in font-family declarations. Exercises the var() skip guard in extractRequestedFontFamilies() under the distributed renderer's fail-closed font resolution path. Baseline needs to be generated on first CI run with --update. — Miga * fix(compiler): address review feedback — mixed declaration test + validator TODO Add unit test verifying concrete fonts alongside var() in mixed declarations still get resolved (non-aggression pin). Add TODO(#1654) in validateNoSystemFonts for the var()-as-primary gap flagged by both reviewers. — Miga * fix(test): correct stale 4xx fail-closed test expectations The 4xx tests expected no throw, but that was the contract before #1255 added the system font capture path (Path 3). Post-#1255, a font that gets 4xx from Google Fonts AND isn't a bundled alias AND has no system font IS genuinely unresolvable — fail-closed mode should throw. The 4xx distinction still matters at the fetch level (no retry, treated as deterministic "not served"), but at the final unresolved check, a completely unresolvable font must throw regardless of the HTTP status that caused the Google Fonts path to return empty. Updated tests to match the actual contract: 4xx + unresolvable = throw. Also set allowSystemFontCapture: false to match how distributed renders (plan.ts:799) actually call the function. — Miga --------- Co-authored-by: Miguel Ángel <miguel.sierra@heygen.com>
2026-09-12 15:20:13 +00:00 · 2026-06-22 18:39:33 -04:00
parent 8c13a72696
commit 468f7ec35b
6 changed files with 149 additions and 18 deletions
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>CSS var() font-family regression fixture</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Montserrat:wght@400;700;900&display=swap");
+
+      :root {
+        --ui-font: "Inter";
+        --display-font: "Montserrat";
+      }
+
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+        width: 640px;
+        height: 360px;
+        background: #1a1a2e;
+        overflow: hidden;
+        font-family: var(--ui-font), sans-serif;
+      }
+
+      #main-comp {
+        position: relative;
+        width: 640px;
+        height: 360px;
+      }
+
+      .heading {
+        position: absolute;
+        top: 30%;
+        left: 50%;
+        transform: translateX(-50%);
+        font-family: var(--display-font), sans-serif;
+        font-size: 48px;
+        font-weight: 900;
+        color: #e94560;
+        white-space: nowrap;
+        opacity: 0;
+      }
+
+      .body-text {
+        position: absolute;
+        top: 60%;
+        left: 50%;
+        transform: translateX(-50%);
+        font-family: var(--ui-font), sans-serif;
+        font-size: 18px;
+        font-weight: 400;
+        color: #c4c4c4;
+        white-space: nowrap;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="main-comp" data-composition-id="css-var-fonts" data-width="640" data-height="360" data-start="0">
+      <div class="heading">CSS Variable Fonts</div>
+      <div class="body-text">var(--ui-font) and var(--display-font)</div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline();
+      tl.to(".heading", { opacity: 1, duration: 0.5 });
+      tl.to(".body-text", { opacity: 1, duration: 0.5 }, "+=0.2");
+      tl.to({}, { duration: 1 });
+      window.__timelines["css-var-fonts"] = tl;
+    </script>
+  </body>
+</html>