@akinon/pz-theme 2.0.83-rc.0 → 2.0.84-beta.0

package/src/utils/__tests__/inner-root-styles.test.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import {
+  INNER_ROOT_BLOCK_TYPES,
+  generateThemeCSS,
+  getInnerRootInlineStyles
+} from '../index';
+import TextBlock from '../../blocks/text-block';
+import type { Block } from '../../theme-block';
+
+/**
+ * Where a block's root styles are applied — once.
+ *
+ * A handful of renderers draw their own root element rather than letting the
+ * designer wrapper be the box: a text is a `<div>` with the copy in it, a link
+ * is an `<a>`, a button is a `<button>`. Those renderers also inlined the
+ * block's whole style object on that element, while the generated stylesheet
+ * wrote the same declarations onto the wrapper around it. A padding of 24 was
+ * therefore rendered as 24 outside AND 24 inside, and a designer who typed one
+ * number saw two gaps.
+ *
+ * The fix is one rule: for these types the sheet targets the element the
+ * renderer draws (`data-part="root"`), and the renderer inlines only what a
+ * stylesheet cannot say.
+ */
+
+const blockOf = (overrides: Partial<Block>): Block =>
+  ({
+    id: 'blk',
+    type: 'text',
+    label: 'Block',
+    value: 'Hello',
+    order: 0,
+    hidden: false,
+    properties: {},
+    styles: {},
+    blocks: [],
+    ...overrides
+  }) as Block;
+
+const sectionWith = (block: Partial<Block>) =>
+  [
+    {
+      id: 'sec-1',
+      styles: {},
+      blocks: [blockOf(block)]
+    }
+  ] as unknown as Parameters<typeof generateThemeCSS>[0];
+
+describe('a renderer that draws its own root', () => {
+  it('is the element the stylesheet targets, so a padding lands once', () => {
+    const css = generateThemeCSS(
+      sectionWith({ id: 'txt', type: 'text', styles: { padding: '24px' } })
+    );
+
+    expect(css).toContain('[data-block-id="txt"] [data-part="root"] {');
+    // The wrapper must NOT also carry it: that second application is the bug.
+    expect(css).not.toContain('[data-block-id="txt"] {');
+  });
+
+  it('leaves every other block type on the wrapper', () => {
+    const css = generateThemeCSS(
+      sectionWith({ id: 'img', type: 'image', styles: { padding: '24px' } })
+    );
+
+    // Published compositions render against the wrapper rule; only the types
+    // whose renderer marks its root may be moved.
+    expect(css).toContain('[data-block-id="img"] {');
+    expect(css).not.toContain('[data-part="root"]');
+  });
+
+  it('covers the three renderers that mark their root', () => {
+    expect([...INNER_ROOT_BLOCK_TYPES].sort()).toEqual([
+      'button',
+      'link',
+      'text'
+    ]);
+  });
+});
+
+describe('what still has to be inlined', () => {
+  it('is nothing, for a plain value the sheet can write', () => {
+    expect(
+      getInnerRootInlineStyles({ padding: '24px', 'font-size': '16px' })
+    ).toEqual({});
+  });
+
+  it('is a theme token, which only the renderer can resolve', () => {
+    const inline = getInnerRootInlineStyles(
+      { color: 'var(--theme-primary)', padding: '24px' },
+      { primaryColor: '#00a86b' } as never
+    );
+
+    // Normalised to rgba the same way every colour is, alpha 1 for "no
+    // opacity set" — what matters is that the token became a real colour.
+    expect(inline).toEqual({ color: 'rgba(0, 168, 107, 1)' });
+  });
+
+  it('is a colour with text-opacity folded into it', () => {
+    // The generated CSS treats text-opacity as a helper key and never applies
+    // it to `color`, so this composition only exists inline.
+    const inline = getInnerRootInlineStyles({
+      color: '#00a86b',
+      'text-opacity': '40'
+    });
+
+    expect(inline).toEqual({ color: 'rgba(0, 168, 107, 0.4)' });
+  });
+
+  it('is whatever an iterator row resolved for itself', () => {
+    // One rule serves every clone, so a per-row value has nowhere else to live.
+    const inline = getInnerRootInlineStyles(
+      { 'background-color': '#e63946', 'border-radius': '4px' },
+      undefined,
+      'desktop',
+      ['background-color']
+    );
+
+    expect(inline).toEqual({ backgroundColor: 'rgba(230, 57, 70, 1)' });
+  });
+});
+
+describe('the text block', () => {
+  it('marks its root and inlines no padding of its own', () => {
+    const { container } = render(
+      <TextBlock
+        block={blockOf({ styles: { padding: '24px', color: '#111111' } })}
+        currentBreakpoint="desktop"
+      />
+    );
+
+    const root = container.querySelector('[data-part="root"]') as HTMLElement;
+
+    expect(root).not.toBeNull();
+    expect(root.style.padding).toBe('');
+    expect(root.style.color).toBe('');
+  });
+});

