@usefragments/core 1.0.0

package/src/preview/comparison-styles.ts

@@ -0,0 +1,197 @@
+import type {
+  PreviewComparisonFinding,
+  PreviewComparisonReport,
+  PreviewComparisonStyleMap,
+  PreviewComparisonThresholds,
+  PreviewStyleComparisonItem,
+} from "./comparison";
+
+const COLOR_PROPERTIES = new Set([
+  "background",
+  "backgroundColor",
+  "borderColor",
+  "color",
+  "fill",
+  "stroke",
+]);
+
+const NUMERIC_PROPERTIES = new Set([
+  "borderRadius",
+  "borderWidth",
+  "fontSize",
+  "gap",
+  "height",
+  "letterSpacing",
+  "lineHeight",
+  "margin",
+  "opacity",
+  "padding",
+  "width",
+]);
+
+export function compareStyles(
+  design: PreviewComparisonStyleMap | undefined,
+  preview: PreviewComparisonStyleMap | undefined,
+  thresholds: PreviewComparisonThresholds,
+  findings: PreviewComparisonFinding[]
+): PreviewComparisonReport["styles"] | undefined {
+  if (!design || !preview) return undefined;
+
+  const properties: PreviewStyleComparisonItem[] = [];
+
+  for (const [property, designValue] of Object.entries(design)) {
+    if (designValue === undefined || designValue === "") continue;
+
+    const previewValue = preview[property] ?? "(not set)";
+    const match = compareStyleValue(property, designValue, previewValue, thresholds);
+    properties.push({ property, design: designValue, preview: previewValue, match });
+
+    if (!match) {
+      findings.push({
+        code: "style-mismatch",
+        severity: "warning",
+        message: `${property} differs between Figma and the preview.`,
+        property,
+        designValue,
+        previewValue,
+      });
+    }
+  }
+
+  if (properties.length === 0) return undefined;
+
+  return {
+    match: properties.every((property) => property.match),
+    properties,
+  };
+}
+
+function compareStyleValue(
+  property: string,
+  designValue: string,
+  previewValue: string,
+  thresholds: PreviewComparisonThresholds
+): boolean {
+  const design = normalizeStyleValue(designValue);
+  const preview = normalizeStyleValue(previewValue);
+  if (design === preview) return true;
+  if (COLOR_PROPERTIES.has(property)) {
+    return compareColors(design, preview, thresholds);
+  }
+  if (NUMERIC_PROPERTIES.has(property)) {
+    return compareNumericValues(design, preview, thresholds.numericPx);
+  }
+  return false;
+}
+
+function normalizeStyleValue(value: string): string {
+  return value
+    .trim()
+    .replace(/\s+/g, " ")
+    .replace(/^none$/, "");
+}
+
+function compareNumericValues(valueA: string, valueB: string, tolerance: number): boolean {
+  const numberA = Number.parseFloat(valueA);
+  const numberB = Number.parseFloat(valueB);
+  if (Number.isNaN(numberA) || Number.isNaN(numberB)) return valueA === valueB;
+  return Math.abs(numberA - numberB) <= tolerance;
+}
+
+function compareColors(
+  valueA: string,
+  valueB: string,
+  thresholds: PreviewComparisonThresholds
+): boolean {
+  const colorA = parseColor(valueA);
+  const colorB = parseColor(valueB);
+  if (!colorA || !colorB) return valueA === valueB;
+
+  return (
+    Math.abs(colorA.r - colorB.r) <= thresholds.colorChannel &&
+    Math.abs(colorA.g - colorB.g) <= thresholds.colorChannel &&
+    Math.abs(colorA.b - colorB.b) <= thresholds.colorChannel &&
+    Math.abs(colorA.a - colorB.a) <= thresholds.alpha
+  );
+}
+
+function parseColor(value: string): { r: number; g: number; b: number; a: number } | null {
+  const normalized = value.trim().toLowerCase();
+  if (normalized === "transparent") return { r: 0, g: 0, b: 0, a: 0 };
+
+  const hex = normalized.match(/^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/);
+  if (hex) return parseHexColor(hex[1]);
+
+  const rgb = normalized.match(/^rgba?\(([^)]+)\)$/);
+  if (rgb) return parseRgbColor(rgb[1]);
+
+  return null;
+}
+
+function parseHexColor(raw: string): { r: number; g: number; b: number; a: number } {
+  const expanded =
+    raw.length === 3 || raw.length === 4
+      ? raw
+          .split("")
+          .map((part) => part + part)
+          .join("")
+      : raw;
+
+  return {
+    r: Number.parseInt(expanded.slice(0, 2), 16),
+    g: Number.parseInt(expanded.slice(2, 4), 16),
+    b: Number.parseInt(expanded.slice(4, 6), 16),
+    a: expanded.length === 8 ? Number.parseInt(expanded.slice(6, 8), 16) / 255 : 1,
+  };
+}
+
+function parseRgbColor(value: string): { r: number; g: number; b: number; a: number } | null {
+  const channels = splitRgbChannels(value);
+  if (channels.length < 3 || channels.length > 4) return null;
+
+  const [rawR, rawG, rawB, rawA] = channels;
+  const r = parseRgbChannel(rawR);
+  const g = parseRgbChannel(rawG);
+  const b = parseRgbChannel(rawB);
+  const a = rawA === undefined ? 1 : parseAlphaChannel(rawA);
+  if (r === null || g === null || b === null || a === null) return null;
+
+  return { r, g, b, a };
+}
+
+function splitRgbChannels(value: string): string[] {
+  if (value.includes(",")) {
+    return value.split(",").map((part) => part.trim());
+  }
+
+  const parts = value
+    .replace(/\s*\/\s*/g, " / ")
+    .split(/\s+/)
+    .filter(Boolean);
+  const slashIndex = parts.indexOf("/");
+  if (slashIndex === -1) return parts;
+
+  return [...parts.slice(0, slashIndex), parts[slashIndex + 1]].filter(
+    (part): part is string => part !== undefined
+  );
+}
+
+function parseRgbChannel(value: string): number | null {
+  if (value.endsWith("%")) {
+    const percentage = Number.parseFloat(value);
+    return Number.isFinite(percentage) ? (percentage / 100) * 255 : null;
+  }
+
+  const channel = Number.parseFloat(value);
+  return Number.isFinite(channel) ? channel : null;
+}
+
+function parseAlphaChannel(value: string): number | null {
+  if (value.endsWith("%")) {
+    const percentage = Number.parseFloat(value);
+    return Number.isFinite(percentage) ? percentage / 100 : null;
+  }
+
+  const alpha = Number.parseFloat(value);
+  return Number.isFinite(alpha) ? alpha : null;
+}