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

package/src/__tests__/part-style-scope.test.tsx

@@ -0,0 +1,229 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ThemeBlock from '../theme-block';
+import { generateThemeCSS } from '../utils';
+import { buildPartSelectors } from '../utils/part-styles';
+import type { Section } from '../theme-section';
+
+/**
+ * A part style must reach only the block that declares the part.
+ *
+ * The generated rule is a descendant selector, and part names are generic on
+ * purpose (`header`, `panel`, `content`, `title`, `icon`, …) so that a
+ * designer who learned one block's panel knows the next one's. Those two facts
+ * collide the moment a container block holds another block that names a part
+ * the same way: styling the outer block's header also restyled the inner
+ * block's header, which no panel said would happen and no panel could undo.
+ *
+ * The composition below is built entirely from real renderers — an accordion
+ * inside an accordion — because both ends of the collision then come from
+ * shipped code rather than from a fixture written to collide.
+ */
+
+const heading = (id: string, children: unknown[] = []) => ({
+  id: `${id}-heading`,
+  type: 'group',
+  label: 'Accordion Heading',
+  properties: {},
+  styles: {},
+  order: 0,
+  hidden: false,
+  blocks: children
+});
+
+const content = (id: string, children: unknown[] = []) => ({
+  id: `${id}-content`,
+  type: 'group',
+  label: 'Accordion Content',
+  properties: {},
+  styles: {},
+  order: 1,
+  hidden: false,
+  blocks: children
+});
+
+const text = (id: string) => ({
+  id,
+  type: 'text',
+  label: 'Text',
+  value: '<p>copy</p>',
+  properties: {},
+  styles: {},
+  order: 0,
+  hidden: false
+});
+
+const accordion = (id: string, styles: Record<string, unknown>, inner?: unknown) => ({
+  id,
+  type: 'accordion',
+  label: 'Accordion',
+  value: '',
+  properties: { defaultOpen: true },
+  styles,
+  order: 0,
+  hidden: false,
+  blocks: [
+    heading(id, [text(`${id}-title`)]),
+    content(id, inner ? [inner] : [text(`${id}-copy`)])
+  ]
+});
+
+/** The outer accordion carries the styles; the inner one carries the same parts. */
+const composition = (styles: Record<string, unknown>) =>
+  accordion('outer', styles, accordion('inner', {}));
+
+const sectionWith = (styles: Record<string, unknown>): Section[] =>
+  [
+    {
+      id: 'sec-1',
+      type: 'custom',
+      name: 'Section',
+      label: 'Section',
+      order: 0,
+      hidden: false,
+      properties: {},
+      styles: {},
+      blocks: [composition(styles)]
+    }
+  ] as unknown as Section[];
+
+const renderComposition = (styles: Record<string, unknown>) =>
+  render(
+    <ThemeBlock
+      block={composition(styles) as never}
+      placeholderId="p"
+      sectionId="sec-1"
+      isDesigner={false}
+    />
+  );
+
+/** Every selector the generated stylesheet aims at the given part. */
+const selectorsFor = (css: string, part: string): string[] =>
+  css
+    .split('}')
+    .map((chunk) => chunk.slice(0, chunk.indexOf('{')))
+    .filter((selector) => selector.includes(`[data-part="${part}"]`))
+    .flatMap((selector) => selector.split(',').map((one) => one.trim()))
+    .filter(Boolean);
+
+const matchIds = (root: HTMLElement, selectors: string[]): string[] => {
+  const owners = new Set<string>();
+
+  selectors.forEach((selector) => {
+    root.querySelectorAll<HTMLElement>(selector).forEach((element) => {
+      owners.add(
+        element.closest('[data-block-id]')?.getAttribute('data-block-id') || '?'
+      );
+    });
+  });
+
+  return Array.from(owners).sort();
+};
+
+describe('a part style stays inside the block that declares the part', () => {
+  it('renders both accordions, each with its own parts', () => {
+    // Guards the premise: if the inner accordion stopped emitting these parts
+    // the leak tests below would pass for the wrong reason.
+    const { container } = renderComposition({});
+
+    expect(container.querySelectorAll('[data-part="header"]')).toHaveLength(2);
+    expect(container.querySelectorAll('[data-part="panel"]')).toHaveLength(2);
+    expect(container.querySelectorAll('[data-part="content"]')).toHaveLength(2);
+  });
+
+  it.each(['header', 'panel', 'content'])(
+    'does not reach the nested block that names its %s the same way',
+    (part) => {
+      const css = generateThemeCSS(
+        sectionWith({ [`${part}/color`]: { desktop: '#ff0000' } })
+      );
+      const { container } = renderComposition({});
+      const selectors = selectorsFor(css, part);
+
+      expect(selectors.length).toBeGreaterThan(0);
+      expect(matchIds(container, selectors)).toEqual(['outer']);
+    }
+  );
+
+  it('still reaches the declaring block through a state selector', () => {
+    const css = generateThemeCSS(
+      sectionWith({ 'header/open/color': { desktop: '#00ff00' } })
+    );
+    const { container } = renderComposition({});
+    const selectors = selectorsFor(css, 'header');
+
+    // defaultOpen is on, so both accordions carry data-state="open".
+    expect(matchIds(container, selectors)).toEqual(['outer']);
+  });
+});
+
+describe('the selector shape published compositions already rely on', () => {
+  it('still matches the declaring block from outside a nested block', () => {
+    const [selector] = buildPartSelectors('[data-block-id="blk-1"]', {
+      part: 'dropdown',
+      state: null,
+      styles: {}
+    });
+
+    document.body.innerHTML =
+      '<div data-block-id="blk-1"><select data-part="dropdown"></select></div>';
+
+    expect(document.querySelectorAll(selector)).toHaveLength(1);
+  });
+
+  it('keeps the same specificity, so nothing re-orders in the cascade', () => {
+    // A rule that lost to another !important rule yesterday has to lose to it
+    // today; only the leaked elements may drop out. That holds because the
+    // guard sits inside :where(), which contributes zero specificity —
+    // :not() would otherwise take the specificity of its argument.
+    const [selector] = buildPartSelectors('[data-block-id="blk-1"]', {
+      part: 'dropdown',
+      state: null,
+      styles: {}
+    });
+
+    expect(selector).toContain(':not(:where(');
+    // Everything outside the guard is the selector that shipped before.
+    expect(selector.replace(/:not\(:where\([^)]*\)\)/, '')).toBe(
+      '[data-block-id="blk-1"] [data-part="dropdown"]'
+    );
+  });
+
+  it('leaves a state selector list intact', () => {
+    const selectors = buildPartSelectors('[data-block-id="blk-1"]', {
+      part: 'option',
+      state: 'selected',
+      styles: {}
+    });
+
+    document.body.innerHTML =
+      '<div data-block-id="blk-1">' +
+      '<a id="a" data-part="option" data-state="selected"></a>' +
+      '<a id="b" data-part="option" aria-selected="true"></a>' +
+      '<a id="c" data-part="option" aria-current="true"></a>' +
+      '</div>';
+
+    const matched = new Set<string>();
+    selectors.forEach((selector) =>
+      document
+        .querySelectorAll(selector)
+        .forEach((element) => matched.add(element.id))
+    );
+
+    expect(Array.from(matched).sort()).toEqual(['a', 'b', 'c']);
+  });
+
+  it('rejects a part name that tries to break out of the selector', () => {
+    // Part names reach CSS from merchant-authored style keys.
+    const selectors = buildPartSelectors('[data-block-id="blk-1"]', {
+      part: 'a"] , * { color: red } [x="',
+      state: null,
+      styles: {}
+    });
+
+    selectors.forEach((selector) => {
+      expect(selector).not.toContain('{');
+      expect(() => document.querySelectorAll(selector)).not.toThrow();
+    });
+  });
+});