package/src/utils/__tests__/iterator-bindings.test.tsx

@@ -303,15 +303,21 @@ describe('a style value can carry a binding', () => {
       // through, so the row gets a real rgba rather than a flat swatch.
       expect(painted[0].style.backgroundColor).toBe('rgba(0, 168, 107, 0.4)');
       expect(painted[1].style.backgroundColor).toMatch(/230, 57, 70/);
-      // The unbound property is still on every row.
-      expect(painted[0].style.borderRadius).toBe('4px');
+      // The UNBOUND property is deliberately not inlined: it belongs to the one
+      // rule every clone shares (see INNER_ROOT_BLOCK_TYPES). Inlining it as
+      // well applied it twice — once from the rule, once from here — which is
+      // what doubled every padding a designer set on a text block.
+      expect(painted[0].style.borderRadius).toBe('');
     });
 
     it('paints nothing where the row carries no colour', () => {
       const [painted] = paintBadges([{ name: 'No badge' }]);
 
       expect(painted.style.backgroundColor).toBe('');
-      expect(painted.getAttribute('style')).not.toContain('undefined');
+      // No inline attribute at all now that the unbound properties live on the
+      // shared rule — but the point stands: an unresolved binding must never
+      // reach the element as the string `undefined`.
+      expect(painted.getAttribute('style') ?? '').not.toContain('undefined');
     });
   });
 });

package/src/utils/index.ts

