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

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

@@ -0,0 +1,801 @@
+import {
+  buildThemeElementDefaultsCss,
+  buildThemeRoleVariablesCss,
+  collectThemeRootVariables,
+  hasAuthoredRootStyle,
+  hasThemeTextDefaults,
+  isThemeHexColor,
+  isThemeTypographyMetricVariable,
+  readManagedTypography,
+  readThemeCustomColors,
+  readThemeRoleColor,
+  syncThemeRootVariables,
+  themeOwnPartStyleAttributes,
+  themeOwnStyleAttributes,
+  THEME_OWN_COLOR_STYLE_KEYS,
+  THEME_OWN_TYPE_STYLE_KEYS
+} from '../theme-settings-css';
+
+/**
+ * The redesigned Web Theme Settings publish five colour roles,
+ * custom colours and managed typography to the storefront. Everything here is
+ * emitted ONLY for keys that are explicitly set and valid: a theme saved by
+ * the old settings page must produce not a single new byte.
+ */
+
+/** What the old settings page saved: the seed variants plus five colours. */
+const LEGACY = {
+  primaryColor: '#000000',
+  secondaryColor: '#E95151',
+  color3: '#1F2937',
+  color4: '#CBCBCB',
+  backgroundColor: '#FFFFFF',
+  typography: [
+    {
+      key: 'heading01',
+      fontFamily: 'Jost',
+      fontWeight: '500',
+      fontSize: 34,
+      color: '#FFF',
+      styles: []
+    },
+    {
+      key: 'heading02',
+      fontFamily: 'Jost',
+      fontWeight: '500',
+      fontSize: 34,
+      color: '#FFF',
+      styles: []
+    },
+    {
+      key: 'subheading',
+      fontFamily: 'Jost',
+      fontWeight: '600',
+      fontSize: 22,
+      color: '#FFF',
+      styles: []
+    },
+    {
+      key: 'body',
+      fontFamily: 'Jost',
+      fontWeight: '400',
+      fontSize: 12,
+      color: '#FFF',
+      styles: []
+    }
+  ]
+};
+
+/** A variant as the new typography screen writes it: all six fields. */
+const managed = (key: string, extra: Record<string, unknown> = {}) => ({
+  key,
+  fontFamily: 'Jost',
+  fontWeight: '600',
+  fontSize: 32,
+  lineHeight: 40,
+  letterSpacing: 0,
+  textTransform: 'none',
+  color: '#111111',
+  styles: [],
+  ...extra
+});
+
+const R = ':where(.theme-placeholder [data-pz-rich-text])';
+// Every exclusion sits inside :where(), so each element rule stays (0,0,1).
+const XC =
+  ':not(:where([data-pz-own-color] *,[data-pz-rich-text] :is([style^="color"],[style*=";color"],[style*="; color"],font[color]) *))';
+const XT =
+  ':not(:where([data-pz-own-type] *,[data-pz-rich-text] :is([style*="font-size"],[style*="font-family"],[style*="font-weight"],[style*="font:"],[style*="line-height"],[style*="letter-spacing"],[style*="text-transform"],font[size],font[face]) *))';
+const NOT_IN_HEADING = ':not(:where(:is(h1,h2,h3,h4,h5,h6) *))';
+
+describe('a theme that never used the new settings', () => {
+  it.each([
+    ['null', null],
+    ['undefined', undefined],
+    ['empty', {}],
+    ['legacy', LEGACY]
+  ])('emits nothing for %s settings', (_label, settings) => {
+    expect(buildThemeRoleVariablesCss(settings)).toBe('');
+    expect(buildThemeElementDefaultsCss(settings)).toBe('');
+    expect(collectThemeRootVariables(settings)).toEqual([]);
+    expect(hasThemeTextDefaults(settings)).toBe(false);
+  });
+
+  it('treats a legacy variant without lineHeight as unmanaged', () => {
+    expect(readManagedTypography(LEGACY)).toEqual([]);
+    // Empty-ish line heights do not opt a variant in either.
+    const settings = {
+      typography: [
+        managed('heading01', { lineHeight: undefined }),
+        managed('heading02', { lineHeight: null }),
+        managed('body', { lineHeight: '' }),
+        managed('link', { lineHeight: 'tall' }),
+        managed('caption', { lineHeight: Number.NaN })
+      ]
+    };
+    expect(readManagedTypography(settings)).toEqual([]);
+    expect(buildThemeRoleVariablesCss(settings)).toBe('');
+    expect(buildThemeElementDefaultsCss(settings)).toBe('');
+  });
+});
+
+describe('colour roles', () => {
+  const ROLES = {
+    linkColor: '#4482FF',
+    headingColor: '#111111',
+    textColor: '#555555',
+    footerBackgroundColor: '#F4F4F4',
+    borderColor: '#E2E2E2'
+  };
+
+  it('publish each set role as its variable, in role order', () => {
+    expect(buildThemeRoleVariablesCss(ROLES)).toBe(
+      ':root{--theme-link:#4482FF;--theme-heading:#111111;--theme-text:#555555;--theme-footer-background:#F4F4F4;--theme-border:#E2E2E2}'
+    );
+    expect(buildThemeRoleVariablesCss({ linkColor: ' #abc ' })).toBe(
+      ':root{--theme-link:#abc}'
+    );
+  });
+
+  it('emit one element rule per set role, and only that one', () => {
+    expect(buildThemeElementDefaultsCss(ROLES)).toBe(
+      [
+        `${R}${XC},${R} :is(p,li)${XC}{color:var(--theme-text)}`,
+        `${R} :is(h1,h2,h3,h4,h5,h6)${XC}{color:var(--theme-heading)}`,
+        `${R} a${XC}{color:var(--theme-link)}`,
+        `${R} hr{border-color:var(--theme-border)}`,
+        ':where(.theme-placeholder[data-placeholder="footer"]){background-color:var(--theme-footer-background)}'
+      ].join('')
+    );
+    expect(buildThemeElementDefaultsCss({ linkColor: '#4482FF' })).toBe(
+      `${R} a${XC}{color:var(--theme-link)}`
+    );
+    expect(
+      buildThemeElementDefaultsCss({ footerBackgroundColor: '#F4F4F4' })
+    ).toBe(
+      ':where(.theme-placeholder[data-placeholder="footer"]){background-color:var(--theme-footer-background)}'
+    );
+  });
+
+  it.each([
+    ['a rule breakout', '#fff}a{x:y}'],
+    ['a named colour', 'red'],
+    ['an rgb() colour', 'rgb(0, 0, 0)'],
+    ['a five-digit hex', '#12345'],
+    ['a hex without #', '111111'],
+    ['a style tag breakout', '</style><script>alert(1)</script>'],
+    ['a number', 0x111111]
+  ])('drop %s', (_label, value) => {
+    const settings = { linkColor: value, textColor: value };
+    expect(readThemeRoleColor(settings, 'linkColor')).toBeUndefined();
+    expect(buildThemeRoleVariablesCss(settings)).toBe('');
+    expect(buildThemeElementDefaultsCss(settings)).toBe('');
+  });
+
+  it('ignore hiddenColors: value presence is the only truth', () => {
+    expect(
+      buildThemeRoleVariablesCss({
+        linkColor: '#4482FF',
+        hiddenColors: ['linkColor']
+      })
+    ).toBe(':root{--theme-link:#4482FF}');
+  });
+
+  it('accept the four hex lengths and nothing else', () => {
+    ['#abc', '#abcd', '#AABBCC', '#AABBCCDD'].forEach((value) =>
+      expect(isThemeHexColor(value)).toBe(true)
+    );
+    ['#ab', '#abcde', '#abcdefa', '#GGGGGG', '', null].forEach((value) =>
+      expect(isThemeHexColor(value)).toBe(false)
+    );
+  });
+});
+
+describe('custom colours', () => {
+  it('publish --theme-<id> for every valid entry', () => {
+    const settings = {
+      customColors: [
+        { id: 'custom-1', name: 'Kampanya', value: '#B0272C' },
+        { id: 'custom-lx9k2a', name: 'Yeni', value: '#4482FF' }
+      ]
+    };
+    expect(buildThemeRoleVariablesCss(settings)).toBe(
+      ':root{--theme-custom-1:#B0272C;--theme-custom-lx9k2a:#4482FF}'
+    );
+    // Variables only: no element default for a custom colour.
+    expect(buildThemeElementDefaultsCss(settings)).toBe('');
+  });
+
+  it('drop bad ids and values, and keep the first entry of a duplicate id', () => {
+    const settings = {
+      customColors: [
+        { id: 'custom-1', value: '#111111' },
+        { id: 'custom-1', value: '#222222' },
+        { id: 'custom_2', value: '#333333' },
+        { id: 'Custom-3', value: '#444444' },
+        { id: 'custom-4;x', value: '#555555' },
+        { id: 'custom-', value: '#666666' },
+        { id: 'link', value: '#777777' },
+        { id: 'custom-5', value: 'red' },
+        { id: 'custom-6', value: '#fff}a{x:y}' },
+        null,
+        'custom-7'
+      ]
+    };
+    expect(readThemeCustomColors(settings)).toEqual([
+      { id: 'custom-1', value: '#111111' }
+    ]);
+    expect(buildThemeRoleVariablesCss(settings)).toBe(
+      ':root{--theme-custom-1:#111111}'
+    );
+    expect(readThemeCustomColors({ customColors: 'nope' })).toEqual([]);
+  });
+});
+
+describe('managed typography', () => {
+  it('publishes the five metric variables of a managed variant', () => {
+    expect(
+      collectThemeRootVariables({
+        typography: [
+          managed('button', {
+            fontSize: 14,
+            lineHeight: 20,
+            letterSpacing: 0.5,
+            textTransform: 'uppercase'
+          })
+        ]
+      })
+    ).toEqual([
+      ['--theme-font-size-button', '14px'],
+      ['--theme-font-weight-button', '600'],
+      ['--theme-line-height-button', '20px'],
+      ['--theme-letter-spacing-button', '0.5px'],
+      ['--theme-text-transform-button', 'uppercase']
+    ]);
+  });
+
+  it('styles h1–h4, p (and the rich-text root) and a, never button/menu/caption/custom', () => {
+    const settings = {
+      typography: [
+        managed('heading01'),
+        managed('body', {
+          fontWeight: '400',
+          fontSize: 14,
+          lineHeight: 22
+        }),
+        managed('button'),
+        managed('menu'),
+        managed('caption'),
+        managed('custom-lx1', { custom: true })
+      ]
+    };
+    const all =
+      'font-family:"Jost";font-size:var(--theme-font-size-K);font-weight:var(--theme-font-weight-K);line-height:var(--theme-line-height-K);letter-spacing:var(--theme-letter-spacing-K);text-transform:var(--theme-text-transform-K)';
+    expect(buildThemeElementDefaultsCss(settings)).toBe(
+      [
+        `${R} h1${XT}{${all.replace(/K\)/g, 'heading01)')}}`,
+        `${R}${XT},${R} p${XT}{${all.replace(/K\)/g, 'body)')}}`
+      ].join('')
+    );
+    expect(hasThemeTextDefaults(settings)).toBe(true);
+    expect(
+      hasThemeTextDefaults({
+        typography: [managed('button'), managed('custom-lx1')]
+      })
+    ).toBe(false);
+  });
+
+  it('maps every built-in key to its element', () => {
+    const css = buildThemeElementDefaultsCss({
+      typography: [
+        'heading01',
+        'heading02',
+        'subheading',
+        'heading04',
+        'link'
+      ].map((key) => managed(key))
+    });
+    [
+      ['h1', 'heading01'],
+      ['h2', 'heading02'],
+      ['h3', 'subheading'],
+      ['h4', 'heading04'],
+      // A link inside a heading keeps the heading's size.
+      [`a${NOT_IN_HEADING}`, 'link']
+    ].forEach(([element, key]) =>
+      expect(css).toContain(
+        `${R} ${element}${XT}{font-family:"Jost";font-size:var(--theme-font-size-${key});`
+      )
+    );
+  });
+
+  it('quotes the family, so a name such as "Source Sans 3" stays a valid declaration', () => {
+    const familyOf = (fontFamily: string) =>
+      buildThemeElementDefaultsCss({
+        typography: [managed('heading01', { fontFamily })]
+      }).match(/font-family:([^;]*);/)?.[1];
+
+    expect(familyOf('Source Sans 3')).toBe('"Source Sans 3"');
+    expect(familyOf('Press Start 2P')).toBe('"Press Start 2P"');
+    expect(familyOf("'Exo 2'")).toBe('"Exo 2"');
+    // A stack keeps its generic family a keyword.
+    expect(familyOf('Roboto, sans-serif')).toBe('"Roboto",sans-serif');
+    expect(familyOf('"Baloo 2", Serif')).toBe('"Baloo 2",serif');
+    expect(familyOf('"",')).toBeUndefined();
+  });
+
+  it('normalises numbers from numbers and numeric strings', () => {
+    const [variant] = readManagedTypography({
+      typography: [
+        managed('body', {
+          fontSize: '32px',
+          lineHeight: ' 40 ',
+          letterSpacing: '-0.2px'
+        })
+      ]
+    });
+    expect(variant).toMatchObject({
+      size: 32,
+      lineHeight: 40,
+      letterSpacing: -0.2
+    });
+    expect(
+      collectThemeRootVariables({
+        typography: [managed('body', { letterSpacing: 0.1 + 0.2 })]
+      })
+    ).toContainEqual(['--theme-letter-spacing-body', '0.3px']);
+  });
+
+  it('clamps sizes to 1..400 and letter spacing to -50..50', () => {
+    const [variant] = readManagedTypography({
+      typography: [
+        managed('body', { fontSize: 1000, lineHeight: 0, letterSpacing: -80 })
+      ]
+    });
+    expect(variant).toMatchObject({
+      size: 400,
+      lineHeight: 1,
+      letterSpacing: -50
+    });
+  });
+
+  it('drops invalid fields one by one and keeps the rest', () => {
+    const settings = {
+      typography: [
+        managed('body', {
+          fontFamily: 'Evil;}*{color:red',
+          fontWeight: '650',
+          fontSize: Number.NaN,
+          letterSpacing: '1em',
+          textTransform: 'capitalize'
+        })
+      ]
+    };
+    expect(collectThemeRootVariables(settings)).toEqual([
+      ['--theme-line-height-body', '40px']
+    ]);
+    // No family declaration for a family that could end the declaration.
+    expect(buildThemeElementDefaultsCss(settings)).toBe(
+      `${R}${XT},${R} p${XT}{line-height:var(--theme-line-height-body)}`
+    );
+  });
+
+  it('accepts a numeric weight and skips the family declaration when none resolves', () => {
+    const settings = {
+      typography: [
+        managed('heading02', { fontWeight: 700, fontFamily: 'inherit' })
+      ]
+    };
+    expect(collectThemeRootVariables(settings)).toContainEqual([
+      '--theme-font-weight-heading02',
+      '700'
+    ]);
+    expect(buildThemeElementDefaultsCss(settings)).not.toContain(
+      'font-family:'
+    );
+  });
+
+  it('drops a bad variant key and keeps the first of a duplicate key', () => {
+    const settings = {
+      typography: [
+        managed('body;}*{', {}),
+        managed('body', { fontSize: 14 }),
+        managed('body', { fontSize: 99 })
+      ]
+    };
+    expect(readManagedTypography(settings).map((v) => [v.key, v.size])).toEqual(
+      [['body', 14]]
+    );
+  });
+
+  it('only counts variables with the metric prefixes as metrics', () => {
+    expect(isThemeTypographyMetricVariable('--theme-font-size-body')).toBe(
+      true
+    );
+    expect(isThemeTypographyMetricVariable('--theme-text-transform-x')).toBe(
+      true
+    );
+    expect(isThemeTypographyMetricVariable('--theme-font-body')).toBe(false);
+    expect(isThemeTypographyMetricVariable('--theme-text')).toBe(false);
+  });
+});
+
+describe('the style tag', () => {
+  it('cannot be broken out of through any new key', () => {
+    const evil = '</style><script>alert(1)</script>';
+    const settings = {
+      linkColor: evil,
+      customColors: [{ id: 'custom-1', value: evil }],
+      typography: [
+        managed('body', {
+          fontFamily: evil,
+          fontWeight: evil,
+          textTransform: evil,
+          fontSize: evil
+        }),
+        managed(evil)
+      ]
+    };
+    const css =
+      buildThemeRoleVariablesCss(settings) +
+      buildThemeElementDefaultsCss(settings);
+    expect(css).not.toMatch(/<\/style/i);
+    expect(css).not.toContain('<script');
+  });
+});
+
+describe('the text-default gate', () => {
+  it('opens for text, heading, link and border colours only', () => {
+    expect(hasThemeTextDefaults({ textColor: '#555555' })).toBe(true);
+    expect(hasThemeTextDefaults({ headingColor: '#111111' })).toBe(true);
+    expect(hasThemeTextDefaults({ linkColor: '#111111' })).toBe(true);
+    expect(hasThemeTextDefaults({ borderColor: '#E2E2E2' })).toBe(true);
+    expect(hasThemeTextDefaults({ footerBackgroundColor: '#F4F4F4' })).toBe(
+      false
+    );
+    expect(
+      hasThemeTextDefaults({
+        customColors: [{ id: 'custom-1', value: '#111111' }]
+      })
+    ).toBe(false);
+    expect(hasThemeTextDefaults({ textColor: 'red' })).toBe(false);
+  });
+});
+
+describe('authored root styles', () => {
+  it('count a root colour at any breakpoint', () => {
+    expect(hasAuthoredRootStyle({ color: { mobile: '#fff' } }, ['color'])).toBe(
+      true
+    );
+    expect(hasAuthoredRootStyle({ color: '#fff' }, ['color'])).toBe(true);
+    expect(
+      hasAuthoredRootStyle({ color: 'var(--theme-primary)' }, ['color'])
+    ).toBe(true);
+  });
+
+  it('ignore empty values and part keys', () => {
+    expect(hasAuthoredRootStyle({ color: '' }, ['color'])).toBe(false);
+    expect(hasAuthoredRootStyle({ color: { desktop: '' } }, ['color'])).toBe(
+      false
+    );
+    expect(hasAuthoredRootStyle({ color: null }, ['color'])).toBe(false);
+    expect(hasAuthoredRootStyle({ 'label/color': '#fff' }, ['color'])).toBe(
+      false
+    );
+    expect(
+      hasAuthoredRootStyle({ 'background-color': '#000' }, ['color'])
+    ).toBe(false);
+    expect(hasAuthoredRootStyle({ ':scrolled/color': '' }, ['color'])).toBe(
+      false
+    );
+    expect(hasAuthoredRootStyle(undefined, ['color'])).toBe(false);
+  });
+
+  it('count a root-state colour or typography: the state rule paints the element', () => {
+    // A header band that only turns white once scrolled, a group that only
+    // recolours on hover: the rich text inside has to keep inheriting it.
+    expect(
+      hasAuthoredRootStyle({ ':scrolled/color': { desktop: '#ffffff' } }, [
+        'color'
+      ])
+    ).toBe(true);
+    expect(hasAuthoredRootStyle({ ':hover/color': '#fff' }, ['color'])).toBe(
+      true
+    );
+    expect(
+      hasAuthoredRootStyle(
+        { ':hover/font-weight': { desktop: '700' } },
+        THEME_OWN_TYPE_STYLE_KEYS
+      )
+    ).toBe(true);
+    expect(
+      themeOwnStyleAttributes(
+        { ':scrolled/color': { desktop: '#ffffff' } },
+        { textColor: '#C8C8C8' }
+      )
+    ).toEqual({ 'data-pz-own-color': '' });
+  });
+
+  it('take colour or typography the caller paints itself', () => {
+    const owned = { color: true, type: true };
+    expect(
+      themeOwnStyleAttributes(null, { textColor: '#C8C8C8' }, owned)
+    ).toEqual({ 'data-pz-own-color': '', 'data-pz-own-type': '' });
+    expect(
+      themeOwnStyleAttributes({}, { textColor: '#C8C8C8' }, { type: true })
+    ).toEqual({ 'data-pz-own-type': '' });
+    // Still nothing on a theme without text defaults.
+    expect(themeOwnStyleAttributes(null, LEGACY, owned)).toBeNull();
+  });
+
+  it('count every typography property, kebab or camel case', () => {
+    THEME_OWN_TYPE_STYLE_KEYS.forEach((key) =>
+      expect(
+        hasAuthoredRootStyle(
+          { [key]: { desktop: '1' } },
+          THEME_OWN_TYPE_STYLE_KEYS
+        )
+      ).toBe(true)
+    );
+    expect(
+      hasAuthoredRootStyle(
+        { fontSize: { desktop: 18 } },
+        THEME_OWN_TYPE_STYLE_KEYS
+      )
+    ).toBe(true);
+    expect(
+      hasAuthoredRootStyle({ 'font-size': '18px' }, THEME_OWN_COLOR_STYLE_KEYS)
+    ).toBe(false);
+  });
+
+  it('become markers only while the theme has text defaults', () => {
+    const styles = { color: '#fff', 'font-size': '18px' };
+    expect(themeOwnStyleAttributes(styles, LEGACY)).toBeNull();
+    expect(themeOwnStyleAttributes(styles, null)).toBeNull();
+    expect(themeOwnStyleAttributes(styles, { linkColor: '#111111' })).toEqual({
+      'data-pz-own-color': '',
+      'data-pz-own-type': ''
+    });
+    expect(
+      themeOwnStyleAttributes({ color: '#fff' }, { linkColor: '#111111' })
+    ).toEqual({ 'data-pz-own-color': '' });
+    expect(
+      themeOwnStyleAttributes({ padding: '8px' }, { linkColor: '#111111' })
+    ).toBeNull();
+  });
+});
+
+describe('authored part styles', () => {
+  const settings = { textColor: '#C8C8C8' };
+
+  it('mark a part whose colour or typography is authored, at rest or in a state', () => {
+    expect(
+      themeOwnPartStyleAttributes(
+        { 'header/color': { desktop: '#ff0000' } },
+        'header',
+        settings
+      )
+    ).toEqual({ 'data-pz-own-color': '' });
+    expect(
+      themeOwnPartStyleAttributes(
+        { 'header/open/color': { desktop: '#ff0000' } },
+        'header',
+        settings
+      )
+    ).toEqual({ 'data-pz-own-color': '' });
+    expect(
+      themeOwnPartStyleAttributes(
+        { 'content/font-size': { desktop: '18px' }, 'content/color': '#111' },
+        'content',
+        settings
+      )
+    ).toEqual({ 'data-pz-own-color': '', 'data-pz-own-type': '' });
+  });
+
+  it('ignore the root, other parts, other properties and themes without text defaults', () => {
+    const styles = {
+      color: '#000',
+      'panel/color': '#111',
+      'header/background-color': '#222',
+      ':hover/color': '#333'
+    };
+    expect(themeOwnPartStyleAttributes(styles, 'header', settings)).toBeNull();
+    expect(
+      themeOwnPartStyleAttributes({ 'header/color': '#111' }, 'header', LEGACY)
+    ).toBeNull();
+    expect(
+      themeOwnPartStyleAttributes(undefined, 'header', settings)
+    ).toBeNull();
+  });
+});
+
+/**
+ * The editor's rich-text colour tool (applyForeColor) wraps the selection in
+ * a span whose `style.color` it sets, so paragraphs, headings and links end
+ * up INSIDE an inline colour. Built here the same way, so the markup is what
+ * a browser serialises for it.
+ */
+const foreColor = (color: string, html: string) => {
+  const span = document.createElement('span');
+  span.style.color = color;
+  span.innerHTML = html;
+  return span.outerHTML;
+};
+
+/** `selector{declarations}` pairs of a flat stylesheet. */
+const rulesOf = (css: string) =>
+  css
+    .split('}')
+    .filter(Boolean)
+    .map((rule) => {
+      const [selector, declarations] = rule.split('{');
+      return { selector, declarations };
+    });
+
+/** Ids of the elements matched by the rule that carries `declaration`. */
+const matchedIds = (css: string, declaration: string) => {
+  const rule = rulesOf(css).find((r) => r.declarations.includes(declaration));
+  if (!rule) throw new Error(`no rule with ${declaration}`);
+  return Array.from(document.querySelectorAll(rule.selector))
+    .map((el) => el.id || 'root')
+    .sort();
+};
+
+const mountRichText = (html: string) => {
+  document.body.innerHTML = `<div class="theme-placeholder"><div data-pz-rich-text="">${html}</div></div>`;
+};
+
+describe('inline colour inside rich text', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const css = buildThemeElementDefaultsCss({
+    textColor: '#555555',
+    linkColor: '#4482FF',
+    headingColor: '#222222'
+  });
+
+  it('is kept for everything the colour tool wrapped', () => {
+    mountRichText(
+      [
+        // Two paragraphs coloured at once.
+        foreColor(
+          '#ff0000',
+          '<p id="red-p1">First</p><p id="red-p2">Second</p>'
+        ),
+        // A sentence with a link in it.
+        `<p id="host-p">${foreColor(
+          '#ff0000',
+          'Read <a id="red-a" href="/x">our story</a>'
+        )}</p>`,
+        // A link made on text that was already coloured.
+        `<p id="host-p2">${foreColor(
+          '#ff0000',
+          '<a id="red-a2" href="/y">linked</a>'
+        )}</p>`,
+        foreColor('#ff0000', '<h2 id="red-h2">Title</h2>'),
+        '<span style="font-weight: 700; color: rgb(0, 0, 255);"><a id="multi-a" href="/z">x</a></span>',
+        '<span style="font-weight:700;color:#00f"><a id="tight-a" href="/z">x</a></span>',
+        '<font color="#ff0000"><p id="font-p">Old</p></font>',
+        // Not a text colour: still the theme's.
+        '<span style="background-color: yellow;"><a id="bg-a" href="/w">hl</a></span>',
+        '<h2 id="plain-h2">Plain</h2><p id="plain-p">Para <a id="plain-a" href="/v">link</a></p><ul><li id="plain-li">One</li></ul>'
+      ].join('')
+    );
+
+    expect(matchedIds(css, 'color:var(--theme-text)')).toEqual([
+      'host-p',
+      'host-p2',
+      'plain-li',
+      'plain-p',
+      'root'
+    ]);
+    expect(matchedIds(css, 'color:var(--theme-link)')).toEqual([
+      'bg-a',
+      'plain-a'
+    ]);
+    expect(matchedIds(css, 'color:var(--theme-heading)')).toEqual(['plain-h2']);
+  });
+});
+
+describe('inline typography and links in headings', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const css = buildThemeElementDefaultsCss({
+    linkColor: '#4482FF',
+    typography: [
+      managed('heading01'),
+      managed('heading02'),
+      managed('body', { fontSize: 14, lineHeight: 22 }),
+      managed('link', { fontSize: 14, lineHeight: 22 })
+    ]
+  });
+
+  it('keep pasted inline typography and a heading size on its link', () => {
+    mountRichText(
+      [
+        '<span style="font-size: 20px;"><p id="big-p">Big</p></span>',
+        '<div style="line-height: 30px;"><h1 id="lh-h1">Tall</h1></div>',
+        '<font face="Georgia"><a id="face-a" href="/f">Serif</a></font>',
+        '<h2 id="h2"><a id="h2-a" href="/sale">Shop the sale</a></h2>',
+        '<h1 id="plain-h1">H</h1><p id="plain-p">P <a id="plain-a" href="/p">a</a></p>'
+      ].join('')
+    );
+
+    expect(
+      matchedIds(css, 'line-height:var(--theme-line-height-body)')
+    ).toEqual(['plain-p', 'root']);
+    expect(
+      matchedIds(css, 'line-height:var(--theme-line-height-heading01)')
+    ).toEqual(['plain-h1']);
+    expect(
+      matchedIds(css, 'line-height:var(--theme-line-height-heading02)')
+    ).toEqual(['h2']);
+    expect(
+      matchedIds(css, 'line-height:var(--theme-line-height-link)')
+    ).toEqual(['plain-a']);
+    // The link colour still reaches a link inside a heading.
+    expect(matchedIds(css, 'color:var(--theme-link)')).toEqual(
+      expect.arrayContaining(['h2-a', 'plain-a'])
+    );
+  });
+});
+
+describe('the inline variable sync', () => {
+  const fakeStyle = () => {
+    const values = new Map<string, string>();
+    return {
+      values,
+      setProperty: (name: string, value: string | null) => {
+        values.set(name, String(value));
+      },
+      removeProperty: (name: string) => {
+        values.delete(name);
+        return '';
+      }
+    };
+  };
+
+  it('sets the next variables and removes the ones that are gone', () => {
+    const style = fakeStyle();
+    let written = syncThemeRootVariables(
+      style,
+      [
+        ['--theme-link', '#111111'],
+        ['--theme-custom-1', '#222222']
+      ],
+      new Set()
+    );
+    expect(Object.fromEntries(style.values)).toEqual({
+      '--theme-link': '#111111',
+      '--theme-custom-1': '#222222'
+    });
+
+    written = syncThemeRootVariables(
+      style,
+      [['--theme-link', '#333333']],
+      written
+    );
+    expect(Object.fromEntries(style.values)).toEqual({
+      '--theme-link': '#333333'
+    });
+    expect(Array.from(written)).toEqual(['--theme-link']);
+  });
+
+  it('never writes or removes the five legacy colour variables', () => {
+    const style = fakeStyle();
+    style.values.set('--theme-primary', '#000000');
+    const written = syncThemeRootVariables(
+      style,
+      [['--theme-background', '#ff0000']],
+      new Set(['--theme-primary', '--theme-secondary'])
+    );
+    expect(Object.fromEntries(style.values)).toEqual({
+      '--theme-primary': '#000000'
+    });
+    expect(written.size).toBe(0);
+  });
+});