@ccheever/exact-renderer 0.1.0

package/src/__tests__/classname.test.ts

@@ -0,0 +1,332 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import type {
+  SerializedCompiledFragment,
+  SerializedExactStyleSheet,
+} from '../classname-contract.js';
+import {
+  __clearExactStylesheets,
+  __registerExactStylesheet,
+  classNameHasInteractiveConditions,
+  classNameHasMediaConditions,
+  resolveClassNameStyle,
+  setMediaState,
+} from '../classname-resolve.js';
+import {
+  resolveClassNameStyle as resolveRuntimeClassNameStyle,
+} from '../classname-runtime.js';
+import { createInstance } from '../host-ops.js';
+
+function rgba(r: number, g: number, b: number, a = 255) {
+  return { r, g, b, a };
+}
+
+function points(value: number) {
+  return { type: 'points' as const, value };
+}
+
+function fragment(
+  order: number,
+  style: SerializedCompiledFragment['style'],
+  condition: SerializedCompiledFragment['condition'] = null,
+  mediaGate: SerializedCompiledFragment['mediaGate'] = null,
+): SerializedCompiledFragment {
+  return {
+    order,
+    condition,
+    mediaGate,
+    style,
+  };
+}
+
+function registerArtifact(
+  sourceId: string,
+  classes: SerializedExactStyleSheet['classes'],
+  warnings: string[] = [],
+): void {
+  __registerExactStylesheet(sourceId, {
+    classes,
+    warnings,
+  });
+}
+
+describe('native className runtime resolution', () => {
+  beforeEach(() => {
+    __clearExactStylesheets();
+    setMediaState({
+      width: 400,
+      height: 800,
+      orientation: 'portrait',
+      colorScheme: 'light',
+      reducedMotion: false,
+    });
+  });
+
+  it('publishes registered styles to the lightweight startup resolver', () => {
+    expect(resolveRuntimeClassNameStyle('card')).toEqual({});
+
+    registerArtifact('/tmp/runtime.css', {
+      card: [fragment(1, { opacity: 0.75 })],
+    });
+
+    expect(resolveRuntimeClassNameStyle('card')).toEqual({ opacity: 0.75 });
+  });
+
+  it('resolves declarations by stylesheet source order rather than class token order', () => {
+    registerArtifact('/tmp/source-order.css', {
+      // Match the compiler's rule ordering: lower values are earlier in the
+      // stylesheet, higher values are later and therefore win the cascade.
+      'pt-2': [fragment(0, { paddingTop: points(8) })],
+      'p-4': [
+        fragment(1, {
+          paddingTop: points(16),
+          paddingRight: points(16),
+          paddingBottom: points(16),
+          paddingLeft: points(16),
+        }),
+      ],
+    });
+
+    const forward = resolveClassNameStyle('p-4 pt-2');
+    const reverse = resolveClassNameStyle('pt-2 p-4');
+
+    expect(forward).toEqual(reverse);
+    expect(forward.paddingTop).toEqual(points(16));
+    expect(forward.paddingRight).toEqual(points(16));
+    expect(forward.paddingBottom).toEqual(points(16));
+    expect(forward.paddingLeft).toEqual(points(16));
+  });
+
+  it('applies disabled pseudo-class fragments when disabled is active', () => {
+    registerArtifact('/tmp/disabled.css', {
+      button: [
+        fragment(1, { opacity: 1 }),
+        fragment(2, { opacity: 0.4 }, { type: 'pseudo', pseudo: 'disabled' }),
+      ],
+    });
+
+    expect(resolveClassNameStyle('button')).toEqual({ opacity: 1 });
+    expect(resolveClassNameStyle('button', { props: { disabled: true } })).toEqual({
+      opacity: 0.4,
+    });
+  });
+
+  it('applies media-gated fragments when viewport state matches', () => {
+    registerArtifact('/tmp/responsive.css', {
+      item: [
+        fragment(1, { flexDirection: 'column' }),
+        fragment(2, { flexDirection: 'row' }, {
+          type: 'media',
+          media: [{ feature: 'min-width', value: 768 }],
+        }),
+      ],
+    });
+
+    expect(resolveClassNameStyle('item')).toEqual({ flexDirection: 'column' });
+
+    setMediaState({ width: 1024 });
+    expect(resolveClassNameStyle('item')).toEqual({ flexDirection: 'row' });
+  });
+
+  it('supports prefers-color-scheme fragments', () => {
+    registerArtifact('/tmp/dark.css', {
+      bg: [
+        fragment(1, { backgroundColor: rgba(255, 255, 255) }),
+        fragment(2, { backgroundColor: rgba(0, 0, 0) }, {
+          type: 'media',
+          media: [{ feature: 'prefers-color-scheme', value: 'dark' }],
+        }),
+      ],
+    });
+
+    expect(resolveClassNameStyle('bg').backgroundColor).toEqual(rgba(255, 255, 255));
+
+    setMediaState({ colorScheme: 'dark' });
+    expect(resolveClassNameStyle('bg').backgroundColor).toEqual(rgba(0, 0, 0));
+  });
+
+  it('honors strict greater-than media range operators', () => {
+    registerArtifact('/tmp/strict-range.css', {
+      base: [
+        fragment(1, { flexDirection: 'column' }),
+        fragment(2, { flexDirection: 'row' }, {
+          type: 'media',
+          media: [{ feature: 'gt-width', value: 768 }],
+        }),
+      ],
+    });
+
+    setMediaState({ width: 768 });
+    expect(resolveClassNameStyle('base').flexDirection).toBe('column');
+
+    setMediaState({ width: 769 });
+    expect(resolveClassNameStyle('base').flexDirection).toBe('row');
+  });
+
+  it('applies hover, focus, active, and positional pseudo fragments', () => {
+    registerArtifact('/tmp/interactive.css', {
+      btn: [
+        fragment(1, { backgroundColor: rgba(59, 130, 246) }),
+        fragment(2, { backgroundColor: rgba(37, 99, 235) }, { type: 'pseudo', pseudo: 'hover' }),
+        fragment(3, { borderColor: rgba(59, 130, 246) }, { type: 'pseudo', pseudo: 'focus' }),
+        fragment(4, { borderColor: rgba(29, 78, 216) }, { type: 'pseudo', pseudo: 'active' }),
+      ],
+      item: [
+        fragment(1, { marginTop: points(8) }),
+        fragment(2, { marginTop: points(0) }, { type: 'pseudo', pseudo: 'first-child' }),
+        fragment(3, { marginBottom: points(0) }, { type: 'pseudo', pseudo: 'last-child' }),
+      ],
+    });
+
+    const hovered = resolveClassNameStyle('btn', {
+      interaction: { hovered: true, focused: false, active: false, focusVisible: false },
+    });
+    expect(hovered.backgroundColor).toEqual(rgba(37, 99, 235));
+
+    const focused = resolveClassNameStyle('btn', {
+      interaction: { hovered: false, focused: true, active: false, focusVisible: false },
+    });
+    expect(focused.borderColor).toEqual(rgba(59, 130, 246));
+
+    const active = resolveClassNameStyle('btn', {
+      interaction: { hovered: false, focused: false, active: true, focusVisible: false },
+    });
+    expect(active.borderColor).toEqual(rgba(29, 78, 216));
+
+    const first = resolveClassNameStyle('item', {
+      position: { isFirst: true, isLast: false },
+    });
+    expect(first.marginTop).toEqual(points(0));
+
+    const last = resolveClassNameStyle('item', {
+      position: { isFirst: false, isLast: true },
+    });
+    expect(last.marginBottom).toEqual(points(0));
+  });
+
+  it('detects interactive and media-conditional fragments', () => {
+    registerArtifact('/tmp/detect.css', {
+      static: [fragment(1, { textColor: rgba(255, 0, 0) })],
+      hoverable: [
+        fragment(1, { textColor: rgba(255, 0, 0) }),
+        fragment(2, { textColor: rgba(0, 0, 255) }, { type: 'pseudo', pseudo: 'hover' }),
+      ],
+      responsive: [
+        fragment(1, { textColor: rgba(255, 0, 0) }),
+        fragment(2, { textColor: rgba(0, 0, 255) }, {
+          type: 'media',
+          media: [{ feature: 'min-width', value: 768 }],
+        }),
+      ],
+    });
+
+    expect(classNameHasInteractiveConditions('static')).toBe(false);
+    expect(classNameHasInteractiveConditions('hoverable')).toBe(true);
+    expect(classNameHasMediaConditions('static')).toBe(false);
+    expect(classNameHasMediaConditions('responsive')).toBe(true);
+  });
+
+  it('combines media gates with pseudo conditions', () => {
+    registerArtifact('/tmp/media-hover.css', {
+      btn: [
+        fragment(1, { backgroundColor: rgba(255, 255, 255) }),
+        fragment(
+          2,
+          { backgroundColor: rgba(59, 130, 246) },
+          { type: 'pseudo', pseudo: 'hover' },
+          [{ feature: 'min-width', value: 768 }],
+        ),
+      ],
+    });
+
+    const narrowHover = resolveClassNameStyle('btn', {
+      interaction: { hovered: true, focused: false, active: false, focusVisible: false },
+    });
+    expect(narrowHover.backgroundColor).toEqual(rgba(255, 255, 255));
+
+    setMediaState({ width: 1024 });
+    const wideHover = resolveClassNameStyle('btn', {
+      interaction: { hovered: true, focused: false, active: false, focusVisible: false },
+    });
+    expect(wideHover.backgroundColor).toEqual(rgba(59, 130, 246));
+  });
+
+  it('resolves group and peer modifiers from provided interaction state', () => {
+    registerArtifact('/tmp/group-peer.css', {
+      child: [fragment(1, { textColor: rgba(0, 0, 0) })],
+      'group-hover:text-blue': [
+        fragment(2, { textColor: rgba(59, 130, 246) }, {
+          type: 'group',
+          groupName: null,
+          pseudo: 'hover',
+        }),
+      ],
+      'peer-focus:ring': [
+        fragment(3, { borderColor: rgba(59, 130, 246) }, {
+          type: 'peer',
+          peerName: null,
+          pseudo: 'focus',
+        }),
+      ],
+    });
+
+    const groupStates = new Map([
+      [
+        null,
+        { hovered: true, focused: false, active: false, focusVisible: false },
+      ],
+    ]);
+
+    const grouped = resolveClassNameStyle('child group-hover:text-blue', {
+      groupStates,
+    });
+    expect(grouped.textColor).toEqual(rgba(59, 130, 246));
+
+    const peerFocused = resolveClassNameStyle('peer-focus:ring', {
+      peerStates: {
+        getState() {
+          return { hovered: false, focused: true, active: false, focusVisible: false };
+        },
+      },
+    });
+    expect(peerFocused.borderColor).toEqual(rgba(59, 130, 246));
+  });
+
+  it('preserves normalized numeric style values from precompiled fragments', () => {
+    registerArtifact('/tmp/tracking.css', {
+      'tracking-wide': [fragment(1, { letterSpacing: 0.4 })],
+    });
+
+    expect(resolveClassNameStyle('tracking-wide').letterSpacing).toBe(0.4);
+  });
+
+  it('lets inline style override className while preserving non-conflicting class properties', () => {
+    registerArtifact('/tmp/card.css', {
+      card: [
+        fragment(1, {
+          paddingTop: points(16),
+          paddingRight: points(16),
+          paddingBottom: points(16),
+          paddingLeft: points(16),
+          backgroundColor: rgba(255, 0, 0),
+        }),
+      ],
+    });
+
+    const instance = createInstance('View', {
+      className: 'card',
+      style: {
+        paddingTop: 4,
+        opacity: 0.5,
+      },
+    });
+
+    expect(instance.style.flexDirection).toBe('column');
+    expect(instance.style.paddingTop).toEqual(points(4));
+    expect(instance.style.paddingRight).toEqual(points(16));
+    expect(instance.style.paddingBottom).toEqual(points(16));
+    expect(instance.style.paddingLeft).toEqual(points(16));
+    expect(instance.style.backgroundColor).toEqual(rgba(255, 0, 0));
+    expect(instance.style.opacity).toBe(0.5);
+  });
+});

