meno-core 1.0.47 → 1.0.49

package/lib/server/webflow/styleMapper.test.ts

@@ -0,0 +1,389 @@
+import { describe, expect, test } from 'bun:test';
+import { mapStylesToWebflow, buildInstanceStyleCombo } from './styleMapper';
+import { DEFAULT_BREAKPOINTS } from '../../shared/breakpoints';
+import type { ResponsiveStyleObject, InteractiveStyles } from '../../shared/types/styles';
+
+function baseOf(style: ResponsiveStyleObject) {
+  const { primaryClass } = mapStylesToWebflow(
+    'c-test',
+    style,
+    undefined,
+    DEFAULT_BREAKPOINTS
+  );
+  return primaryClass.base;
+}
+
+describe('styleMapper — shorthand expansion', () => {
+  test('1-value margin expands to all four sides', () => {
+    const css = baseOf({ base: { margin: '16px' } });
+    expect(css.margin).toBeUndefined();
+    expect(css['margin-top']).toBe('16px');
+    expect(css['margin-right']).toBe('16px');
+    expect(css['margin-bottom']).toBe('16px');
+    expect(css['margin-left']).toBe('16px');
+  });
+
+  test('2-value padding expands to vertical/horizontal pairs', () => {
+    const css = baseOf({ base: { padding: '40px 80px' } });
+    expect(css.padding).toBeUndefined();
+    expect(css['padding-top']).toBe('40px');
+    expect(css['padding-right']).toBe('80px');
+    expect(css['padding-bottom']).toBe('40px');
+    expect(css['padding-left']).toBe('80px');
+  });
+
+  test('3-value margin: top, horizontal, bottom', () => {
+    const css = baseOf({ base: { margin: '10px 20px 30px' } });
+    expect(css['margin-top']).toBe('10px');
+    expect(css['margin-right']).toBe('20px');
+    expect(css['margin-bottom']).toBe('30px');
+    expect(css['margin-left']).toBe('20px');
+  });
+
+  test('4-value padding: top, right, bottom, left', () => {
+    const css = baseOf({ base: { padding: '1px 2px 3px 4px' } });
+    expect(css['padding-top']).toBe('1px');
+    expect(css['padding-right']).toBe('2px');
+    expect(css['padding-bottom']).toBe('3px');
+    expect(css['padding-left']).toBe('4px');
+  });
+
+  test('1-value gap fills both row and column axes', () => {
+    const css = baseOf({ base: { gap: '12px' } });
+    expect(css.gap).toBeUndefined();
+    expect(css['row-gap']).toBe('12px');
+    expect(css['column-gap']).toBe('12px');
+  });
+
+  test('2-value gap maps to row then column', () => {
+    const css = baseOf({ base: { gap: '8px 24px' } });
+    expect(css.gap).toBeUndefined();
+    expect(css['row-gap']).toBe('8px');
+    expect(css['column-gap']).toBe('24px');
+  });
+
+  test('var(--x) inside a shorthand stays as one token (internal whitespace preserved)', () => {
+    const css = baseOf({ base: { padding: 'var(--space, 16px) 0' } });
+    expect(css['padding-top']).toBe('var(--space, 16px)');
+    expect(css['padding-right']).toBe('0px');
+    expect(css['padding-bottom']).toBe('var(--space, 16px)');
+    expect(css['padding-left']).toBe('0px');
+  });
+
+  test('calc() inside a shorthand stays as one token (internal whitespace preserved)', () => {
+    const css = baseOf({ base: { margin: 'calc(1rem + 2px) auto' } });
+    expect(css['margin-top']).toBe('calc(1rem + 2px)');
+    expect(css['margin-right']).toBe('auto');
+    expect(css['margin-bottom']).toBe('calc(1rem + 2px)');
+    expect(css['margin-left']).toBe('auto');
+  });
+
+  test('explicit longhand declared after shorthand wins (CSS cascade)', () => {
+    const css = baseOf({ base: { margin: '10px', marginTop: '99px' } });
+    expect(css['margin-top']).toBe('99px');
+    expect(css['margin-right']).toBe('10px');
+    expect(css['margin-bottom']).toBe('10px');
+    expect(css['margin-left']).toBe('10px');
+  });
+
+  test('shorthand declared after longhand clobbers it (CSS cascade)', () => {
+    const css = baseOf({ base: { marginTop: '99px', margin: '10px' } });
+    expect(css['margin-top']).toBe('10px');
+    expect(css['margin-right']).toBe('10px');
+    expect(css['margin-bottom']).toBe('10px');
+    expect(css['margin-left']).toBe('10px');
+  });
+
+  test('numeric padding (StyleObject number) expands to four px sides', () => {
+    const css = baseOf({ base: { padding: 24 } as any });
+    expect(css['padding-top']).toBe('24px');
+    expect(css['padding-right']).toBe('24px');
+    expect(css['padding-bottom']).toBe('24px');
+    expect(css['padding-left']).toBe('24px');
+  });
+
+  test('malformed 5+ token shorthand passes through unchanged', () => {
+    const css = baseOf({ base: { margin: '1px 2px 3px 4px 5px' } });
+    expect(css.margin).toBe('1px 2px 3px 4px 5px');
+    expect(css['margin-top']).toBeUndefined();
+  });
+
+  test('non-shorthand properties are untouched', () => {
+    const css = baseOf({ base: { color: 'red', display: 'flex' } });
+    expect(css.color).toBe('red');
+    expect(css.display).toBe('flex');
+  });
+
+  test('per-side longhands declared directly are preserved', () => {
+    const css = baseOf({ base: { marginTop: '4px', paddingLeft: '8px' } });
+    expect(css['margin-top']).toBe('4px');
+    expect(css['padding-left']).toBe('8px');
+    expect(css.margin).toBeUndefined();
+    expect(css.padding).toBeUndefined();
+  });
+});
+
+describe('styleMapper — bare color tokens wrap into var()', () => {
+  test('bare token on backgroundColor becomes var(--token)', () => {
+    const css = baseOf({ base: { backgroundColor: 'primary' } });
+    expect(css['background-color']).toBe('var(--primary)');
+  });
+
+  test('bare token on color becomes var(--token)', () => {
+    const css = baseOf({ base: { color: 'text-light' } });
+    expect(css.color).toBe('var(--text-light)');
+  });
+
+  test('bare token on borderColor becomes var(--token)', () => {
+    const css = baseOf({ base: { borderColor: 'border' } });
+    expect(css['border-color']).toBe('var(--border)');
+  });
+
+  test('hex colors pass through unchanged', () => {
+    const css = baseOf({ base: { backgroundColor: '#ff0000', color: '#fff' } });
+    expect(css['background-color']).toBe('#ff0000');
+    expect(css.color).toBe('#fff');
+  });
+
+  test('already-wrapped var() passes through unchanged', () => {
+    const css = baseOf({ base: { backgroundColor: 'var(--primary)' } });
+    expect(css['background-color']).toBe('var(--primary)');
+  });
+
+  test('CSS-named colors and keywords are not wrapped', () => {
+    const css = baseOf({ base: { color: 'red', backgroundColor: 'transparent', borderColor: 'currentColor' } });
+    expect(css.color).toBe('red');
+    expect(css['background-color']).toBe('transparent');
+    expect(css['border-color']).toBe('currentColor');
+  });
+
+  test('functional notations (rgb / rgba / hsl / oklch) pass through unchanged', () => {
+    const css = baseOf({ base: { backgroundColor: 'rgba(0,0,0,0.5)', color: 'oklch(70% 0.2 30)' } });
+    expect(css['background-color']).toBe('rgba(0,0,0,0.5)');
+    expect(css.color).toBe('oklch(70% 0.2 30)');
+  });
+
+  test('non-color properties with string values are untouched', () => {
+    const css = baseOf({ base: { display: 'flex', fontSize: '16px' } });
+    expect(css.display).toBe('flex');
+    expect(css['font-size']).toBe('16px');
+  });
+});
+
+describe('buildInstanceStyleCombo', () => {
+  test('flat style folds every authored property into one combo', () => {
+    const combo = buildInstanceStyleCombo(
+      'is-instance',
+      'c-card',
+      { fontSize: '40px', color: 'red' },
+      undefined,
+      DEFAULT_BREAKPOINTS,
+    );
+    expect(combo).not.toBeNull();
+    expect(combo!.name).toBe('is-instance');
+    expect(combo!.comboParent).toBe('c-card');
+    expect(combo!.base['font-size']).toBe('40px');
+    expect(combo!.base.color).toBe('red');
+  });
+
+  test('responsive style places breakpoint values under the right tier', () => {
+    const style: ResponsiveStyleObject = {
+      base: { color: 'red' },
+      mobile: { color: 'blue' },
+    };
+    const combo = buildInstanceStyleCombo(
+      'is-instance',
+      'c-card',
+      style,
+      undefined,
+      DEFAULT_BREAKPOINTS,
+    );
+    expect(combo).not.toBeNull();
+    expect(combo!.base.color).toBe('red');
+    expect(combo!.breakpoints?.small?.color).toBe('blue');
+  });
+
+  test('Webflow-handled interactive rules fold into pseudoStates', () => {
+    const interactive: InteractiveStyles = [
+      { postfix: ':hover', style: { base: { color: 'green' } } },
+    ];
+    const combo = buildInstanceStyleCombo(
+      'is-instance',
+      'c-card',
+      { color: 'red' },
+      interactive,
+      DEFAULT_BREAKPOINTS,
+    );
+    expect(combo).not.toBeNull();
+    expect(combo!.base.color).toBe('red');
+    expect(combo!.pseudoStates?.hover?.color).toBe('green');
+  });
+
+  test('interactive-only override produces a combo with no base', () => {
+    const interactive: InteractiveStyles = [
+      { postfix: ':hover', style: { base: { color: 'green' } } },
+    ];
+    const combo = buildInstanceStyleCombo(
+      'is-instance',
+      'c-card',
+      undefined,
+      interactive,
+      DEFAULT_BREAKPOINTS,
+    );
+    expect(combo).not.toBeNull();
+    expect(combo!.pseudoStates?.hover?.color).toBe('green');
+    expect(Object.keys(combo!.base)).toHaveLength(0);
+  });
+
+  test('empty inputs return null', () => {
+    expect(buildInstanceStyleCombo('is-instance', 'c-card', undefined, undefined, DEFAULT_BREAKPOINTS)).toBeNull();
+    expect(buildInstanceStyleCombo('is-instance', 'c-card', {}, [], DEFAULT_BREAKPOINTS)).toBeNull();
+  });
+});
+
+describe('mapStylesToWebflow — StyleMappings', () => {
+  // Mirrors `Button.json` from real projects: two `_mapping` properties bound
+  // to the same component prop. Regression: the per-mapping combo fan-out
+  // collided in `styleClasses` (Map keyed by combo name) and silently dropped
+  // every property but the last-iterated one — so a button-secondary instance
+  // got the bg-color delta but lost the font-color delta (or vice versa,
+  // depending on JSON declaration order).
+  const buttonStyle: ResponsiveStyleObject = {
+    base: {
+      backgroundColor: {
+        _mapping: true,
+        prop: 'version',
+        values: { default: 'var(--accent)', secondary: 'var(--gray-200)' },
+      },
+      color: {
+        _mapping: true,
+        prop: 'version',
+        values: { default: 'var(--white)', secondary: 'var(--text)' },
+      },
+    },
+  };
+
+  test('two mappings on same prop merge into a single combo carrying both deltas', () => {
+    const { primaryClass, comboClasses } = mapStylesToWebflow(
+      'c-button',
+      buttonStyle,
+      undefined,
+      DEFAULT_BREAKPOINTS,
+      undefined,
+      { instanceProps: { version: 'secondary' }, componentDefaults: { version: 'default' } },
+    );
+
+    expect(comboClasses).toHaveLength(1);
+    const combo = comboClasses[0]!;
+    expect(combo.name).toBe('is-version-secondary');
+    expect(combo.comboParent).toBe('c-button');
+    expect(combo.base['background-color']).toBe('var(--gray-200)');
+    expect(combo.base.color).toBe('var(--text)');
+
+    expect(primaryClass.base['background-color']).toBe('var(--accent)');
+    expect(primaryClass.base.color).toBe('var(--white)');
+  });
+
+  test('default-prop instance bakes defaults into primary and emits no combo', () => {
+    const { primaryClass, comboClasses } = mapStylesToWebflow(
+      'c-button',
+      buttonStyle,
+      undefined,
+      DEFAULT_BREAKPOINTS,
+      undefined,
+      { instanceProps: { version: 'default' }, componentDefaults: { version: 'default' } },
+    );
+
+    expect(comboClasses).toHaveLength(0);
+    expect(primaryClass.base['background-color']).toBe('var(--accent)');
+    expect(primaryClass.base.color).toBe('var(--white)');
+  });
+
+  test('mappings on different props produce a single combo with a deterministic merged name', () => {
+    const style: ResponsiveStyleObject = {
+      base: {
+        backgroundColor: {
+          _mapping: true,
+          prop: 'version',
+          values: { default: '#000', secondary: '#eee' },
+        },
+        color: {
+          _mapping: true,
+          prop: 'tone',
+          values: { quiet: '#777', loud: '#f00' },
+        },
+      },
+    };
+    const { comboClasses } = mapStylesToWebflow(
+      'c-card',
+      style,
+      undefined,
+      DEFAULT_BREAKPOINTS,
+      undefined,
+      {
+        instanceProps: { version: 'secondary', tone: 'loud' },
+        componentDefaults: { version: 'default', tone: 'quiet' },
+      },
+    );
+
+    expect(comboClasses).toHaveLength(1);
+    const combo = comboClasses[0]!;
+    // Sorted segments → stable name across declaration-order changes.
+    expect(combo.name).toBe('is-tone-loud-version-secondary');
+    expect(combo.base['background-color']).toBe('#eee');
+    expect(combo.base.color).toBe('#f00');
+  });
+
+  test('without instanceProps, defaults still bake into primary and no combos emit', () => {
+    const { primaryClass, comboClasses } = mapStylesToWebflow(
+      'c-button',
+      buttonStyle,
+      undefined,
+      DEFAULT_BREAKPOINTS,
+      undefined,
+      { componentDefaults: { version: 'default' } },
+    );
+
+    expect(comboClasses).toHaveLength(0);
+    expect(primaryClass.base['background-color']).toBe('var(--accent)');
+    expect(primaryClass.base.color).toBe('var(--white)');
+  });
+
+  // Regression: two placements of the same component under different ancestor
+  // `theme="…"` values used to collapse onto one combo class slot — the last
+  // write won, silently mis-rendering the earlier theme's instance. The
+  // `themeSuffix` option keeps each theme's combo on a distinct slot.
+  test('themeSuffix appended to combo name keeps per-theme combos distinct', () => {
+    const { comboClasses } = mapStylesToWebflow(
+      'c-button-theme-dark',
+      buttonStyle,
+      undefined,
+      DEFAULT_BREAKPOINTS,
+      undefined,
+      {
+        instanceProps: { version: 'secondary' },
+        componentDefaults: { version: 'default' },
+        themeSuffix: '-theme-dark',
+      },
+    );
+    expect(comboClasses).toHaveLength(1);
+    expect(comboClasses[0]!.name).toBe('is-version-secondary-theme-dark');
+    expect(comboClasses[0]!.comboParent).toBe('c-button-theme-dark');
+  });
+
+  test('empty themeSuffix is identical to omitting it (default-theme path stays byte-stable)', () => {
+    const { comboClasses } = mapStylesToWebflow(
+      'c-button',
+      buttonStyle,
+      undefined,
+      DEFAULT_BREAKPOINTS,
+      undefined,
+      {
+        instanceProps: { version: 'secondary' },
+        componentDefaults: { version: 'default' },
+        themeSuffix: '',
+      },
+    );
+    expect(comboClasses[0]!.name).toBe('is-version-secondary');
+  });
+});