@homebound/truss 2.8.0 → 2.8.2

package/build/vitest.d.ts

@@ -1,5 +1,5 @@
 /** Supported style expectations for the matcher. */
-type StyleExpectation = string | Record<string, string | number>;
+type StyleExpectation = Record<string, string | number>;
 /** Minimal subset of Vitest's matcher context used for error formatting. */
 type MatcherContext = {
     utils?: {
@@ -15,9 +15,12 @@ type MatcherResult = {
 /**
  * Assert that an element's computed style matches the provided CSS declarations.
  *
- * Static class-based styles are read via `getComputedStyle`, while CSS custom
- * properties are read directly from the element's inline style because jsdom
- * does not resolve them through computed styles.
+ * This matcher is for asserting concrete CSS properties like `color` or
+ * `margin-top`, not raw custom properties like `--color`.
+ *
+ * In jsdom, computed styles sometimes leave values as `var(--token)` instead of
+ * resolving them. We follow those references so `expect(el).toHaveStyle({ color:
+ * "blue" })` still works for class rules like `.color_var { color: var(--color) }`.
  */
 declare function toHaveStyle(this: MatcherContext, received: unknown, expected: StyleExpectation): MatcherResult;
 

package/build/vitest.js

@@ -1,4 +1,6 @@
 // src/toHaveStyle.ts
+var wholeValueCssVariablePattern = /^var\(\s*(--[\w-]+)\s*(?:,\s*(.+))?\)$/;
+var probe;
 function toHaveStyle(received, expected) {
   if (!isElementLike(received)) {
     return {
@@ -6,12 +8,14 @@ function toHaveStyle(received, expected) {
       message: () => `expected an Element, received ${printValue(this, "printReceived", received)}`
     };
   }
-  const expectedStyles = parseExpectedStyles(received, expected);
+  probe ??= received.ownerDocument.createElement("div");
+  const expectedStyles = parseExpectedStyles(this, received, expected);
   const mismatches = [];
   for (const [property, expectedValue] of expectedStyles) {
-    const actualValue = getActualStyleValue(received, property);
-    if (actualValue !== expectedValue) {
-      mismatches.push(`${property}: expected ${expectedValue}, received ${actualValue || "<empty>"}`);
+    const actualValue = canonicalizeValue(probe, property, getActualStyleValue(received, property));
+    const comparableExpectedValue = canonicalizeValue(probe, property, expectedValue);
+    if (actualValue !== comparableExpectedValue) {
+      mismatches.push(`${property}: expected ${comparableExpectedValue}, received ${actualValue || "<empty>"}`);
     }
   }
   return {
@@ -32,26 +36,42 @@ function isElementLike(value) {
 function toKebabCase(property) {
   return property.startsWith("--") ? property : property.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
 }
-function parseExpectedStyles(el, expected) {
-  const probe = el.ownerDocument.createElement("div");
-  const styles = /* @__PURE__ */ new Map();
-  if (typeof expected === "string") {
-    probe.setAttribute("style", expected);
-  } else {
-    for (const [property, value] of Object.entries(expected)) {
-      probe.style.setProperty(toKebabCase(property), String(value));
+function parseExpectedStyles(ctx, el, expected) {
+  const probe2 = el.ownerDocument.createElement("div");
+  for (const [property, value] of Object.entries(expected)) {
+    if (property.startsWith("--")) {
+      throw new Error(
+        `toHaveStyle does not support custom property expectations like ${printValue(ctx, "printExpected", {
+          [property]: value
+        })}; assert the custom property directly instead.`
+      );
     }
+    probe2.style.setProperty(toKebabCase(property), String(value));
   }
-  for (const property of Array.from(probe.style)) {
-    styles.set(property, probe.style.getPropertyValue(property).trim());
+  const styles = /* @__PURE__ */ new Map();
+  for (const property of Array.from(probe2.style)) {
+    styles.set(property, probe2.style.getPropertyValue(property).trim());
   }
   return styles;
 }
 function getActualStyleValue(el, property) {
-  if (property.startsWith("--")) {
-    return el.style?.getPropertyValue(property).trim() ?? "";
+  const computedStyles = el.ownerDocument.defaultView.getComputedStyle(el);
+  const actualValue = computedStyles.getPropertyValue(property).trim();
+  return resolveWholeValueCssVariable(actualValue, computedStyles);
+}
+function canonicalizeValue(probe2, property, value) {
+  probe2.style.cssText = "";
+  probe2.style.setProperty(property, value);
+  return probe2.style.getPropertyValue(property).trim() || value;
+}
+function resolveWholeValueCssVariable(value, computedStyles) {
+  const match = value.match(wholeValueCssVariablePattern);
+  if (!match) {
+    return value;
   }
-  return el.ownerDocument.defaultView.getComputedStyle(el).getPropertyValue(property).trim();
+  const [, variableName, fallbackValue] = match;
+  const resolvedValue = computedStyles.getPropertyValue(variableName).trim();
+  return resolvedValue || fallbackValue?.trim() || value;
 }
 export {
   toHaveStyle

package/build/vitest.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/toHaveStyle.ts"],"sourcesContent":["/** Supported style expectations for the matcher. */\nexport type StyleExpectation = string | Record<string, string | number>;\n\n/** Minimal subset of Vitest's matcher context used for error formatting. */\ntype MatcherContext = {\n  utils?: {\n    printExpected?: (value: unknown) => string;\n    printReceived?: (value: unknown) => string;\n  };\n};\n\n/** Standard matcher result shape returned to Vitest. */\ntype MatcherResult = {\n  pass: boolean;\n  message: () => string;\n};\n\n/**\n * Assert that an element's computed style matches the provided CSS declarations.\n *\n * Static class-based styles are read via `getComputedStyle`, while CSS custom\n * properties are read directly from the element's inline style because jsdom\n * does not resolve them through computed styles.\n */\nexport function toHaveStyle(this: MatcherContext, received: unknown, expected: StyleExpectation): MatcherResult {\n  if (!isElementLike(received)) {\n    return {\n      pass: false,\n      message: () => `expected an Element, received ${printValue(this, \"printReceived\", received)}`,\n    };\n  }\n\n  const expectedStyles = parseExpectedStyles(received, expected);\n  const mismatches: string[] = [];\n\n  for (const [property, expectedValue] of expectedStyles) {\n    const actualValue = getActualStyleValue(received, property);\n    if (actualValue !== expectedValue) {\n      mismatches.push(`${property}: expected ${expectedValue}, received ${actualValue || \"<empty>\"}`);\n    }\n  }\n\n  return {\n    pass: mismatches.length === 0,\n    message: () => {\n      const expectedLabel = printValue(this, \"printExpected\", expected);\n      return mismatches.length === 0\n        ? `expected element not to have style ${expectedLabel}`\n        : `expected element to have style ${expectedLabel}\\n${mismatches.join(\"\\n\")}`;\n    },\n  };\n}\n\n/** Format matcher values using Vitest's printers when available. */\nfunction printValue(ctx: MatcherContext, kind: \"printExpected\" | \"printReceived\", value: unknown): string {\n  return ctx.utils?.[kind]?.(value) ?? JSON.stringify(value);\n}\n\n/** Narrow an unknown matcher input to a DOM element-like object. */\nfunction isElementLike(value: unknown): value is {\n  ownerDocument: Document;\n  style?: CSSStyleDeclaration;\n} {\n  return (\n    typeof value === \"object\" &&\n    value !== null &&\n    \"ownerDocument\" in value &&\n    Boolean((value as { ownerDocument?: Document }).ownerDocument?.defaultView)\n  );\n}\n\n/** Convert camelCase property names into CSS kebab-case. */\nfunction toKebabCase(property: string): string {\n  return property.startsWith(\"--\") ? property : property.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);\n}\n\n/** Normalize the expected style input into concrete CSS property/value pairs. */\nfunction parseExpectedStyles(el: { ownerDocument: Document }, expected: StyleExpectation): Map<string, string> {\n  const probe = el.ownerDocument.createElement(\"div\");\n  const styles = new Map<string, string>();\n\n  if (typeof expected === \"string\") {\n    probe.setAttribute(\"style\", expected);\n  } else {\n    for (const [property, value] of Object.entries(expected)) {\n      probe.style.setProperty(toKebabCase(property), String(value));\n    }\n  }\n\n  for (const property of Array.from(probe.style)) {\n    styles.set(property, probe.style.getPropertyValue(property).trim());\n  }\n\n  return styles;\n}\n\n/** Read the current value for a CSS property from the element under test. */\nfunction getActualStyleValue(el: { style?: CSSStyleDeclaration; ownerDocument: Document }, property: string): string {\n  if (property.startsWith(\"--\")) {\n    return el.style?.getPropertyValue(property).trim() ?? \"\";\n  }\n\n  return el.ownerDocument.defaultView!.getComputedStyle(el as Element).getPropertyValue(property).trim();\n}\n"],"mappings":";AAwBO,SAAS,YAAkC,UAAmB,UAA2C;AAC9G,MAAI,CAAC,cAAc,QAAQ,GAAG;AAC5B,WAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS,MAAM,iCAAiC,WAAW,MAAM,iBAAiB,QAAQ,CAAC;AAAA,IAC7F;AAAA,EACF;AAEA,QAAM,iBAAiB,oBAAoB,UAAU,QAAQ;AAC7D,QAAM,aAAuB,CAAC;AAE9B,aAAW,CAAC,UAAU,aAAa,KAAK,gBAAgB;AACtD,UAAM,cAAc,oBAAoB,UAAU,QAAQ;AAC1D,QAAI,gBAAgB,eAAe;AACjC,iBAAW,KAAK,GAAG,QAAQ,cAAc,aAAa,cAAc,eAAe,SAAS,EAAE;AAAA,IAChG;AAAA,EACF;AAEA,SAAO;AAAA,IACL,MAAM,WAAW,WAAW;AAAA,IAC5B,SAAS,MAAM;AACb,YAAM,gBAAgB,WAAW,MAAM,iBAAiB,QAAQ;AAChE,aAAO,WAAW,WAAW,IACzB,sCAAsC,aAAa,KACnD,kCAAkC,aAAa;AAAA,EAAK,WAAW,KAAK,IAAI,CAAC;AAAA,IAC/E;AAAA,EACF;AACF;AAGA,SAAS,WAAW,KAAqB,MAAyC,OAAwB;AACxG,SAAO,IAAI,QAAQ,IAAI,IAAI,KAAK,KAAK,KAAK,UAAU,KAAK;AAC3D;AAGA,SAAS,cAAc,OAGrB;AACA,SACE,OAAO,UAAU,YACjB,UAAU,QACV,mBAAmB,SACnB,QAAS,MAAuC,eAAe,WAAW;AAE9E;AAGA,SAAS,YAAY,UAA0B;AAC7C,SAAO,SAAS,WAAW,IAAI,IAAI,WAAW,SAAS,QAAQ,UAAU,CAAC,SAAS,IAAI,KAAK,YAAY,CAAC,EAAE;AAC7G;AAGA,SAAS,oBAAoB,IAAiC,UAAiD;AAC7G,QAAM,QAAQ,GAAG,cAAc,cAAc,KAAK;AAClD,QAAM,SAAS,oBAAI,IAAoB;AAEvC,MAAI,OAAO,aAAa,UAAU;AAChC,UAAM,aAAa,SAAS,QAAQ;AAAA,EACtC,OAAO;AACL,eAAW,CAAC,UAAU,KAAK,KAAK,OAAO,QAAQ,QAAQ,GAAG;AACxD,YAAM,MAAM,YAAY,YAAY,QAAQ,GAAG,OAAO,KAAK,CAAC;AAAA,IAC9D;AAAA,EACF;AAEA,aAAW,YAAY,MAAM,KAAK,MAAM,KAAK,GAAG;AAC9C,WAAO,IAAI,UAAU,MAAM,MAAM,iBAAiB,QAAQ,EAAE,KAAK,CAAC;AAAA,EACpE;AAEA,SAAO;AACT;AAGA,SAAS,oBAAoB,IAA8D,UAA0B;AACnH,MAAI,SAAS,WAAW,IAAI,GAAG;AAC7B,WAAO,GAAG,OAAO,iBAAiB,QAAQ,EAAE,KAAK,KAAK;AAAA,EACxD;AAEA,SAAO,GAAG,cAAc,YAAa,iBAAiB,EAAa,EAAE,iBAAiB,QAAQ,EAAE,KAAK;AACvG;","names":[]}
+{"version":3,"sources":["../src/toHaveStyle.ts"],"sourcesContent":["/** Supported style expectations for the matcher. */\nexport type StyleExpectation = Record<string, string | number>;\n\n/** Minimal subset of Vitest's matcher context used for error formatting. */\ntype MatcherContext = {\n  utils?: {\n    printExpected?: (value: unknown) => string;\n    printReceived?: (value: unknown) => string;\n  };\n};\n\n/** Standard matcher result shape returned to Vitest. */\ntype MatcherResult = {\n  pass: boolean;\n  message: () => string;\n};\n\n/**\n * Match whole-value CSS variable references, i.e. `var(--color)` or\n * `var(--color, red)`.\n */\nconst wholeValueCssVariablePattern = /^var\\(\\s*(--[\\w-]+)\\s*(?:,\\s*(.+))?\\)$/;\n\nlet probe: HTMLDivElement | undefined;\n\n/**\n * Assert that an element's computed style matches the provided CSS declarations.\n *\n * This matcher is for asserting concrete CSS properties like `color` or\n * `margin-top`, not raw custom properties like `--color`.\n *\n * In jsdom, computed styles sometimes leave values as `var(--token)` instead of\n * resolving them. We follow those references so `expect(el).toHaveStyle({ color:\n * \"blue\" })` still works for class rules like `.color_var { color: var(--color) }`.\n */\nexport function toHaveStyle(this: MatcherContext, received: unknown, expected: StyleExpectation): MatcherResult {\n  if (!isElementLike(received)) {\n    return {\n      pass: false,\n      message: () => `expected an Element, received ${printValue(this, \"printReceived\", received)}`,\n    };\n  }\n\n  probe ??= received.ownerDocument.createElement(\"div\");\n\n  const expectedStyles = parseExpectedStyles(this, received, expected);\n  const mismatches: string[] = [];\n  for (const [property, expectedValue] of expectedStyles) {\n    const actualValue = canonicalizeValue(probe, property, getActualStyleValue(received, property));\n    const comparableExpectedValue = canonicalizeValue(probe, property, expectedValue);\n    if (actualValue !== comparableExpectedValue) {\n      mismatches.push(`${property}: expected ${comparableExpectedValue}, received ${actualValue || \"<empty>\"}`);\n    }\n  }\n\n  return {\n    pass: mismatches.length === 0,\n    message: () => {\n      const expectedLabel = printValue(this, \"printExpected\", expected);\n      return mismatches.length === 0\n        ? `expected element not to have style ${expectedLabel}`\n        : `expected element to have style ${expectedLabel}\\n${mismatches.join(\"\\n\")}`;\n    },\n  };\n}\n\n/** Format matcher values using Vitest's printers when available. */\nfunction printValue(ctx: MatcherContext, kind: \"printExpected\" | \"printReceived\", value: unknown): string {\n  return ctx.utils?.[kind]?.(value) ?? JSON.stringify(value);\n}\n\n/** Narrow an unknown matcher input to a DOM element-like object. */\nfunction isElementLike(value: unknown): value is {\n  ownerDocument: Document;\n} {\n  return (\n    typeof value === \"object\" &&\n    value !== null &&\n    \"ownerDocument\" in value &&\n    Boolean((value as { ownerDocument?: Document }).ownerDocument?.defaultView)\n  );\n}\n\n/** Convert camelCase property names into CSS kebab-case. */\nfunction toKebabCase(property: string): string {\n  return property.startsWith(\"--\") ? property : property.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);\n}\n\n/**\n * Normalize the expected style input into concrete CSS property/value pairs.\n *\n * Examples:\n * - `{ backgroundColor: \"#526675\" }` becomes `background-color: rgb(82, 102, 117)`\n *   so it compares cleanly with `getComputedStyle(...)`.\n * - `{ marginTop: 0 }` becomes `margin-top: 0px`/`0`, matching the browser's\n *   normalized CSS string output instead of the raw JS input.\n *\n * We do this by round-tripping through a real `CSSStyleDeclaration` on a probe\n * element instead of trying to hand-normalize CSS names and values ourselves.\n */\nfunction parseExpectedStyles(\n  ctx: MatcherContext,\n  el: { ownerDocument: Document },\n  expected: StyleExpectation,\n): Map<string, string> {\n  const probe = el.ownerDocument.createElement(\"div\");\n  for (const [property, value] of Object.entries(expected)) {\n    if (property.startsWith(\"--\")) {\n      throw new Error(\n        `toHaveStyle does not support custom property expectations like ${printValue(ctx, \"printExpected\", {\n          [property]: value,\n        })}; assert the custom property directly instead.`,\n      );\n    }\n    probe.style.setProperty(toKebabCase(property), String(value));\n  }\n  const styles = new Map<string, string>();\n  for (const property of Array.from(probe.style)) {\n    styles.set(property, probe.style.getPropertyValue(property).trim());\n  }\n  return styles;\n}\n\n/**\n * Read the current value for a CSS property from the element under test.\n *\n * We intentionally read through `getComputedStyle(...)` because the matcher is\n * asserting the final applied property value, not whether the element happens\n * to have an inline style entry.\n *\n * Examples:\n * - `<div class=\"df\" />` with `.df { display: flex }` should compare as\n *   `display: flex`, even though `el.style.display` is empty.\n * - `<div class=\"black\" />` with `.black { color: #353535 }` should compare as\n *   `color: rgb(53, 53, 53)`, matching the browser's computed value.\n * - `<div class=\"color_var\" style=\"--color: blue\" />` with\n *   `.color_var { color: var(--color) }` should compare as `color: blue`;\n *   jsdom often returns `var(--color)` here, so we resolve that indirection\n *   immediately after reading the computed value.\n */\nfunction getActualStyleValue(el: { style?: CSSStyleDeclaration; ownerDocument: Document }, property: string): string {\n  const computedStyles = el.ownerDocument.defaultView!.getComputedStyle(el as Element);\n  const actualValue = computedStyles.getPropertyValue(property).trim();\n  return resolveWholeValueCssVariable(actualValue, computedStyles);\n}\n\n/**\n * Canonicalize a property/value pair through CSSOM serialization so equivalent\n * forms like `rgb(...)` and `rgba(..., 1)` compare equal.\n */\nfunction canonicalizeValue(probe: HTMLElement, property: string, value: string): string {\n  probe.style.cssText = \"\";\n  probe.style.setProperty(property, value);\n  return probe.style.getPropertyValue(property).trim() || value;\n}\n\n/**\n * Resolve a whole-value `var(--token)` reference using the element's current\n * custom properties. jsdom leaves these unresolved in many computed values.\n *\n * This is intentionally a single-hop lookup for cases like\n * `.color_var { color: var(--color) }` plus `el.style.setProperty(\"--color\", \"blue\")`.\n */\nfunction resolveWholeValueCssVariable(value: string, computedStyles: CSSStyleDeclaration): string {\n  const match = value.match(wholeValueCssVariablePattern);\n  if (!match) {\n    return value;\n  }\n  const [, variableName, fallbackValue] = match;\n  const resolvedValue = computedStyles.getPropertyValue(variableName).trim();\n  return resolvedValue || fallbackValue?.trim() || value;\n}\n"],"mappings":"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","names":["probe"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/truss",
-  "version": "2.8.0",
+  "version": "2.8.2",
   "type": "module",
   "main": "build/index.js",
   "bin": "cli.js",