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

package/src/blocks/__tests__/scoped-style-text.test.tsx

@@ -0,0 +1,351 @@
+/**
+ * Every scoped `<style>` a block writes reaches the document byte for byte.
+ *
+ * Each of these was a text child, `<style>{css}</style>`. React 18's server
+ * renderer escapes text children and `<style>` is raw text, so every quoted
+ * attribute selector below was served as `[data-…=&quot;…&quot;]` and dropped:
+ * grid column counts, icon sizes, the collapsible clip and the announcement
+ * rotation were all missing from first paint until the client re-rendered.
+ *
+ * These tests run React 19, which writes `<style>` text verbatim, so the mocked
+ * runtime puts React 18's escaping back (see `jest/react-18-style-text.ts`).
+ * Lottie's loading keyframes are the one text-child `<style>` left: static CSS
+ * with no character React escapes.
+ */
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+
+jest.mock('react/jsx-runtime', () =>
+  require('../../../jest/react-18-style-text').jsxRuntime
+);
+
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <div data-testid="tb" data-id={block.id} />
+  )
+}));
+
+/**
+ * The jest moduleNameMapper folds every `@akinon/next/data/client/*` subpath
+ * onto one module, so this one factory serves the address, wishlist, misc and
+ * product hooks alike. Hooks not named here keep the generic mock's answers.
+ */
+function mockDataClient() {
+  const generic = jest.requireActual('@akinon/next/data/client/misc');
+  const overrides: Record<string, unknown> = {
+    useGetWidgetQuery: () => ({
+      data: {
+        products: [
+          {
+            pk: 57,
+            name: 'Wool Coat',
+            absolute_url: '/wool-coat',
+            price: '4999.00',
+            currency_type: 'TRY'
+          }
+        ]
+      },
+      isFetching: false
+    }),
+    useGetStoresQuery: () => ({
+      data: {
+        results: [
+          {
+            pk: 1,
+            name: 'Kanyon AVM',
+            address: 'Büyükdere Cad. No:185',
+            phone_number: '+902123531500',
+            latitude: '41.0678',
+            longitude: '29.0092',
+            city: { name: 'İstanbul' }
+          }
+        ]
+      },
+      isLoading: false
+    })
+  };
+
+  return new Proxy(generic, {
+    get: (target, prop) =>
+      typeof prop === 'string' && prop in overrides
+        ? overrides[prop]
+        : target[prop]
+  });
+}
+
+jest.mock('@akinon/next/data/client/misc', mockDataClient);
+
+jest.mock('@akinon/next/redux/hooks', () => ({
+  __esModule: true,
+  useAppDispatch: () => () => undefined,
+  useAppSelector: () => undefined
+}));
+
+import AnnouncementBarBlock from '../announcement-bar-block';
+import CollapsibleBlock from '../collapsible-block';
+import FavouritesGridBlock from '../favourites-grid-block';
+import IconButtonBlock from '../icon-button-block';
+import IconGroupBlock from '../icon-group-block';
+import ProductGalleryBlock from '../product-gallery-block';
+import ProductGridBlock from '../product-grid-block';
+import ProductRecommendationsBlock from '../product-recommendations-block';
+import StoreLocatorBlock from '../store-locator-block';
+import { ThemePageContextProvider } from '../../theme-page-context';
+
+const block = (
+  id: string,
+  type: string,
+  properties: Record<string, unknown> = {},
+  blocks: unknown[] = [],
+  over: Record<string, unknown> = {}
+): any => ({
+  id,
+  type,
+  label: type,
+  value: '',
+  properties,
+  styles: {},
+  order: 0,
+  hidden: false,
+  blocks,
+  ...over
+});
+
+const base = {
+  placeholderId: 'p',
+  sectionId: 's',
+  isDesigner: false,
+  currentBreakpoint: 'desktop'
+};
+
+/** A child marked as the row layout, which is what turns custom rows on. */
+const rowTemplate = block(
+  'row-layout',
+  'group',
+  { role: { desktop: 'item-template' } },
+  [block('row-text', 'text')]
+);
+
+const iconButton = (id: string) =>
+  block(id, 'icon-button', {
+    icon: { desktop: '<svg viewBox="0 0 24 24"><rect /></svg>' },
+    iconSize: { desktop: '32' }
+  });
+
+const iconGroup = (id: string) =>
+  block(id, 'icon-group', {}, [block('visa', 'icon'), block('troy', 'icon')], {
+    styles: { size: { desktop: '24' } }
+  });
+
+const withPage = (value: Record<string, unknown> | null, element: React.ReactElement) => (
+  <ThemePageContextProvider value={value}>{element}</ThemePageContextProvider>
+);
+
+/** Every `<style>` body in the server HTML — what the browser parses as CSS. */
+const servedSheets = (html: string): string[] =>
+  Array.from(
+    html.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/g),
+    (match) => match[1]
+  );
+
+const cases: Array<[string, () => React.ReactElement, string[]]> = [
+  [
+    'announcement bar rotation',
+    () => (
+      <AnnouncementBarBlock
+        {...base}
+        block={block(
+          'free-shipping-bar',
+          'announcement-bar',
+          { messages: 'Free shipping over 500 TL|30-day returns' },
+          [rowTemplate]
+        )}
+      />
+    ),
+    [
+      '[data-announcement-id="free-shipping-bar"] [data-part="message-list"] > *:not(:nth-child(1))'
+    ]
+  ],
+  [
+    'collapsible clip',
+    () => (
+      <CollapsibleBlock
+        {...base}
+        block={block('size-guide', 'collapsible', {}, [
+          block('fit-notes', 'text'),
+          block('measurements', 'text', {}, [], { order: 1 })
+        ])}
+      />
+    ),
+    [
+      "@property --pz-collapse-fade{syntax:'<number>';",
+      '[data-pz-collapsible="size-guide"] [data-part="clip"][data-state~="open"]'
+    ]
+  ],
+  [
+    'icon button markup size',
+    () => <IconButtonBlock {...base} block={iconButton('basket-icon')} />,
+    ['[data-icon-button-id="basket-icon"] svg{width:32px;height:32px;}']
+  ],
+  [
+    'icon group size',
+    () => <IconGroupBlock {...base} block={iconGroup('payment-icons')} />,
+    [
+      '[data-icon-group-id="payment-icons"] svg,[data-icon-group-id="payment-icons"] img{width:24px;height:24px;}'
+    ]
+  ],
+  [
+    'favourites grid columns',
+    () => (
+      <FavouritesGridBlock
+        {...base}
+        block={block('saved-for-later', 'favourites-grid', {}, [rowTemplate])}
+      />
+    ),
+    [
+      '[data-favourites-grid-id="saved-for-later"]{grid-template-columns:repeat(4,minmax(0,1fr));}'
+    ]
+  ],
+  [
+    'product grid columns',
+    () =>
+      withPage(
+        {
+          listing: {
+            title: 'Coats',
+            path: '/coats',
+            products: [
+              { pk: 1, name: 'Wool Coat', url: '/wool-coat', image: '/wool.jpg', price: 4999 },
+              { pk: 2, name: 'Trench Coat', url: '/trench-coat', image: '/trench.jpg', price: 3999 }
+            ],
+            facets: [],
+            sorters: [],
+            pagination: { current_page: 1, count: 2 }
+          }
+        },
+        <ProductGridBlock {...base} block={block('category-listing', 'product-grid')} />
+      ),
+    [
+      '[data-product-grid-id="category-listing"]{grid-template-columns:repeat(4,minmax(0,1fr));}'
+    ]
+  ],
+  [
+    'product gallery grid and zoom hint',
+    () =>
+      withPage(
+        {
+          product: {
+            pk: 1,
+            name: 'Wool Coat',
+            images: [
+              { url: 'https://cdn.example.com/front.jpg', alt: 'front' },
+              { url: 'https://cdn.example.com/back.jpg', alt: 'back' }
+            ]
+          }
+        },
+        <ProductGalleryBlock
+          {...base}
+          block={block('coat-gallery', 'product-gallery', {
+            layout: 'grid',
+            enableZoom: true,
+            zoomHint: 'Hover to zoom'
+          })}
+        />
+      ),
+    [
+      '[data-product-gallery-id="coat-gallery"] [data-part="grid"]{grid-template-columns:repeat(2,minmax(0,1fr));}',
+      '@media (hover:none){[data-product-gallery-id="coat-gallery"] [data-part="zoom-hint"]{display:none;}}'
+    ]
+  ],
+  [
+    'product recommendations card width',
+    () =>
+      withPage(
+        {},
+        <ProductRecommendationsBlock
+          {...base}
+          block={block('complete-the-look', 'product-recommendations', {
+            collectionId: 'winter-coats'
+          })}
+        />
+      ),
+    [
+      '[data-product-recommendations-id="complete-the-look"] [data-product-recommendations-track]{grid-auto-columns:calc('
+    ]
+  ],
+  [
+    'store locator grid columns',
+    () =>
+      withPage(
+        null,
+        <StoreLocatorBlock
+          {...base}
+          block={block('nearby-stores', 'store-locator', {
+            columns: 2,
+            columnsMobile: 1
+          })}
+        />
+      ),
+    [
+      '[data-store-locator-id="nearby-stores"]{grid-template-columns:repeat(2,minmax(0,1fr));}'
+    ]
+  ]
+];
+
+describe('the harness serves <style> text the way React 18 did', () => {
+  it('escapes a text child, so a text-child sheet cannot pass below', () => {
+    // If the components ever stopped receiving the mocked runtime, every
+    // assertion in this file would pass against the old markup without saying
+    // so. Required here rather than written as JSX: this file's own JSX binds
+    // the runtime before the mock is registered, a component module does not.
+    const { jsx } = require('react/jsx-runtime');
+    expect(
+      renderToString(jsx('style', { children: '[data-x="a"]>b' }))
+    ).toBe('<style>[data-x=&quot;a&quot;]&gt;b</style>');
+  });
+});
+
+describe.each(cases)('%s', (_name, element, expected) => {
+  it('is served verbatim', () => {
+    const css = servedSheets(renderToString(element())).join('\n');
+
+    expected.forEach((literal) => expect(css).toContain(literal));
+    expect(css).not.toMatch(/&(?:quot|gt|lt|amp|#x27);/);
+  });
+});
+
+describe('an id that tries to close the tag stays inside the sheet', () => {
+  /**
+   * Verbatim output is only safe because the breakout is neutralized: these
+   * three scope with an id that is attribute-escaped but not reduced to a
+   * safe character set, so a crafted id reaches the CSS whole.
+   */
+  const HOSTILE_ID = 'size-guide"]</style><img src=x onerror=alert(1)>';
+
+  it.each<[string, () => React.ReactElement]>([
+    [
+      'collapsible',
+      () => (
+        <CollapsibleBlock
+          {...base}
+          block={block(HOSTILE_ID, 'collapsible', {}, [
+            block('fit-notes', 'text')
+          ])}
+        />
+      )
+    ],
+    ['icon button', () => <IconButtonBlock {...base} block={iconButton(HOSTILE_ID)} />],
+    ['icon group', () => <IconGroupBlock {...base} block={iconGroup(HOSTILE_ID)} />]
+  ])('%s', (_name, element) => {
+    // The collapsible's `<noscript>` copy is a separate raw-text context this
+    // change did not touch, so only the sheets outside it are asserted.
+    const html = renderToString(element()).replace(
+      /<noscript>[\s\S]*?<\/noscript>/g,
+      ''
+    );
+
+    expect(html).toContain('<\\/style><img');
+    expect(html).not.toMatch(/<\/style><img/i);
+  });
+});

package/src/blocks/announcement-bar-block.tsx

@@ -3,6 +3,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import ThemeBlock, { Block } from '../theme-block';
 import { getResponsiveValue, partAttrs } from '../utils';
+import { neutralizeStyleTagBreakout } from '../utils/css-safety';
 import { BlockRendererProps } from './block-renderer-registry';
 import { readToggle } from './product-block-utils';
 import {
@@ -318,7 +319,15 @@ const AnnouncementBarBlock = ({
         width: '100%'
       }}
     >
-      {rotationCss && <style>{rotationCss}</style>}
+      {rotationCss && (
+        // Verbatim, not a text child: React 18's server renderer would escape
+        // the selector's quotes and `>` (see `css-safety.ts`).
+        <style
+          dangerouslySetInnerHTML={{
+            __html: neutralizeStyleTagBreakout(rotationCss)
+          }}
+        />
+      )}
 
       <div
         data-announcement-messages=""

package/src/blocks/button-block.tsx

@@ -15,6 +15,7 @@ import { useBlockAction } from '../hooks/use-block-action';
 import { useFormSubmitState } from '../auth/form-submit-bus';
 import { BlockRendererProps } from './block-renderer-registry';
 import { useThemeSettingsContext } from '../theme-settings-context';
+import { loadGoogleFontStylesheet } from '../utils/google-fonts';
 
 const ButtonBlock = ({
   block,
@@ -193,39 +194,10 @@ const ButtonBlock = ({
       )
     : 'inherit';
 
+  // Shared with the placeholder and its server-rendered links, so this builds
+  // the same href and stands down for a stylesheet the document already has.
   useEffect(() => {
-    if (!fontFamily || fontFamily === 'inherit') return;
-
-    const cleanFontFamily = fontFamily.replace(/['"]/g, '').trim();
-
-    const systemFonts = [
-      'Arial',
-      'Helvetica',
-      'Times New Roman',
-      'Georgia',
-      'Courier New',
-      'Verdana'
-    ];
-    if (systemFonts.includes(cleanFontFamily)) return;
-
-    const fontParam = `${cleanFontFamily.replace(
-      /\s+/g,
-      '+'
-    )}:wght@100;300;400;500;600;700;800;900`;
-    const fontUrl = `https://fonts.googleapis.com/css2?family=${fontParam}&display=swap`;
-
-    const linkId = `google-font-${cleanFontFamily
-      .replace(/\s+/g, '-')
-      .toLowerCase()}`;
-    const existingLink = document.getElementById(linkId);
-    if (existingLink) return;
-
-    const link = document.createElement('link');
-    link.href = fontUrl;
-    link.rel = 'stylesheet';
-    link.id = linkId;
-
-    document.head.appendChild(link);
+    loadGoogleFontStylesheet(fontFamily);
   }, [fontFamily]);
 
   const toAlpha = (value: unknown, fallback = 100): number | null => {

package/src/blocks/collapsible-block.tsx

@@ -14,7 +14,10 @@ import {
   MOBILE_MEDIA_QUERY_COMPACT,
   TABLET_MEDIA_QUERY_COMPACT
 } from '../utils/breakpoints';
-import { escapeCssAttributeValue } from '../utils/css-safety';
+import {
+  escapeCssAttributeValue,
+  neutralizeStyleTagBreakout
+} from '../utils/css-safety';
 import { BlockRendererProps } from './block-renderer-registry';
 import { readToggle } from './product-block-utils';
 import { renderComposedChildren } from './render-composed-children';
@@ -510,7 +513,14 @@ const CollapsibleBlock: React.FC<BlockRendererProps> = ({
           : undefined
       }
     >
-      <style>{css}</style>
+      {/*
+       * Verbatim, not a text child: React 18's server renderer would escape the
+       * selectors' quotes and `@property`'s `'<number>'` (see `css-safety.ts`).
+       * The id is only attribute-escaped, so the breakout is neutralized here.
+       */}
+      <style
+        dangerouslySetInnerHTML={{ __html: neutralizeStyleTagBreakout(css) }}
+      />
       <noscript dangerouslySetInnerHTML={{ __html: noScriptCss }} />
 
       <div

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

@@ -16,6 +16,7 @@ import {
   MOBILE_MEDIA_QUERY_COMPACT,
   TABLET_MEDIA_QUERY_COMPACT
 } from '../utils/breakpoints';
+import { neutralizeStyleTagBreakout } from '../utils/css-safety';
 import { normalizeListingProduct } from './listing-context';
 import {
   buildCommerceItem,
@@ -406,14 +407,20 @@ const FavouritesGridBlock = ({
         gap: gridGap || 'var(--favourites-grid-gap, 16px)'
       }}
     >
-      <style>
-        {`[data-favourites-grid-id="${gridId}"]{grid-template-columns:repeat(${baseColumns},minmax(0,1fr));}` +
-          `${MOBILE_MEDIA_QUERY_COMPACT}{[data-favourites-grid-id="${gridId}"]{grid-template-columns:repeat(${columnsMobile},minmax(0,1fr));}}` +
-          // After the mobile query, and only when authored.
-          (columnsTablet !== null
-            ? `${TABLET_MEDIA_QUERY_COMPACT}{[data-favourites-grid-id="${gridId}"]{grid-template-columns:repeat(${columnsTablet},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-favourites-grid-id="${gridId}"]{grid-template-columns:repeat(${baseColumns},minmax(0,1fr));}` +
+              `${MOBILE_MEDIA_QUERY_COMPACT}{[data-favourites-grid-id="${gridId}"]{grid-template-columns:repeat(${columnsMobile},minmax(0,1fr));}}` +
+              // After the mobile query, and only when authored.
+              (columnsTablet !== null
+                ? `${TABLET_MEDIA_QUERY_COMPACT}{[data-favourites-grid-id="${gridId}"]{grid-template-columns:repeat(${columnsTablet},minmax(0,1fr));}}`
+                : '')
+          )
+        }}
+      />
 
       {customCards ??
         favourites.map((favourite, index) => {

package/src/blocks/icon-button-block.tsx

@@ -3,7 +3,10 @@
 import React from 'react';
 import { Image } from '@akinon/next/components/image';
 import { getResponsiveValue } from '../utils';
-import { escapeCssAttributeValue } from '../utils/css-safety';
+import {
+  escapeCssAttributeValue,
+  neutralizeStyleTagBreakout
+} from '../utils/css-safety';
 import { useThemeSettingsContext } from '../theme-settings-context';
 import { BlockRendererProps } from './block-renderer-registry';
 import { DesignerPlaceholder } from './product-block-utils';
@@ -158,7 +161,13 @@ const IconButtonBlock = ({
         {...labelAttrs}
         style={{ display: 'inline-flex' }}
       >
-        <style>{markupCss}</style>
+        {/* Verbatim, not a text child: see `css-safety.ts`. The id is only
+            attribute-escaped, so the breakout is neutralized here. */}
+        <style
+          dangerouslySetInnerHTML={{
+            __html: neutralizeStyleTagBreakout(markupCss)
+          }}
+        />
         <span dangerouslySetInnerHTML={{ __html: source.markup }} />
       </span>
     );

package/src/blocks/icon-group-block.tsx

@@ -2,7 +2,10 @@
 
 import React from 'react';
 import { getResponsiveValue } from '../utils';
-import { escapeCssAttributeValue } from '../utils/css-safety';
+import {
+  escapeCssAttributeValue,
+  neutralizeStyleTagBreakout
+} from '../utils/css-safety';
 import { BlockRendererProps } from './block-renderer-registry';
 import { DesignerPlaceholder } from './product-block-utils';
 import { renderComposedChildren } from './render-composed-children';
@@ -110,7 +113,11 @@ const IconGroupBlock = ({
         ...(tint ? { color: tint } : null)
       }}
     >
-      <style>{sizeCss}</style>
+      {/* Verbatim, not a text child: see `css-safety.ts`. The id is only
+          attribute-escaped, so the breakout is neutralized here. */}
+      <style
+        dangerouslySetInnerHTML={{ __html: neutralizeStyleTagBreakout(sizeCss) }}
+      />
       {children}
     </span>
   );

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

@@ -3,6 +3,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useOverlay } from '../hooks/use-overlay';
 import { getResponsiveValue, partAttrs } from '../utils';
+import { neutralizeStyleTagBreakout } from '../utils/css-safety';
 import { BlockRendererProps } from './block-renderer-registry';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
 import {
@@ -722,9 +723,15 @@ const ProductGalleryBlock = ({
   const hintNeedsHoverGate = zoomHint !== '' && enableZoom && !enableViewer;
 
   const hintHoverGateNode = hintNeedsHoverGate ? (
-    <style>
-      {`@media (hover:none){[data-product-gallery-id="${galleryId}"] [data-part="zoom-hint"]{display:none;}}`}
-    </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(
+          `@media (hover:none){[data-product-gallery-id="${galleryId}"] [data-part="zoom-hint"]{display:none;}}`
+        )
+      }}
+    />
   ) : null;
 
   const hintNode =
@@ -1427,10 +1434,15 @@ const ProductGalleryBlock = ({
           width: '100%'
         }}
       >
-        <style>
-          {`[data-product-gallery-id="${galleryId}"] [data-part="grid"]{grid-template-columns:repeat(${baseColumns},minmax(0,1fr));}` +
-            `@media (max-width:1023px){[data-product-gallery-id="${galleryId}"] [data-part="grid"]{grid-template-columns:repeat(${gridColumnsMobile},minmax(0,1fr));}}`}
-        </style>
+        {/* Verbatim, not a text child: see `css-safety.ts`. */}
+        <style
+          dangerouslySetInnerHTML={{
+            __html: neutralizeStyleTagBreakout(
+              `[data-product-gallery-id="${galleryId}"] [data-part="grid"]{grid-template-columns:repeat(${baseColumns},minmax(0,1fr));}` +
+                `@media (max-width:1023px){[data-product-gallery-id="${galleryId}"] [data-part="grid"]{grid-template-columns:repeat(${gridColumnsMobile},minmax(0,1fr));}}`
+            )
+          }}
+        />
 
         {hintHoverGateNode}