package/src/__tests__/part-styles.test.ts

@@ -0,0 +1,311 @@
+import { generateThemeCSS } from '../utils';
+import {
+  buildPartStyleKey,
+  parsePartStyleKey,
+  partAttrs,
+  splitPartStyles
+} from '../utils/part-styles';
+import type { Section } from '../theme-section';
+
+const sectionWith = (styles: Record<string, unknown>): Section[] =>
+  [
+    {
+      id: 'sec-1',
+      type: 'custom',
+      name: 'Section',
+      label: 'Section',
+      order: 0,
+      hidden: false,
+      properties: {},
+      styles: {},
+      blocks: [
+        {
+          id: 'blk-1',
+          type: 'variant-selector',
+          label: 'Variant selector',
+          order: 0,
+          hidden: false,
+          value: '',
+          properties: {},
+          styles,
+          blocks: []
+        }
+      ]
+    }
+  ] as unknown as Section[];
+
+describe('part style keys', () => {
+  it('reads a part key with and without a state', () => {
+    expect(parsePartStyleKey('dropdown/border-color')).toEqual({
+      part: 'dropdown',
+      state: null,
+      property: 'border-color'
+    });
+    expect(parsePartStyleKey('dropdown/focus/border-color')).toEqual({
+      part: 'dropdown',
+      state: 'focus',
+      property: 'border-color'
+    });
+  });
+
+  it('leaves a plain style key alone', () => {
+    expect(parsePartStyleKey('border-color')).toBeNull();
+    expect(parsePartStyleKey('background-color')).toBeNull();
+  });
+
+  it('treats an unknown middle segment as not a part key', () => {
+    // Better to render it on the root than to drop it silently.
+    expect(parsePartStyleKey('dropdown/wobble/border-color')).toBeNull();
+  });
+
+  it('round-trips through the builder', () => {
+    expect(parsePartStyleKey(buildPartStyleKey('option', 'color'))).toEqual({
+      part: 'option',
+      state: null,
+      property: 'color'
+    });
+    expect(
+      parsePartStyleKey(buildPartStyleKey('option', 'color', 'selected'))
+    ).toEqual({ part: 'option', state: 'selected', property: 'color' });
+  });
+
+  it('separates root styles from part styles', () => {
+    const { root, parts } = splitPartStyles({
+      'margin-top': { desktop: 10 },
+      'dropdown/border-color': { desktop: '#000' },
+      'dropdown/focus/border-color': { desktop: '#f00' },
+      'option/color': { desktop: '#333' }
+    });
+
+    expect(Object.keys(root)).toEqual(['margin-top']);
+    expect(parts).toHaveLength(3);
+    expect(parts[0]).toEqual({
+      part: 'dropdown',
+      state: null,
+      styles: { 'border-color': { desktop: '#000' } }
+    });
+  });
+});
+
+describe('partAttrs', () => {
+  it('emits the part name', () => {
+    expect(partAttrs('dropdown')).toEqual({ 'data-part': 'dropdown' });
+  });
+
+  it('lists only the states that are on', () => {
+    expect(partAttrs('option', { selected: true, disabled: false })).toEqual({
+      'data-part': 'option',
+      'data-state': 'selected'
+    });
+    expect(partAttrs('option', { selected: true, disabled: true })[
+      'data-state'
+    ]).toBe('selected disabled');
+  });
+
+  it('omits data-state entirely when nothing is on', () => {
+    expect(partAttrs('option', { selected: false })).toEqual({
+      'data-part': 'option'
+    });
+  });
+});
+
+describe('generated CSS for parts', () => {
+  it('targets the part inside the block, not the block root', () => {
+    const css = generateThemeCSS(
+      sectionWith({ 'dropdown/border-color': { desktop: '#111111' } })
+    );
+
+    expect(css).toContain('[data-block-id="blk-1"] [data-part="dropdown"]');
+    expect(css).toContain('#111111');
+  });
+
+  it('wins over the inline default the renderer ships', () => {
+    // Inline styles outrank any stylesheet, so without !important the
+    // designer's value would be saved, displayed and ignored.
+    const css = generateThemeCSS(
+      sectionWith({ 'dropdown/border-color': { desktop: '#111111' } })
+    );
+
+    expect(css).toMatch(/border-color:\s*#111111\s*!important/);
+  });
+
+  it('keeps part styles off the block wrapper', () => {
+    const css = generateThemeCSS(
+      sectionWith({ 'dropdown/padding': { desktop: '20px' } })
+    );
+
+    // A padding meant for the dropdown must not move the whole block.
+    expect(css).not.toMatch(/\[data-block-id="blk-1"\]\s*\{[^}]*padding/);
+  });
+
+  it('still renders root styles next to part styles', () => {
+    const css = generateThemeCSS(
+      sectionWith({
+        'margin-top': { desktop: '24px' },
+        'dropdown/border-color': { desktop: '#111111' }
+      })
+    );
+
+    expect(css).toMatch(/\[data-block-id="blk-1"\]\s*\{[^}]*margin-top/);
+    expect(css).toContain('[data-part="dropdown"]');
+  });
+
+  it('expands a state to every expression a renderer might use', () => {
+    const css = generateThemeCSS(
+      sectionWith({ 'option/disabled/opacity': { desktop: '0.4' } })
+    );
+
+    expect(css).toContain('[data-part="option"]:disabled');
+    expect(css).toContain('[data-part="option"][aria-disabled="true"]');
+    expect(css).toContain('[data-part="option"][data-state~="disabled"]');
+  });
+
+  it('supports focus and hover on a part', () => {
+    const css = generateThemeCSS(
+      sectionWith({
+        'dropdown/hover/background-color': { desktop: '#eeeeee' },
+        'dropdown/focus/border-color': { desktop: '#0000ff' }
+      })
+    );
+
+    expect(css).toContain('[data-part="dropdown"]:hover');
+    expect(css).toContain('[data-part="dropdown"]:focus-visible');
+  });
+
+  it('honours the mobile value when a breakpoint is targeted', () => {
+    const css = generateThemeCSS(
+      sectionWith({
+        'dropdown/border-color': { desktop: '#111111', mobile: '#222222' }
+      }),
+      'mobile'
+    );
+
+    expect(css).toContain('#222222');
+    expect(css).not.toContain('#111111');
+  });
+
+  it('cannot be used to break out of the selector', () => {
+    const css = generateThemeCSS(
+      sectionWith({ 'drop"]{color:red}[x/color': { desktop: '#000' } })
+    );
+
+    expect(css).not.toContain('color:red');
+    expect(css).not.toContain('"]{');
+  });
+});
+
+describe('routing a block\'s own styles to its real root', () => {
+  const blockWith = (
+    styles: Record<string, unknown>,
+    stylesTargetRoot?: boolean
+  ): Section[] =>
+    [
+      {
+        id: 'sec-1',
+        type: 'custom',
+        name: 'Section',
+        label: 'Section',
+        order: 0,
+        hidden: false,
+        properties: {},
+        styles: {},
+        blocks: [
+          {
+            id: 'blk-1',
+            type: 'search-box',
+            label: 'Search',
+            order: 0,
+            hidden: false,
+            value: '',
+            properties: {},
+            styles,
+            stylesTargetRoot,
+            blocks: []
+          }
+        ]
+      }
+    ] as unknown as Section[];
+
+  it('stays on the wrapper for a block that has not opted in', () => {
+    const css = generateThemeCSS(blockWith({ padding: { desktop: '12px' } }));
+
+    expect(css).toMatch(/\[data-block-id="blk-1"\]\s*\{[^}]*padding/);
+    expect(css).not.toContain('[data-part="root"]');
+  });
+
+  it('reaches the real root once the block opts in', () => {
+    // data-block-id sits on the designer wrapper, so a padding set here used
+    // to stop at a transparent div and never reach the control.
+    const css = generateThemeCSS(
+      blockWith({ padding: { desktop: '12px' } }, true)
+    );
+
+    expect(css).toContain('[data-block-id="blk-1"] [data-part="root"]');
+    expect(css).not.toMatch(/\[data-block-id="blk-1"\]\s*\{[^}]*padding/);
+  });
+});
+
+describe('sections get the same treatment as blocks', () => {
+  const sectionWith = (
+    styles: Record<string, unknown>,
+    properties: Record<string, unknown> = {}
+  ): Section[] =>
+    [
+      {
+        id: 'sec-1',
+        type: 'custom',
+        name: 'Section',
+        label: 'Section',
+        order: 0,
+        hidden: false,
+        properties,
+        styles,
+        blocks: []
+      }
+    ] as unknown as Section[];
+
+  it('emits a part rule instead of an invalid declaration', () => {
+    // A part key on a section used to be written out as `tab/color:` — an
+    // invalid declaration that killed the whole rule.
+    const css = generateThemeCSS(
+      sectionWith({ 'tab/color': { desktop: '#123456' } })
+    );
+
+    expect(css).toContain('[data-section-id="sec-1"] [data-part="tab"]');
+    expect(css).not.toContain('tab/color:');
+  });
+
+  it('accepts scoped custom CSS', () => {
+    const css = generateThemeCSS(
+      sectionWith({}, { customCss: { desktop: '& { outline: 1px solid; }' } })
+    );
+
+    expect(css).toContain('[data-section-id="sec-1"] {');
+    expect(css).toContain('outline: 1px solid');
+  });
+});
+
+describe('pinning a state so it can be styled', () => {
+  it('matches a written state as well as the real pseudo-class', () => {
+    // A designer cannot hold :hover while reaching for the colour picker, so
+    // the canvas writes the state onto the element and the same rule applies.
+    const css = generateThemeCSS(
+      sectionWith({ 'dropdown/hover/background-color': { desktop: '#eee' } })
+    );
+
+    expect(css).toContain('[data-part="dropdown"]:hover');
+    expect(css).toContain('[data-part="dropdown"][data-state~="hover"]');
+  });
+
+  it('does the same for focus and active', () => {
+    const css = generateThemeCSS(
+      sectionWith({
+        'dropdown/focus/border-color': { desktop: '#00f' },
+        'option/active/opacity': { desktop: '0.8' }
+      })
+    );
+
+    expect(css).toContain('[data-part="dropdown"][data-state~="focus"]');
+    expect(css).toContain('[data-part="option"][data-state~="active"]');
+  });
+});

package/src/__tests__/registry-parity.test.ts

@@ -26,10 +26,27 @@ const extractRegisteredTypes = (source: string): string[] => {
 
 const EXPECTED_BLOCK_TYPES = [
   'accordion',
+  'account-menu',
+  'add-to-cart',
+  'address-list',
+  'applied-filters',
+  'auth-form',
+  'basket-items',
+  'basket-summary',
   'button',
+  'change-password-form',
+  'checkout-steps',
+  'checkout-summary',
+  'countdown',
   'counter',
+  'coupon-list',
   'divider',
   'embed',
+  'facet-filters',
+  'faq-accordion',
+  'favorite-button',
+  'favourites-grid',
+  'forgot-password',
   'group',
   'hotspot',
   'icon',
@@ -37,11 +54,36 @@ const EXPECTED_BLOCK_TYPES = [
   'image-gallery',
   'input',
   'link',
+  'listing-breadcrumb',
+  'listing-pagination',
+  'listing-result-count',
+  'listing-title',
   'lottie',
   'map',
+  'oauth-buttons',
+  'order-detail',
+  'order-list',
+  'order-success',
+  'order-tracking',
+  'product-attributes',
+  'product-breadcrumb',
+  'product-description',
+  'product-gallery',
+  'product-grid',
+  'product-price',
+  'product-recommendations',
+  'product-title',
+  'profile-form',
+  'register-form',
+  'share',
+  'size-guide',
   'slider',
+  'sort-select',
+  'stock-status',
+  'store-locator',
   'tab',
   'text',
+  'variant-selector',
   'video'
 ];