@akinon/pz-theme 2.0.105-rc.0 → 2.0.105

package/src/blocks/product-grid-block.tsx

@@ -12,6 +12,7 @@ import {
   MOBILE_MEDIA_QUERY_COMPACT,
   TABLET_MEDIA_QUERY_COMPACT
 } from '../utils/breakpoints';
+import { neutralizeStyleTagBreakout } from '../utils/css-safety';
 import ThemeBlock, { Block } from '../theme-block';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
 import { BlockRendererProps } from './block-renderer-registry';
@@ -945,43 +946,50 @@ const ProductGridBlock = ({
       {...partAttrs('list')}
       style={{ display: 'grid', gap: 'var(--product-grid-gap, 16px)' }}
     >
-      <style>
-        {`[data-product-grid-id="${gridId}"]{grid-template-columns:repeat(${baseColumns},minmax(0,1fr));}` +
-          buildInsertionRules(gridId, placedInsertions, baseColumns, currentPage) +
-          `${MOBILE_MEDIA_QUERY_COMPACT}{[data-product-grid-id="${gridId}"]{grid-template-columns:repeat(${columnsMobile},minmax(0,1fr));}` +
-          // Inside the same query as the mobile template, so a tile is measured
-          // against the column count it actually sits in.
-          buildInsertionRules(
-            gridId,
-            placedInsertions,
-            columnsMobile,
-            currentPage
-          ) +
-          `}` +
-          // After the mobile query and only when a tablet count was authored,
-          // so a grid without one emits the two rules it always emitted.
-          (columnsTablet !== null
-            ? `${TABLET_MEDIA_QUERY_COMPACT}{[data-product-grid-id="${gridId}"]{grid-template-columns:repeat(${columnsTablet},minmax(0,1fr));}` +
+      {/* Verbatim, not a text child: React 18's server renderer would escape
+          the selectors' quotes (see `css-safety.ts`). */}
+      <style
+        dangerouslySetInnerHTML={{
+          __html: neutralizeStyleTagBreakout(
+            `[data-product-grid-id="${gridId}"]{grid-template-columns:repeat(${baseColumns},minmax(0,1fr));}` +
+              buildInsertionRules(gridId, placedInsertions, baseColumns, currentPage) +
+              `${MOBILE_MEDIA_QUERY_COMPACT}{[data-product-grid-id="${gridId}"]{grid-template-columns:repeat(${columnsMobile},minmax(0,1fr));}` +
+              // Inside the same query as the mobile template, so a tile is
+              // measured against the column count it actually sits in.
               buildInsertionRules(
                 gridId,
                 placedInsertions,
-                columnsTablet,
+                columnsMobile,
                 currentPage
               ) +
-              `}`
-            : '') +
-          // Last and unconditional, so an explicit choice outranks both the
-          // authored count and the mobile override above it.
-          (chosenColumns !== null
-            ? `[data-product-grid-id="${gridId}"]{grid-template-columns:repeat(${chosenColumns},minmax(0,1fr));}` +
-              buildInsertionRules(
-                gridId,
-                placedInsertions,
-                chosenColumns,
-                currentPage
-              )
-            : '')}
-      </style>
+              `}` +
+              // After the mobile query and only when a tablet count was
+              // authored, so a grid without one emits the two rules it always
+              // emitted.
+              (columnsTablet !== null
+                ? `${TABLET_MEDIA_QUERY_COMPACT}{[data-product-grid-id="${gridId}"]{grid-template-columns:repeat(${columnsTablet},minmax(0,1fr));}` +
+                  buildInsertionRules(
+                    gridId,
+                    placedInsertions,
+                    columnsTablet,
+                    currentPage
+                  ) +
+                  `}`
+                : '') +
+              // Last and unconditional, so an explicit choice outranks both the
+              // authored count and the mobile override above it.
+              (chosenColumns !== null
+                ? `[data-product-grid-id="${gridId}"]{grid-template-columns:repeat(${chosenColumns},minmax(0,1fr));}` +
+                  buildInsertionRules(
+                    gridId,
+                    placedInsertions,
+                    chosenColumns,
+                    currentPage
+                  )
+                : '')
+          )
+        }}
+      />
 
       {/* A designer who marked a child as the row layout gets their own card
           repeated per product; otherwise the built-in card above renders. */}

package/src/blocks/product-recommendations-block.tsx

@@ -17,6 +17,7 @@ import {
   buildCommerceItem,
   emitCommerceEvent
 } from '../utils/analytics';
+import { neutralizeStyleTagBreakout } from '../utils/css-safety';
 import { BlockRendererProps } from './block-renderer-registry';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
 import { DESIGNER_SAMPLE_PRODUCT } from './item-template-utils';
@@ -1160,14 +1161,20 @@ const ProductRecommendationsBlock = ({
       // overlay exists at all, so a strip without quick view is untouched.
       tabIndex={showQuickView ? -1 : undefined}
     >
-      <style>
-        {`[data-product-recommendations-id="${trackId}"] [data-product-recommendations-track]{grid-auto-columns:${cardWidth(
-          columnsDesktop
-        )};}` +
-          `@media (max-width:1023px){[data-product-recommendations-id="${trackId}"] [data-product-recommendations-track]{grid-auto-columns:${cardWidth(
-            columnsMobile
-          )};}}`}
-      </style>
+      {/* Verbatim, not a text child: React 18's server renderer would escape
+          the selector's quotes (see `css-safety.ts`). */}
+      <style
+        dangerouslySetInnerHTML={{
+          __html: neutralizeStyleTagBreakout(
+            `[data-product-recommendations-id="${trackId}"] [data-product-recommendations-track]{grid-auto-columns:${cardWidth(
+              columnsDesktop
+            )};}` +
+              `@media (max-width:1023px){[data-product-recommendations-id="${trackId}"] [data-product-recommendations-track]{grid-auto-columns:${cardWidth(
+                columnsMobile
+              )};}}`
+          )
+        }}
+      />
 
       {(() => {
         const inlineHeader = headerLayout === 'inline';

package/src/blocks/store-locator-block.tsx

@@ -14,6 +14,7 @@ import {
 import { useGetRetailStoreStockMutation } from '@akinon/next/data/client/product';
 import { useLocalization } from '@akinon/next/hooks';
 import { getResponsiveValue, partAttrs } from '../utils';
+import { neutralizeStyleTagBreakout } from '../utils/css-safety';
 import { useOverlay } from '../hooks/use-overlay';
 import { formatDecimal } from './commerce-format';
 import {
@@ -1060,10 +1061,16 @@ const StoreLocatorBlock = ({
       )}
 
       {isGrid && (
-        <style>
-          {`[data-store-locator-id="${listId}"]{grid-template-columns:repeat(${baseColumns},minmax(0,1fr));}` +
-            `@media (max-width:1023px){[data-store-locator-id="${listId}"]{grid-template-columns:repeat(${columnsMobile},minmax(0,1fr));}}`}
-        </style>
+        // Verbatim, not a text child: React 18's server renderer would escape
+        // the selector's quotes (see `css-safety.ts`).
+        <style
+          dangerouslySetInnerHTML={{
+            __html: neutralizeStyleTagBreakout(
+              `[data-store-locator-id="${listId}"]{grid-template-columns:repeat(${baseColumns},minmax(0,1fr));}` +
+                `@media (max-width:1023px){[data-store-locator-id="${listId}"]{grid-template-columns:repeat(${columnsMobile},minmax(0,1fr));}}`
+            )
+          }}
+        />
       )}
 
       <ListTag

package/src/chrome/theme-google-fonts-links.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import {
+  buildGoogleFontLinkId,
+  buildGoogleFontStylesheetUrl,
+  collectGoogleFontFamilies,
+  GOOGLE_FONTS_CSS_ORIGIN,
+  GOOGLE_FONTS_FILES_ORIGIN
+} from '../utils/google-fonts';
+
+/**
+ * The Google families a composition uses, linked from the server render.
+ *
+ * Section CSS names these families with no fallback stack, and their
+ * stylesheets used to be appended only by client effects — so until hydration
+ * the page painted in the browser's default serif and swapped the real faces
+ * in seconds later. Linked here, the stylesheets are part of the document
+ * before first paint: the move ZERO-5004 made for uploaded faces
+ * (theme-fonts-link.tsx), applied to Google's.
+ *
+ * Rendered by every placeholder. React hoists a `precedence` stylesheet into
+ * the head and keeps one per href, so a family the header, body and footer all
+ * use is still requested once.
+ */
+export const THEME_GOOGLE_FONTS_PRECEDENCE = 'pz-theme-google-fonts';
+
+type PreconnectFn = (href: string, options?: { crossOrigin?: string }) => void;
+
+/**
+ * Spread onto the link rather than written as a JSX attribute. Brands
+ * transpile this file from `src` and type-check it against their own
+ * @types/react; 18.x does not declare `precedence`, so `next build` would fail
+ * on a prop the renderer itself accepts. The rendered element is identical.
+ */
+const HOIST_AS_RESOURCE: Record<string, string> = {
+  precedence: THEME_GOOGLE_FONTS_PRECEDENCE
+};
+
+export const ThemeGoogleFontsLinks = ({
+  sections,
+  settings
+}: {
+  sections: ReadonlyArray<{ styles?: unknown; blocks?: unknown }> | null;
+  settings: Record<string, unknown> | null;
+}) => {
+  const families = collectGoogleFontFamilies(sections, settings);
+
+  if (families.length === 0) return null;
+
+  // Hints go through React's resource API rather than as <link> elements:
+  // React dedupes them across placeholders and emits them ahead of the
+  // stylesheets, where plain preconnect elements repeat once per placeholder.
+  // Face files are CORS fetches, so the gstatic connection must be anonymous
+  // or the browser cannot reuse it. Every React that hoists `precedence`
+  // (Next's vendored canary, React 19) has this API.
+  const preconnect = (ReactDOM as unknown as { preconnect?: PreconnectFn })
+    .preconnect;
+
+  if (typeof preconnect === 'function') {
+    preconnect(GOOGLE_FONTS_CSS_ORIGIN);
+    preconnect(GOOGLE_FONTS_FILES_ORIGIN, { crossOrigin: 'anonymous' });
+  }
+
+  return (
+    <>
+      {families.map((family) => {
+        const id = buildGoogleFontLinkId(family);
+
+        return (
+          <link
+            key={id}
+            rel="stylesheet"
+            href={buildGoogleFontStylesheetUrl(family)}
+            id={id}
+            {...HOIST_AS_RESOURCE}
+            // Marks the links the server owns, the way `data-pz-theme-fonts`
+            // marks the uploaded-face stylesheet.
+            data-pz-google-font="true"
+          />
+        );
+      })}
+    </>
+  );
+};

package/src/index.ts

@@ -36,6 +36,17 @@ export {
   THEME_FONTS_CSS_PATH
 } from './chrome/theme-fonts-link';
 export { buildCustomFontFaceCss } from './utils/custom-fonts';
+export {
+  ThemeGoogleFontsLinks,
+  THEME_GOOGLE_FONTS_PRECEDENCE
+} from './chrome/theme-google-fonts-links';
+export {
+  buildGoogleFontLinkId,
+  buildGoogleFontStylesheetUrl,
+  collectGoogleFontFamilies,
+  loadGoogleFontStylesheet,
+  resolveGoogleFontFamily
+} from './utils/google-fonts';
 export {
   armHistoryRestoreGuard,
   buildRestoreGuardScript,

package/src/theme-placeholder-wrapper.tsx

@@ -33,6 +33,10 @@ import { parseEditorMessage, postToEditor } from './editor-bridge';
 import { useBrowseMode } from './browse-mode';
 import { neutralizeStyleTagBreakout } from './utils/css-safety';
 import { buildCustomFontFaceCss } from './utils/custom-fonts';
+import {
+  collectGoogleFontFamilies,
+  loadGoogleFontStylesheet
+} from './utils/google-fonts';
 
 // Re-exported for the tests and for a brand that builds the faces itself; it
 // lives in ./utils/custom-fonts because a server route has to call it too and
@@ -200,41 +204,6 @@ export const buildThemeTypographyCss = (
   return declarations.length ? `:root{${declarations.join(';')}}` : '';
 };
 
-// Helper function to load Google Font
-const loadGoogleFont = (fontFamily: string, fontWeight?: string) => {
-  if (!fontFamily || fontFamily === 'inherit') return;
-
-  const cleanFontFamily = fontFamily.replace(/['"]/g, '').trim();
-
-  // Skip system fonts
-  const systemFonts = [
-    'Arial',
-    'Helvetica',
-    'Times New Roman',
-    'Georgia',
-    'Courier New',
-    'Verdana'
-  ];
-  if (systemFonts.includes(cleanFontFamily)) return;
-
-  const weights = fontWeight || '100;300;400;500;600;700;800;900';
-  const fontParam = `${cleanFontFamily.replace(/\s+/g, '+')}:wght@${weights}`;
-  const fontUrl = `https://fonts.googleapis.com/css2?family=${fontParam}&display=swap`;
-
-  const linkId = `google-font-${cleanFontFamily
-    .replace(/\s+/g, '-')
-    .toLowerCase()}`;
-
-  // Check if already loaded
-  if (document.getElementById(linkId)) return;
-
-  const link = document.createElement('link');
-  link.id = linkId;
-  link.href = fontUrl;
-  link.rel = 'stylesheet';
-  document.head.appendChild(link);
-};
-
 interface ThemePlaceholderWrapperProps {
   slug: string;
   initialSections: Section[];
@@ -693,34 +662,17 @@ export default function ThemePlaceholderWrapper({
     });
   }, [resolvedPageContext, isDesigner]);
 
-  // Load fonts from initial sections on mount (for production site, not iframe)
+  // The composition's Google fonts. ThemePlaceholder already links them from
+  // the server (chrome/theme-google-fonts-links.tsx) and the loader stands down
+  // for those; this covers a wrapper mounted some other way. Same collector as
+  // the server, so the two cannot disagree about which families a page needs.
   useEffect(() => {
     if (typeof window === 'undefined') return;
 
-    // Helper to extract and load fonts from blocks
-    const loadFontsFromBlocks = (blocks: Section['blocks']) => {
-      if (!blocks) return;
-
-      blocks.forEach((block) => {
-        const fontFamily =
-          block.styles?.['font-family']?.desktop ||
-          block.styles?.['font-family']?.mobile;
-        if (fontFamily && fontFamily !== 'inherit') {
-          loadGoogleFont(fontFamily);
-        }
-
-        // Recursively check nested blocks
-        if (block.blocks) {
-          loadFontsFromBlocks(block.blocks as Section['blocks']);
-        }
-      });
-    };
-
-    // Load fonts from all initial sections
-    initialSections.forEach((section) => {
-      loadFontsFromBlocks(section.blocks);
-    });
-  }, [initialSections]);
+    collectGoogleFontFamilies(initialSections, initialThemeSettings).forEach(
+      (family) => loadGoogleFontStylesheet(family)
+    );
+  }, [initialSections, initialThemeSettings]);
 
   // Handle responsive breakpoint detection when not in iframe (e.g. production site)
   useEffect(() => {
@@ -836,51 +788,19 @@ export default function ThemePlaceholderWrapper({
             setThemeSettings(theme.settings);
           }
 
-          // Load fonts from typography settings
-          if (
-            theme?.settings?.typography &&
-            Array.isArray(theme.settings.typography)
-          ) {
-            const uniqueFonts = new Set<string>();
-            theme.settings.typography.forEach(
-              (variant: { fontFamily?: string }) => {
-                if (variant.fontFamily && variant.fontFamily !== 'inherit') {
-                  uniqueFonts.add(variant.fontFamily);
-                }
-              }
-            );
-            uniqueFonts.forEach((font) => loadGoogleFont(font));
-          }
-
-          // Load fonts from block styles (for text blocks with custom fonts)
-          if (theme?.placeholders) {
-            // Recursive function to load fonts from nested blocks
-            const loadFontsFromBlocks = (blocks: any[]) => {
-              blocks?.forEach((block) => {
-                const fontFamily =
-                  block.styles?.['font-family']?.desktop ||
-                  block.styles?.['font-family']?.mobile;
-                if (fontFamily && fontFamily !== 'inherit') {
-                  loadGoogleFont(fontFamily);
-                }
-                // Recursively check nested blocks
-                if (block.blocks && block.blocks.length > 0) {
-                  loadFontsFromBlocks(block.blocks);
-                }
-              });
-            };
-
-            theme.placeholders.forEach(
-              (p: {
-                sections?: Array<{
-                  blocks?: Array<any>;
-                }>;
-              }) => {
-                p.sections?.forEach((section) => {
-                  loadFontsFromBlocks(section.blocks || []);
-                });
-              }
-            );
+          // Google fonts the incoming theme uses: its typography variants and
+          // every placeholder's section and block styles.
+          if (theme?.settings || theme?.placeholders) {
+            const incomingSections = Array.isArray(theme?.placeholders)
+              ? theme.placeholders.flatMap(
+                  (p: { sections?: unknown[] }) => p?.sections ?? []
+                )
+              : [];
+
+            collectGoogleFontFamilies(
+              incomingSections,
+              theme?.settings
+            ).forEach((family) => loadGoogleFontStylesheet(family));
           }
 
           if (theme?.placeholders) {
@@ -966,7 +886,7 @@ export default function ThemePlaceholderWrapper({
         case 'LOAD_FONT': {
           const { fontFamily, fontWeight } = messageData || {};
           if (fontFamily) {
-            loadGoogleFont(fontFamily, fontWeight);
+            loadGoogleFontStylesheet(fontFamily, fontWeight);
           }
           break;
         }

package/src/theme-placeholder.tsx

@@ -2,6 +2,7 @@ import 'server-only';
 
 import ThemePlaceholderWrapper from './theme-placeholder-wrapper';
 import { ThemeFontsLink } from './chrome/theme-fonts-link';
+import { ThemeGoogleFontsLinks } from './chrome/theme-google-fonts-links';
 import { loadPlaceholderSections } from './load-placeholder-sections';
 import { generateThemeCSS } from './utils';
 
@@ -26,6 +27,7 @@ export default async function ThemePlaceholder({
   return (
     <>
       <ThemeFontsLink settings={themeSettings} />
+      <ThemeGoogleFontsLinks sections={sections} settings={themeSettings} />
       {themeCSS && <style dangerouslySetInnerHTML={{ __html: themeCSS }} />}
       <ThemePlaceholderWrapper
         slug={slug}