@@ -477,9 +477,11 @@ const resolveSectionMaxWidthTokens = <T extends Record<string, unknown>>(
     if (value && typeof value === 'object' && !Array.isArray(value)) {
       const rawEntries = Object.entries(value as Record<string, unknown>);
 
-      if (rawEntries.some(([, breakpointValue]) =>
-        isSectionMaxWidthToken(breakpointValue)
-      )) {
+      if (
+        rawEntries.some(([, breakpointValue]) =>
+          isSectionMaxWidthToken(breakpointValue)
+        )
+      ) {
         constrained = true;
       }
 
@@ -525,6 +527,105 @@ const resolveSectionMaxWidthTokens = <T extends Record<string, unknown>>(
   return changed ? (resolved as T) : styles;
 };
 
+/**
+ * Blocks whose renderer draws its OWN root element and marks it
+ * `data-part="root"`.
+ *
+ * Their generated root rule is routed to that element instead of onto the
+ * designer wrapper (see `rootSelector` in `collectBlockCSS`). Two things go
+ * wrong without it: a padding set on the block lands on the wrapper AND is
+ * inlined on the inner element by the renderer, so the shopper sees it twice;
+ * and a border or background set on a functional block stops at a transparent
+ * div that wraps the control instead of reaching it.
+ *
+ * A type not listed here keeps landing on the wrapper, which is what every
+ * other published block renders against today.
+ */
+export const INNER_ROOT_BLOCK_TYPES: ReadonlySet<string> = new Set([
+  'text',
+  'link',
+  'button'
+]);
+
+/**
+ * The part of a block's root styles that the STYLESHEET cannot produce, and
+ * which a renderer drawing its own root therefore still has to inline:
+ *
+ *  - values carrying a theme token, which only `resolveThemeCssVariables`
+ *    turns into a real colour;
+ *  - `color`, once `text-opacity` has to be composited into it — the generated
+ *    CSS treats text-opacity as a helper key and never applies it.
+ *
+ * Everything else comes from the routed rule, which is the whole point: a
+ * padding inlined here as well would be applied twice, and — being inline — it
+ * would also outrank the media query and the `:hover` the same stylesheet
+ * emits for that element.
+ */
+export const getInnerRootInlineStyles = (
+  rawStyles?: Record<string, unknown>,
+  themeSettings?: ThemeSettings,
+  breakpoint = 'desktop',
+  /**
+   * Properties an iterator clone resolved from its own row. They cannot come
+   * from the sheet at all: one rule serves every clone, so a per-row colour
+   * only exists here.
+   */
+  rowStyleKeys?: string[]
+): React.CSSProperties => {
+  if (!rawStyles) return {};
+
+  const resolved = getCSSStyles(rawStyles, themeSettings, breakpoint) as Record<
+    string,
+    unknown
+  >;
+  // The same read with no settings to resolve against: whatever differs is a
+  // value that carried a token.
+  const verbatim = getCSSStyles(rawStyles, undefined, breakpoint) as Record<
+    string,
+    unknown
+  >;
+
+  const opacityEntry =
+    (rawStyles as Record<string, unknown>)['text-opacity'] ??
+    (rawStyles as Record<string, unknown>).textOpacity;
+  const textOpacity = opacityEntry
+    ? Number(getResponsiveValue(opacityEntry, breakpoint, '100'))
+    : 100;
+  const compositesTextAlpha = Number.isFinite(textOpacity) && textOpacity < 100;
+
+  // The row's own properties, in the camelCase the resolved object uses. An
+  // opacity binding paints its companion colour, so it keeps that key instead.
+  const OPACITY_TARGETS: Record<string, string[]> = {
+    'text-opacity': ['color'],
+    'background-opacity': ['backgroundColor', 'background']
+  };
+  const rowKeys = new Set(
+    (rowStyleKeys ?? []).flatMap((key) => {
+      const normalized = key.includes('-')
+        ? key
+        : key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+
+      return OPACITY_TARGETS[normalized] ?? [kebabToCamel(normalized)];
+    })
+  );
+
+  const kept: Record<string, unknown> = {};
+
+  Object.entries(resolved).forEach(([key, value]) => {
+    const carriesToken = value !== verbatim[key];
+
+    if (
+      carriesToken ||
+      rowKeys.has(key) ||
+      (key === 'color' && compositesTextAlpha)
+    ) {
+      kept[key] = value;
+    }
+  });
+
+  return kept as React.CSSProperties;
+};
+
 export const getCSSStyles = (
   rawStyles?: Record<string, unknown>,
   themeSettings?: ThemeSettings,
@@ -1262,7 +1363,6 @@ const generateElementCSS = (
   const mobileHoverCss = buildHoverCss('mobile', '  ');
 
   if (mobileStyles.length > 0) {
-
     css += `${MOBILE_MEDIA_QUERY} {\n  ${selector} {\n  ${mobileStyles.join(
       ';\n  '
     )};\n  }\n${mobileHoverCss}}\n`;
@@ -1281,7 +1381,6 @@ const generateElementCSS = (
     mobileStyles.length > 0 ? mobileHoverCss : buildHoverCss('desktop', '  ');
 
   if (tabletStyles.length > 0 || tabletHoverCss !== inheritedHoverCss) {
-
     const tabletDeclarations =
       tabletStyles.length > 0
         ? `  ${selector} {\n  ${tabletStyles.join(';\n  ')};\n  }\n`
@@ -1407,7 +1506,9 @@ const collectBlockCSS = (
       // A block that names its real root with `data-part="root"` gets its
       // own styles routed there instead. Blocks that do not are untouched,
       // which is what keeps published compositions rendering as before.
-      const rootSelector = block.stylesTargetRoot
+      const targetsInnerRoot =
+        block.stylesTargetRoot ?? INNER_ROOT_BLOCK_TYPES.has(block.type ?? '');
+      const rootSelector = targetsInnerRoot
         ? `${selector} [data-part="root"]`
         : selector;
 

package/src/utils/iterator-utils.ts

@@ -941,6 +941,39 @@ const isRowBoundStyleValue = (value: unknown): value is string =>
  * SAME object when nothing is bound, so a composition without style bindings
  * is not merely equal but identical — no new object, no changed CSS.
  */
+/**
+ * Which properties a row resolves for itself.
+ *
+ * Read from the template's styles, while the tokens are still in them. The
+ * renderer needs the list because a per-row value is the one thing the shared
+ * stylesheet cannot carry: one rule serves every clone, so a badge colour that
+ * differs per product has to be inlined on the element. Everything else stays
+ * on the rule — see the note above `resolveStyleBindingsForRow`.
+ */
+export const collectRowBoundStyleKeys = (styles: unknown): string[] => {
+  if (!isRecord(styles)) return [];
+
+  const keys: string[] = [];
+
+  Object.entries(styles).forEach(([key, value]) => {
+    if (typeof value === 'string') {
+      if (isRowBoundStyleValue(value)) keys.push(key);
+      return;
+    }
+
+    if (isRecord(value)) {
+      const boundBreakpoint = Object.values(value).some(
+        (breakpointValue) =>
+          typeof breakpointValue === 'string' &&
+          isRowBoundStyleValue(breakpointValue)
+      );
+      if (boundBreakpoint) keys.push(key);
+    }
+  });
+
+  return keys;
+};
+
 const resolveStyleBindingsForRow = (
   styles: unknown,
   itemData: unknown
@@ -1132,12 +1165,16 @@ const replaceBlockValues = (
       // Only the bound properties are replaced; the rest of the block's styles
       // stay on the shared rule, so a card with one bound colour keeps the
       // whole stylesheet it had.
+      const rowBoundStyleKeys = collectRowBoundStyleKeys(nextBlock.styles);
       const resolvedStyles = resolveStyleBindingsForRow(
         nextBlock.styles,
         itemData
       );
       if (resolvedStyles !== nextBlock.styles) {
         nextBlock.styles = resolvedStyles;
+        // A renderer that draws its own root has to inline exactly these: the
+        // shared rule cannot say a different colour per row.
+        nextBlock.rowStyleKeys = rowBoundStyleKeys;
       }
 
       // A repeat inside a row means "the row's list": a colour-swatch strip
@@ -1330,8 +1367,8 @@ export const buildIteratorBlock = ({
     displayItems.length > 0
       ? displayItems.length
       : scopedItems
-      ? 0
-      : Math.max(iteratorCount, 1);
+        ? 0
+        : Math.max(iteratorCount, 1);
 
   const clonedBlocks = Array.from({ length: actualCount }, (_, index) => {
     // `??`, not `||`: an entry of a list of plain values can be falsy (0, '')

package/src/utils/part-styles.ts

@@ -69,6 +69,10 @@ const STATE_SELECTORS: Record<string, string[]> = {
   available: ['[data-state~="available"]'],
   unavailable: ['[data-state~="unavailable"]'],
   unknown: ['[data-state~="unknown"]'],
+  // A price a campaign has cut. The card stamps it next to the struck retail
+  // figure (product-recommendations-block), so the discounted price can carry
+  // its own colour without a second block or a renderer flag.
+  discounted: ['[data-state~="discounted"]'],
   // The odd ones out: every state above is a fact about the ELEMENT and matches
   // on the element itself. These two are facts about the PAGE — the chrome slot
   // carries `data-scroll-state` (see chrome/scroll-state.tsx) and `body` carries