@akinon/pz-theme 2.0.164-rc.1 → 2.0.165-beta.0

package/src/utils/__tests__/theme-settings-readers.test.ts

@@ -0,0 +1,213 @@
+import fs from 'fs';
+import path from 'path';
+
+import {
+  readThemeBreadcrumbSeparator,
+  readThemePageUpSettings,
+  readThemeSocialNetworks,
+  toSafeSocialHref
+} from '../theme-settings-readers';
+import { MAX_INLINE_SVG_LENGTH } from '../svg-image-source';
+
+/** Validated readers for the settings page's storefront keys. */
+
+describe('readThemeBreadcrumbSeparator', () => {
+  it('returns the trimmed separator', () => {
+    expect(readThemeBreadcrumbSeparator({ breadcrumbSeparator: '›' })).toBe(
+      '›'
+    );
+    expect(readThemeBreadcrumbSeparator({ breadcrumbSeparator: ' / ' })).toBe(
+      '/'
+    );
+    // Counted in code points: an emoji is one character.
+    expect(readThemeBreadcrumbSeparator({ breadcrumbSeparator: '👉' })).toBe(
+      '👉'
+    );
+  });
+
+  it('is undefined when unset or unusable', () => {
+    for (const settings of [
+      null,
+      undefined,
+      {},
+      { breadcrumbSeparator: '' },
+      { breadcrumbSeparator: '   ' },
+      { breadcrumbSeparator: 'abcdefghi' },
+      { breadcrumbSeparator: 'a\nb' },
+      { breadcrumbSeparator: 3 }
+    ]) {
+      expect(readThemeBreadcrumbSeparator(settings)).toBeUndefined();
+    }
+  });
+});
+
+describe('toSafeSocialHref', () => {
+  it.each([
+    ['https://instagram.com/lulu', 'https://instagram.com/lulu'],
+    ['  http://lulu.example  ', 'http://lulu.example'],
+    ['mailto:hello@lulu.example', 'mailto:hello@lulu.example'],
+    ['tel:+905550000000', 'tel:+905550000000'],
+    ['/contact', '/contact'],
+    ['instagram.com/lulu', 'https://instagram.com/lulu'],
+    ['www.facebook.com/lulu?ref=x', 'https://www.facebook.com/lulu?ref=x']
+  ])('accepts %j as %j', (value, expected) => {
+    expect(toSafeSocialHref(value)).toBe(expected);
+  });
+
+  it.each([
+    ['javascript:alert(1)'],
+    ['data:text/html,x'],
+    ['//evil.example'],
+    ['/\\evil.example'],
+    ['/\t/evil.example'],
+    ['https://lulu.example/a b'],
+    ['lulu'],
+    ['@lulu'],
+    [''],
+    [42]
+  ])('rejects %j', (value) => {
+    expect(toSafeSocialHref(value)).toBeNull();
+  });
+});
+
+describe('readThemeSocialNetworks', () => {
+  it('lists usable entries in insertion order with safe icon sources', () => {
+    const entries = readThemeSocialNetworks({
+      socialNetworks: {
+        Instagram: { url: 'https://instagram.com/lulu', icon: '<svg/>' },
+        facebook: { url: 'javascript:alert(1)', icon: '' },
+        youtube: { url: 'https://youtube.com/@lulu', icon: 'javascript:x' },
+        'bad key!': { url: 'https://example.com' },
+        tiktok: 'https://tiktok.com/@lulu'
+      }
+    });
+
+    expect(entries).toEqual([
+      {
+        network: 'instagram',
+        href: 'https://instagram.com/lulu',
+        // Given the namespace an <img> needs to draw it.
+        iconSrc: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
+          '<svg xmlns="http://www.w3.org/2000/svg"/>'
+        )}`
+      },
+      { network: 'youtube', href: 'https://youtube.com/@lulu', iconSrc: null }
+    ]);
+  });
+
+  it('is empty for missing or malformed settings', () => {
+    expect(readThemeSocialNetworks(null)).toEqual([]);
+    expect(readThemeSocialNetworks({})).toEqual([]);
+    expect(readThemeSocialNetworks({ socialNetworks: [] })).toEqual([]);
+    expect(readThemeSocialNetworks({ socialNetworks: 'x' })).toEqual([]);
+  });
+});
+
+describe('readThemePageUpSettings', () => {
+  it('keeps only the page-up keys', () => {
+    expect(
+      readThemePageUpSettings({
+        pageUpEnabled: true,
+        pageUpIcon: '<svg/>',
+        icons: { 'up-arrow': '<svg id="u"/>', basket: '<svg id="b"/>' },
+        typography: [{ key: 'body' }],
+        logo: 'https://cdn.example.com/logo.svg'
+      })
+    ).toEqual({
+      pageUpEnabled: true,
+      pageUpIcon: '<svg/>',
+      icons: { 'up-arrow': '<svg id="u"/>' }
+    });
+  });
+
+  it('only an explicit true turns the button on', () => {
+    for (const pageUpEnabled of [false, 'true', 1, undefined, null]) {
+      expect(readThemePageUpSettings({ pageUpEnabled })).toEqual({});
+    }
+    expect(readThemePageUpSettings(null)).toEqual({});
+  });
+
+  it('drops an empty icon', () => {
+    expect(
+      readThemePageUpSettings({
+        pageUpEnabled: true,
+        pageUpIcon: '  ',
+        icons: { 'up-arrow': '' }
+      })
+    ).toEqual({ pageUpEnabled: true });
+  });
+
+  // These props are serialized into every page that mounts ThemeModals,
+  // whatever the button then renders.
+  it('carries no icon at all while the button is off', () => {
+    const icons = { 'up-arrow': '<svg id="u"/>', basket: '<svg id="b"/>' };
+    expect(readThemePageUpSettings({ icons })).toEqual({});
+    expect(
+      readThemePageUpSettings({
+        pageUpEnabled: false,
+        pageUpIcon: '<svg/>',
+        icons
+      })
+    ).toEqual({});
+  });
+
+  it('drops a page-up icon longer than the inline SVG cap', () => {
+    const huge = `<svg>${' '.repeat(MAX_INLINE_SVG_LENGTH)}</svg>`;
+    expect(
+      readThemePageUpSettings({ pageUpEnabled: true, pageUpIcon: huge })
+    ).toEqual({ pageUpEnabled: true });
+  });
+});
+
+/**
+ * `overlays/theme-modals.tsx` is a server component and calls
+ * `readThemePageUpSettings` while rendering. A server module importing a value
+ * from a `'use client'` module receives a client reference instead of the
+ * function, so this module's import graph must stay client-free (same walk as
+ * overlays/__tests__/server-read-path-client-free.test.ts).
+ */
+describe('the readers module on the server', () => {
+  const SRC_ROOT = path.resolve(__dirname, '../..');
+  const EXTENSIONS = ['.ts', '.tsx', '/index.ts', '/index.tsx'];
+
+  const resolveImport = (from: string, specifier: string): string | null => {
+    if (!specifier.startsWith('.')) return null;
+    const base = path.resolve(path.dirname(from), specifier);
+    for (const extension of EXTENSIONS) {
+      const candidate = `${base}${extension}`;
+      if (fs.existsSync(candidate) && fs.statSync(candidate).isFile()) {
+        return candidate;
+      }
+    }
+    return null;
+  };
+
+  it('reaches no "use client" module', () => {
+    const queue = [path.join(SRC_ROOT, 'utils/theme-settings-readers.ts')];
+    const visited = new Map<string, string>();
+
+    while (queue.length > 0) {
+      const file = queue.shift() as string;
+      if (visited.has(file)) continue;
+      const source = fs.readFileSync(file, 'utf8');
+      visited.set(file, source);
+
+      for (const match of Array.from(
+        source.matchAll(/(?:from|import)\s*['"]([^'"]+)['"]/g)
+      )) {
+        const start = source.lastIndexOf('import', match.index ?? 0);
+        if (/^import\s+type\b/.test(source.slice(start, match.index))) continue;
+        const resolved = resolveImport(file, match[1]);
+        if (resolved) queue.push(resolved);
+      }
+    }
+
+    const clientModules = Array.from(visited.entries())
+      .filter(([, source]) => /^\s*(['"])use client\1/.test(source))
+      .map(([file]) => path.relative(SRC_ROOT, file));
+
+    expect(clientModules).toEqual([]);
+    // The walk really did follow the imports.
+    expect(visited.size).toBeGreaterThan(1);
+  });
+});

package/src/utils/__tests__/theme-settings-resolver.test.ts

@@ -0,0 +1,232 @@
+/**
+ * @jest-environment node
+ */
+import { resolveThemeCssVariables, resolveThemeStyleObject } from '..';
+
+/**
+ * `var(--theme-link)`, `var(--theme-custom-<id>)` and the new
+ * typography metric variables inside a block's style values are resolved from
+ * the settings on the SERVER (no document to read a computed value from), so
+ * the first paint already carries the theme value — and from the same
+ * validated values the `:root` rule emits, so the two never disagree.
+ */
+
+const managed = (key: string, extra: Record<string, unknown> = {}) => ({
+  key,
+  fontFamily: 'Jost',
+  fontWeight: '400',
+  fontSize: 14,
+  lineHeight: 22,
+  letterSpacing: 0,
+  textTransform: 'none',
+  color: '#111111',
+  styles: [],
+  ...extra
+});
+
+const SETTINGS = {
+  primaryColor: '#000000',
+  linkColor: '#4482FF',
+  headingColor: '#111111',
+  textColor: '#555555',
+  footerBackgroundColor: '#F4F4F4',
+  borderColor: '#E2E2E2',
+  customColors: [
+    { id: 'custom-2', name: 'Kampanya', value: '#B0272C' },
+    { id: 'custom-lx9k2a', name: 'Yeni', value: '#ABCDEF' }
+  ],
+  typography: [
+    managed('body', { letterSpacing: 0.5, textTransform: 'uppercase' }),
+    // Saved by the old settings page: no lineHeight, so not managed.
+    {
+      key: 'heading01',
+      fontFamily: 'Jost',
+      fontWeight: '500',
+      fontSize: 34,
+      color: '#FFF',
+      styles: []
+    }
+  ]
+};
+
+it('runs without a document, like the server', () => {
+  expect(typeof window).toBe('undefined');
+});
+
+describe('the new colour variables', () => {
+  it.each([
+    ['--theme-link', '#4482FF'],
+    ['--theme-heading', '#111111'],
+    ['--theme-text', '#555555'],
+    ['--theme-footer-background', '#F4F4F4'],
+    ['--theme-border', '#E2E2E2']
+  ])('resolve %s from its role', (name, value) => {
+    expect(resolveThemeCssVariables(`var(${name})`, SETTINGS)).toBe(value);
+    expect(resolveThemeCssVariables(`var(${name}, #000000)`, SETTINGS)).toBe(
+      value
+    );
+  });
+
+  it('resolve custom colours by id, and fall back once one is removed', () => {
+    expect(
+      resolveThemeCssVariables('var(--theme-custom-2, #000)', SETTINGS)
+    ).toBe('#B0272C');
+    expect(
+      resolveThemeCssVariables('var(--theme-custom-lx9k2a)', SETTINGS)
+    ).toBe('#ABCDEF');
+    expect(
+      resolveThemeCssVariables('var(--theme-custom-3, #AABBCC)', SETTINGS)
+    ).toBe('#AABBCC');
+    expect(resolveThemeCssVariables('var(--theme-custom-3)', SETTINGS)).toBe(
+      'var(--theme-custom-3)'
+    );
+  });
+
+  it('fall back while the role is unset', () => {
+    expect(resolveThemeCssVariables('var(--theme-link, #111111)', {})).toBe(
+      '#111111'
+    );
+    expect(resolveThemeCssVariables('var(--theme-link, #111111)', null)).toBe(
+      '#111111'
+    );
+    expect(resolveThemeCssVariables('var(--theme-link)', undefined)).toBe(
+      'var(--theme-link)'
+    );
+  });
+
+  it('never inline an invalid stored value', () => {
+    expect(
+      resolveThemeCssVariables('var(--theme-link, #111111)', {
+        linkColor: 'red'
+      })
+    ).toBe('#111111');
+    expect(
+      resolveThemeCssVariables('var(--theme-text)', {
+        textColor: '#fff;background:url(//evil)'
+      })
+    ).toBe('var(--theme-text)');
+    expect(
+      resolveThemeCssVariables('var(--theme-custom-1, #000)', {
+        customColors: [{ id: 'custom-1', value: 'url(//evil)' }]
+      })
+    ).toBe('#000');
+  });
+
+  it('ignore hiddenColors: a stored value still resolves', () => {
+    expect(
+      resolveThemeCssVariables('var(--theme-link, #000)', {
+        linkColor: '#4482FF',
+        hiddenColors: ['linkColor']
+      })
+    ).toBe('#4482FF');
+  });
+
+  it('leave the five existing colours exactly as they were', () => {
+    // Still a raw lookup, with no validation, as before the theme settings redesign.
+    expect(
+      resolveThemeCssVariables('var(--theme-primary)', { primaryColor: 'red' })
+    ).toBe('red');
+    expect(resolveThemeCssVariables('var(--theme-primary)', SETTINGS)).toBe(
+      '#000000'
+    );
+  });
+
+  it('do not confuse --theme-text with --theme-text-transform-<key>', () => {
+    expect(
+      resolveThemeCssVariables('var(--theme-text-transform-body)', SETTINGS)
+    ).toBe('uppercase');
+    expect(resolveThemeCssVariables('var(--theme-text)', SETTINGS)).toBe(
+      '#555555'
+    );
+  });
+});
+
+describe('the typography metric variables', () => {
+  it('resolve for a managed variant', () => {
+    expect(
+      resolveThemeCssVariables('var(--theme-font-size-body)', SETTINGS)
+    ).toBe('14px');
+    expect(
+      resolveThemeCssVariables('var(--theme-font-weight-body)', SETTINGS)
+    ).toBe('400');
+    expect(
+      resolveThemeCssVariables('var(--theme-line-height-body)', SETTINGS)
+    ).toBe('22px');
+    expect(
+      resolveThemeCssVariables('var(--theme-letter-spacing-body)', SETTINGS)
+    ).toBe('0.5px');
+  });
+
+  it('honour the managed gate: a variant without lineHeight publishes none', () => {
+    expect(
+      resolveThemeCssVariables(
+        'var(--theme-font-size-heading01, 32px)',
+        SETTINGS
+      )
+    ).toBe('32px');
+    expect(
+      resolveThemeCssVariables('var(--theme-font-weight-heading01)', SETTINGS)
+    ).toBe('var(--theme-font-weight-heading01)');
+    // Its family variable is unaffected.
+    expect(
+      resolveThemeCssVariables('var(--theme-font-heading01)', SETTINGS)
+    ).toBe('Jost');
+  });
+
+  it('are resolved before the family variables that share their prefix', () => {
+    const settings = {
+      typography: [
+        managed('body', { fontSize: 15 }),
+        // A hand-edited key that collides with the body's size variable.
+        { key: 'size-body', fontFamily: 'Collision', fontWeight: '400' },
+        { key: 'size-x', fontFamily: 'Collision', fontWeight: '400' }
+      ]
+    };
+    expect(
+      resolveThemeCssVariables('var(--theme-font-size-body)', settings)
+    ).toBe('15px');
+    // Without a managed `x`, the family of `size-x` is still not an answer.
+    expect(
+      resolveThemeCssVariables('var(--theme-font-size-x, 16px)', settings)
+    ).toBe('16px');
+    expect(resolveThemeCssVariables('var(--theme-font-body)', settings)).toBe(
+      'Jost'
+    );
+  });
+
+  it('resolve inside a whole style object', () => {
+    expect(
+      resolveThemeStyleObject(
+        {
+          color: 'var(--theme-heading, #000)',
+          fontSize: 'var(--theme-font-size-body)',
+          border: '1px solid var(--theme-border)'
+        },
+        SETTINGS
+      )
+    ).toEqual({
+      color: '#111111',
+      fontSize: '14px',
+      border: '1px solid #E2E2E2'
+    });
+  });
+});
+
+describe('a nested var() fallback', () => {
+  // Pinned, not endorsed: CSS_VAR_REGEX stops the fallback at the first `)`,
+  // which is why the theme settings forbid nested fallbacks in any default (the
+  // editor writes single-level `var(--theme-link, #111111)` only).
+  it('is mangled the way it always was', () => {
+    expect(
+      resolveThemeCssVariables(
+        'var(--theme-border, var(--theme-color3))',
+        SETTINGS
+      )
+    ).toBe('#E2E2E2)');
+    expect(
+      resolveThemeCssVariables('var(--theme-border, var(--theme-color3))', {
+        color3: '#1F2937'
+      })
+    ).toBe('var(--theme-color3)');
+  });
+});

package/src/utils/index.ts

@@ -43,6 +43,30 @@ import {
   buildLineBreakCss,
   compositionUsesScopedLineBreaks
 } from './line-breaks';
+// Validated readers for the redesigned theme settings keys.
+import {
+  isThemeTypographyMetricVariable,
+  resolveThemeSettingsVariable
+} from './theme-settings-css';
+
+// The readers blocks and brands need; the builders stay internal
+// to the placeholder wrapper.
+export {
+  THEME_COLOR_ROLE_VARIABLES,
+  THEME_CUSTOM_COLOR_ID,
+  collectThemeRootVariables,
+  hasThemeTextDefaults,
+  isThemeHexColor,
+  readManagedTypography,
+  readThemeCustomColors,
+  readThemeRoleColor,
+  resolveThemeSettingsVariable
+} from './theme-settings-css';
+export type {
+  ManagedTypographyVariant,
+  ThemeColorRoleKey,
+  ThemeCustomColorValue
+} from './theme-settings-css';
 
 export * from './publish-window';
 export * from './part-styles';
@@ -278,12 +302,23 @@ export const resolveThemeCssVariables = (
       const themeColor = mappedKey
         ? (themeSettings?.[mappedKey] as string | undefined)
         : undefined;
-      const themeFont = resolveThemeFontVariable(variableName, themeSettings);
+      // The new colour roles, custom colours and typography
+      // metrics, from the same validated values the :root rule emits. Ahead
+      // of the family lookup, which shares the `--theme-font-` prefix and
+      // must never read `--theme-font-size-body` as a variant `size-body`.
+      const themeSetting = resolveThemeSettingsVariable(
+        variableName,
+        themeSettings
+      );
+      const themeFont = isThemeTypographyMetricVariable(variableName)
+        ? undefined
+        : resolveThemeFontVariable(variableName, themeSettings);
       const computedValue = getComputedCssVariable(variableName);
       const fallback = fallbackValue ? stripQuotes(fallbackValue) : undefined;
 
       return (
         themeColor ||
+        themeSetting ||
         themeFont ||
         computedValue ||
         fallback ||

package/src/utils/svg-image-source.ts

@@ -0,0 +1,84 @@
+import { isInlineSvgMarkup } from '../blocks/icon-source';
+
+/**
+ * Turns an icon value from theme settings into something an `<img src>` can
+ * carry safely, or `null` when it cannot.
+ *
+ * Theme settings are shared data: they arrive from the editor's settings
+ * page, but also from a theme package imported as JSON and from direct API
+ * writes, so nothing guarantees the SVG markup a brand "uploaded" is only a
+ * drawing. pz-theme has no SVG sanitizer (and takes no dependency for one), so
+ * new surfaces never inject settings markup as HTML. Instead the markup is
+ * wrapped in a `data:image/svg+xml` URI: an SVG loaded as an image runs no
+ * script, fires no handler and fetches no external resource, whatever it
+ * contains.
+ *
+ * URLs are accepted only in the shapes an image can legitimately have:
+ * `https:`/`http:`, a root-relative path the app serves itself (never `//host`,
+ * which is another site), and `data:image/*`. Anything else (`javascript:`,
+ * `vbscript:`, a bare word) yields `null` so the caller draws its own default.
+ */
+
+/**
+ * Larger markup is ignored rather than inlined into every page that renders
+ * the icon. The editor caps uploads at 32 KB; UTF-16 length never exceeds the
+ * UTF-8 byte count, so anything the editor accepted passes here.
+ */
+export const MAX_INLINE_SVG_LENGTH = 32 * 1024;
+
+/**
+ * Browsers strip tabs and newlines from URLs, so `/\t/evil.example` would be
+ * read as the protocol-relative `//evil.example`.
+ */
+const CONTROL_CHARACTER = /[\u0000-\u001F\u007F]/;
+
+const DATA_IMAGE_URI = /^data:image\/[a-z0-9.+-]+[;,]/i;
+const HTTP_URL = /^https?:\/\/[^\s/?#]+/i;
+// A backslash counts as a slash in special-scheme URLs, so `/\host` is a host.
+const ROOT_RELATIVE_PATH = /^\/(?![/\\])/;
+
+const toSafeUrl = (value: string): string | null => {
+  if (CONTROL_CHARACTER.test(value)) return null;
+  if (DATA_IMAGE_URI.test(value)) return value;
+  if (/\s/.test(value)) return null;
+  if (HTTP_URL.test(value) || ROOT_RELATIVE_PATH.test(value)) return value;
+  return null;
+};
+
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+/** The first `<svg …>` tag: the root, after any XML declaration. */
+const SVG_ROOT_TAG = /<svg(?=[\s/>])([^>]*)>/i;
+const DEFAULT_NAMESPACE_ATTRIBUTE = /\sxmlns\s*=/i;
+
+/**
+ * An SVG document loaded as an image draws nothing when its root lacks the
+ * SVG namespace, which markup copied from a web page often does: inline in
+ * HTML (where the editor previews it) the parser supplies it, an `<img>`
+ * does not.
+ */
+const withSvgNamespace = (markup: string): string =>
+  markup.replace(SVG_ROOT_TAG, (tag, attributes: string) =>
+    DEFAULT_NAMESPACE_ATTRIBUTE.test(attributes)
+      ? tag
+      : `<svg xmlns="${SVG_NAMESPACE}"${attributes}>`
+  );
+
+export const toSafeImageSource = (value: unknown): string | null => {
+  if (typeof value !== 'string') return null;
+
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+
+  // Before the markup check: a `data:image/svg+xml;utf8,<svg …>` URI contains
+  // `<svg` too, and is already in the shape the caller needs.
+  if (/^data:/i.test(trimmed)) return toSafeUrl(trimmed);
+
+  if (isInlineSvgMarkup(trimmed)) {
+    if (trimmed.length > MAX_INLINE_SVG_LENGTH) return null;
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
+      withSvgNamespace(trimmed)
+    )}`;
+  }
+
+  return toSafeUrl(trimmed);
+};