@homebound/truss 2.5.1 → 2.6.1

package/build/vitest.d.ts

@@ -0,0 +1,33 @@
+/** Supported style expectations for the matcher. */
+type StyleExpectation = string | Record<string, string | number>;
+/** Minimal subset of Vitest's matcher context used for error formatting. */
+type MatcherContext = {
+    utils?: {
+        printExpected?: (value: unknown) => string;
+        printReceived?: (value: unknown) => string;
+    };
+};
+/** Standard matcher result shape returned to Vitest. */
+type MatcherResult = {
+    pass: boolean;
+    message: () => string;
+};
+/**
+ * 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.
+ */
+declare function toHaveStyle(this: MatcherContext, received: unknown, expected: StyleExpectation): MatcherResult;
+
+declare module "vitest" {
+    interface Assertion<T = any> {
+        toHaveStyle(expected: StyleExpectation): T;
+    }
+    interface AsymmetricMatchersContaining {
+        toHaveStyle(expected: StyleExpectation): void;
+    }
+}
+
+export { type StyleExpectation, toHaveStyle };

package/build/vitest.js

@@ -0,0 +1,59 @@
+// src/toHaveStyle.ts
+function toHaveStyle(received, expected) {
+  if (!isElementLike(received)) {
+    return {
+      pass: false,
+      message: () => `expected an Element, received ${printValue(this, "printReceived", received)}`
+    };
+  }
+  const expectedStyles = parseExpectedStyles(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>"}`);
+    }
+  }
+  return {
+    pass: mismatches.length === 0,
+    message: () => {
+      const expectedLabel = printValue(this, "printExpected", expected);
+      return mismatches.length === 0 ? `expected element not to have style ${expectedLabel}` : `expected element to have style ${expectedLabel}
+${mismatches.join("\n")}`;
+    }
+  };
+}
+function printValue(ctx, kind, value) {
+  return ctx.utils?.[kind]?.(value) ?? JSON.stringify(value);
+}
+function isElementLike(value) {
+  return typeof value === "object" && value !== null && "ownerDocument" in value && Boolean(value.ownerDocument?.defaultView);
+}
+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));
+    }
+  }
+  for (const property of Array.from(probe.style)) {
+    styles.set(property, probe.style.getPropertyValue(property).trim());
+  }
+  return styles;
+}
+function getActualStyleValue(el, property) {
+  if (property.startsWith("--")) {
+    return el.style?.getPropertyValue(property).trim() ?? "";
+  }
+  return el.ownerDocument.defaultView.getComputedStyle(el).getPropertyValue(property).trim();
+}
+export {
+  toHaveStyle
+};
+//# sourceMappingURL=vitest.js.map

package/build/vitest.js.map

@@ -0,0 +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":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/truss",
-  "version": "2.5.1",
+  "version": "2.6.1",
   "type": "module",
   "main": "build/index.js",
   "bin": "cli.js",
@@ -19,6 +19,11 @@
       "types": "./build/runtime.d.ts",
       "import": "./build/runtime.js",
       "default": "./build/runtime.js"
+    },
+    "./vitest": {
+      "types": "./build/vitest.d.ts",
+      "import": "./build/vitest.js",
+      "default": "./build/vitest.js"
     }
   },
   "scripts": {

package/tsup.config.ts

@@ -5,6 +5,7 @@ export default defineConfig({
     index: "src/index.ts",
     "plugin/index": "src/plugin/index.ts",
     runtime: "src/runtime.ts",
+    vitest: "src/vitest.ts",
   },
   format: ["esm"],
   dts: true,