@akinon/pz-theme 2.0.98-rc.0 → 2.0.99-beta.0

package/src/utils/custom-fonts.ts

@@ -0,0 +1,59 @@
+import { neutralizeStyleTagBreakout } from './css-safety';
+
+/**
+ * The designer's uploaded faces as real CSS, emitted from the same render that
+ * produced the markup.
+ *
+ * They used to exist only as `<style>` tags an effect appended on mount, which
+ * made the brand's typography depend on hydration having run. It does not
+ * always run: a history navigation (back, then forward) can hand the browser a
+ * cached copy of the document whose React tree never hydrates, and the page
+ * then paints every word in the fallback face — the Jost stack behind
+ * `GantModernV2` — with no error anywhere (ZERO-5004). Emitted with the markup,
+ * the faces are part of the document itself and survive any restore, and the
+ * first paint no longer swaps fonts a frame later.
+ *
+ * The effect below still runs: it is what applies a font the editor uploads
+ * mid-session, and it skips faces this CSS already covers.
+ */
+export const buildCustomFontFaceCss = (
+  settings: Record<string, unknown> | null
+): string => {
+  const fonts = settings?.customFonts;
+
+  if (!Array.isArray(fonts)) return '';
+
+  return fonts
+    .map((font) => {
+      const name = (font as { name?: unknown })?.name;
+      const sources = (font as { sources?: unknown })?.sources;
+
+      if (typeof name !== 'string' || !name.trim() || !Array.isArray(sources)) {
+        return '';
+      }
+
+      const src = sources
+        .map((source) => {
+          const dataUrl = (source as { dataUrl?: unknown })?.dataUrl;
+          const format = (source as { format?: unknown })?.format;
+
+          if (typeof dataUrl !== 'string' || !dataUrl) return '';
+
+          return typeof format === 'string' && format
+            ? `url('${dataUrl}') format('${format}')`
+            : `url('${dataUrl}')`;
+        })
+        .filter(Boolean)
+        .join(', ');
+
+      if (!src) return '';
+
+      // Editor-controlled values on their way into a <style> tag — the same
+      // breakout neutralization the generated section CSS goes through.
+      return `@font-face{font-family:'${neutralizeStyleTagBreakout(
+        name.trim()
+      )}';src:${neutralizeStyleTagBreakout(src)};font-display:swap;}`;
+    })
+    .filter(Boolean)
+    .join('');
+};