package/src/__tests__/color.test.ts

@@ -0,0 +1,169 @@
+/**
+ * Color Parsing Tests
+ *
+ * Comprehensive tests for the color parsing utilities.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { parseColor, isValidColor, colorToHex, colorToRgba } from '../style/color.js';
+
+describe('parseColor', () => {
+  describe('hex colors', () => {
+    it('should parse 3-digit hex colors', () => {
+      expect(parseColor('#f00')).toEqual({ r: 255, g: 0, b: 0, a: 255 });
+      expect(parseColor('#0f0')).toEqual({ r: 0, g: 255, b: 0, a: 255 });
+      expect(parseColor('#00f')).toEqual({ r: 0, g: 0, b: 255, a: 255 });
+      expect(parseColor('#fff')).toEqual({ r: 255, g: 255, b: 255, a: 255 });
+      expect(parseColor('#000')).toEqual({ r: 0, g: 0, b: 0, a: 255 });
+      expect(parseColor('#abc')).toEqual({ r: 170, g: 187, b: 204, a: 255 });
+    });
+
+    it('should parse 6-digit hex colors', () => {
+      expect(parseColor('#ff0000')).toEqual({ r: 255, g: 0, b: 0, a: 255 });
+      expect(parseColor('#00ff00')).toEqual({ r: 0, g: 255, b: 0, a: 255 });
+      expect(parseColor('#0000ff')).toEqual({ r: 0, g: 0, b: 255, a: 255 });
+      expect(parseColor('#ffffff')).toEqual({ r: 255, g: 255, b: 255, a: 255 });
+      expect(parseColor('#000000')).toEqual({ r: 0, g: 0, b: 0, a: 255 });
+      expect(parseColor('#808080')).toEqual({ r: 128, g: 128, b: 128, a: 255 });
+      expect(parseColor('#6366f1')).toEqual({ r: 99, g: 102, b: 241, a: 255 });
+    });
+
+    it('should parse 8-digit hex colors with alpha', () => {
+      expect(parseColor('#ff000080')).toEqual({ r: 255, g: 0, b: 0, a: 128 });
+      expect(parseColor('#00ff00ff')).toEqual({ r: 0, g: 255, b: 0, a: 255 });
+      expect(parseColor('#0000ff00')).toEqual({ r: 0, g: 0, b: 255, a: 0 });
+      expect(parseColor('#10b98120')).toEqual({ r: 16, g: 185, b: 129, a: 32 });
+    });
+
+    it('should handle uppercase hex', () => {
+      expect(parseColor('#FF0000')).toEqual({ r: 255, g: 0, b: 0, a: 255 });
+      expect(parseColor('#AABBCC')).toEqual({ r: 170, g: 187, b: 204, a: 255 });
+    });
+
+    it('should handle mixed case hex', () => {
+      expect(parseColor('#AaBbCc')).toEqual({ r: 170, g: 187, b: 204, a: 255 });
+    });
+  });
+
+  describe('rgb/rgba colors', () => {
+    it('should parse rgb() colors', () => {
+      expect(parseColor('rgb(255, 0, 0)')).toEqual({ r: 255, g: 0, b: 0, a: 255 });
+      expect(parseColor('rgb(0, 255, 0)')).toEqual({ r: 0, g: 255, b: 0, a: 255 });
+      expect(parseColor('rgb(0, 0, 255)')).toEqual({ r: 0, g: 0, b: 255, a: 255 });
+      expect(parseColor('rgb(128, 128, 128)')).toEqual({ r: 128, g: 128, b: 128, a: 255 });
+    });
+
+    it('should parse rgba() colors', () => {
+      expect(parseColor('rgba(255, 0, 0, 0.5)')).toEqual({ r: 255, g: 0, b: 0, a: 128 });
+      expect(parseColor('rgba(0, 255, 0, 1)')).toEqual({ r: 0, g: 255, b: 0, a: 255 });
+      expect(parseColor('rgba(0, 0, 255, 0)')).toEqual({ r: 0, g: 0, b: 255, a: 0 });
+      expect(parseColor('rgba(128, 128, 128, 0.75)')).toEqual({ r: 128, g: 128, b: 128, a: 191 });
+    });
+
+    it('should handle spaces in rgb values', () => {
+      expect(parseColor('rgb(255,0,0)')).toEqual({ r: 255, g: 0, b: 0, a: 255 });
+      expect(parseColor('rgb( 255 , 0 , 0 )')).toEqual({ r: 255, g: 0, b: 0, a: 255 });
+    });
+  });
+
+  describe('named colors', () => {
+    it('should parse common named colors', () => {
+      expect(parseColor('white')).toEqual({ r: 255, g: 255, b: 255, a: 255 });
+      expect(parseColor('black')).toEqual({ r: 0, g: 0, b: 0, a: 255 });
+      expect(parseColor('red')).toEqual({ r: 255, g: 0, b: 0, a: 255 });
+      expect(parseColor('green')).toEqual({ r: 0, g: 128, b: 0, a: 255 });
+      expect(parseColor('blue')).toEqual({ r: 0, g: 0, b: 255, a: 255 });
+      expect(parseColor('yellow')).toEqual({ r: 255, g: 255, b: 0, a: 255 });
+      expect(parseColor('transparent')).toEqual({ r: 0, g: 0, b: 0, a: 0 });
+    });
+
+    it('should parse extended named colors', () => {
+      expect(parseColor('orange')).toEqual({ r: 255, g: 165, b: 0, a: 255 });
+      expect(parseColor('pink')).toEqual({ r: 255, g: 192, b: 203, a: 255 });
+      expect(parseColor('indigo')).toEqual({ r: 75, g: 0, b: 130, a: 255 });
+      expect(parseColor('teal')).toEqual({ r: 0, g: 128, b: 128, a: 255 });
+    });
+
+    it('should be case-insensitive for named colors', () => {
+      expect(parseColor('WHITE')).toEqual({ r: 255, g: 255, b: 255, a: 255 });
+      expect(parseColor('Black')).toEqual({ r: 0, g: 0, b: 0, a: 255 });
+      expect(parseColor('RED')).toEqual({ r: 255, g: 0, b: 0, a: 255 });
+      expect(parseColor('TrAnSpArEnT')).toEqual({ r: 0, g: 0, b: 0, a: 0 });
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should return null for empty string', () => {
+      expect(parseColor('')).toBeNull();
+    });
+
+    it('should return null for undefined', () => {
+      expect(parseColor(undefined)).toBeNull();
+    });
+
+    it('should return null for null', () => {
+      expect(parseColor(null)).toBeNull();
+    });
+
+    it('should return null for unknown colors', () => {
+      expect(parseColor('unknowncolor')).toBeNull();
+      expect(parseColor('notacolor')).toBeNull();
+    });
+
+    it('should return null for invalid hex formats', () => {
+      expect(parseColor('#')).toBeNull();
+      expect(parseColor('#f')).toBeNull();
+      expect(parseColor('#ff')).toBeNull();
+      expect(parseColor('#fffff')).toBeNull();
+      expect(parseColor('#fffffffff')).toBeNull();
+      expect(parseColor('#gggggg')).toBeNull();
+    });
+
+    it('should handle whitespace', () => {
+      expect(parseColor('  #ff0000  ')).toEqual({ r: 255, g: 0, b: 0, a: 255 });
+      expect(parseColor('  white  ')).toEqual({ r: 255, g: 255, b: 255, a: 255 });
+    });
+  });
+});
+
+describe('isValidColor', () => {
+  it('should return true for valid colors', () => {
+    expect(isValidColor('#ff0000')).toBe(true);
+    expect(isValidColor('rgb(255, 0, 0)')).toBe(true);
+    expect(isValidColor('white')).toBe(true);
+  });
+
+  it('should return false for invalid colors', () => {
+    expect(isValidColor('notacolor')).toBe(false);
+    expect(isValidColor('#gg0000')).toBe(false);
+    expect(isValidColor('')).toBe(false);
+  });
+});
+
+describe('colorToHex', () => {
+  it('should convert RGBA to hex without alpha', () => {
+    expect(colorToHex({ r: 255, g: 0, b: 0, a: 255 })).toBe('#ff0000');
+    expect(colorToHex({ r: 0, g: 255, b: 0, a: 255 })).toBe('#00ff00');
+    expect(colorToHex({ r: 0, g: 0, b: 255, a: 255 })).toBe('#0000ff');
+  });
+
+  it('should convert RGBA to hex with alpha when requested', () => {
+    expect(colorToHex({ r: 255, g: 0, b: 0, a: 128 }, true)).toBe('#ff000080');
+    expect(colorToHex({ r: 0, g: 0, b: 0, a: 0 }, true)).toBe('#00000000');
+  });
+
+  it('should not include alpha when it is 255', () => {
+    expect(colorToHex({ r: 255, g: 0, b: 0, a: 255 }, true)).toBe('#ff0000');
+  });
+});
+
+describe('colorToRgba', () => {
+  it('should convert RGBA to rgb() when alpha is 255', () => {
+    expect(colorToRgba({ r: 255, g: 0, b: 0, a: 255 })).toBe('rgb(255, 0, 0)');
+  });
+
+  it('should convert RGBA to rgba() when alpha is not 255', () => {
+    expect(colorToRgba({ r: 255, g: 0, b: 0, a: 128 })).toBe('rgba(255, 0, 0, 0.50)');
+    expect(colorToRgba({ r: 0, g: 0, b: 0, a: 0 })).toBe('rgba(0, 0, 0, 0.00)');
+  });
+});