@homebound/truss 2.12.0 → 2.13.0

package/build/runtime.d.ts

@@ -15,6 +15,9 @@ type TrussStyleValue = string | [classNames: string, vars: Record<string, string
 /** A property-keyed style hash where each key owns one logical CSS property. */
 type TrussCustomClassNameValue = string | ReadonlyArray<string | false | null | undefined>;
 type TrussStyleHash = Record<string, TrussStyleValue | TrussCustomClassNameValue>;
+type RuntimeStyleDeclarationValue = string | number | null | undefined;
+type RuntimeStyleDeclarations = Record<string, RuntimeStyleDeclarationValue | Record<string, unknown>>;
+type RuntimeStyleCss = Record<string, RuntimeStyleDeclarations | string>;
 /** Merge one or more Truss style hashes into `{ className, style?, data-truss-src? }`. */
 declare function trussProps(...hashes: ReadonlyArray<TrussStyleHash | false | null | undefined>): Record<string, unknown>;
 /** Merge explicit className/style with Truss style hashes. */
@@ -25,5 +28,43 @@ declare function mergeProps(explicitClassName: string | undefined, explicitStyle
  * In browser dev mode, CSS is served via the Vite virtual endpoint instead.
  */
 declare function __injectTrussCSS(cssText: string): void;
+interface RuntimeStyleProps {
+    css: RuntimeStyleCss;
+}
+/**
+ * Inject dynamic or selector-based CSS at runtime into a transient `<style>` tag.
+ *
+ * This is the runtime counterpart to `.css.ts` files:
+ * - use `.css.ts` for static/global arbitrary selectors that should be baked into the build output
+ * - use `RuntimeStyle` for selectors that depend on runtime values or should only exist while a component is mounted
+ *
+ * Example with a flat `Css` expression:
+ * ```tsx
+ * <RuntimeStyle
+ *   css={{
+ *     ".preview a": Css.blue.$,
+ *   }}
+ * />
+ * ```
+ *
+ * Example with raw CSS via `Css.raw`:
+ * ```tsx
+ * <RuntimeStyle
+ *   css={{
+ *     ".preview code": Css.raw`
+ *       font-variant-ligatures: none;
+ *       text-decoration: underline;
+ *     `,
+ *   }}
+ * />
+ * ```
+ *
+ * The injected `<style>` element is appended on mount and removed on unmount.
+ *
+ * Note: Only flat `Css.*.$` expressions are supported here; selector/marker helpers like
+ * `onHover`, `when`, `ifSm`, `ifContainer`, `element`, and `className()` are rejected
+ * at runtime.
+ */
+declare function RuntimeStyle(props: RuntimeStyleProps): null;
 
-export { type TrussCustomClassNameValue, TrussDebugInfo, type TrussStyleHash, type TrussStyleValue, __injectTrussCSS, mergeProps, trussProps };
+export { RuntimeStyle, type RuntimeStyleCss, type RuntimeStyleDeclarationValue, type RuntimeStyleDeclarations, type RuntimeStyleProps, type TrussCustomClassNameValue, TrussDebugInfo, type TrussStyleHash, type TrussStyleValue, __injectTrussCSS, mergeProps, trussProps };

package/build/runtime.js

@@ -1,4 +1,5 @@
 // src/runtime.ts
+import { useInsertionEffect } from "react";
 var TrussDebugInfo = class {
   /** I.e. `"FileName.tsx:line"` */
   src;
@@ -88,6 +89,61 @@ function __injectTrussCSS(cssText) {
   injectedChunks.add(cssText);
   style.textContent = (style.textContent ?? "") + cssText;
 }
+function RuntimeStyle(props) {
+  const cssText = buildRuntimeStyleCssText(props.css);
+  useInsertionEffect(() => {
+    if (typeof document === "undefined" || cssText.length === 0) return;
+    const style = document.createElement("style");
+    style.setAttribute("data-truss-runtime-style", "");
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return () => style.remove();
+  }, [cssText]);
+  return null;
+}
+function buildRuntimeStyleCssText(css) {
+  const rules = [];
+  for (const [selector, value] of Object.entries(css)) {
+    if (typeof value === "string") {
+      rules.push(formatRawRuntimeStyleRule(selector, value));
+    } else {
+      rules.push(formatRuntimeStyleRule(selector, value));
+    }
+  }
+  return rules.join("\n\n");
+}
+function formatRawRuntimeStyleRule(selector, raw) {
+  const trimmed = raw.trim();
+  if (!trimmed) return `${selector} {}`;
+  const body = trimmed.split("\n").map((line) => `  ${line.trim()}`).filter((line) => line.trim().length > 0).join("\n");
+  return `${selector} {
+${body}
+}`;
+}
+function formatRuntimeStyleRule(selector, declarations) {
+  const lines = [];
+  for (const [property, value] of Object.entries(declarations)) {
+    if (value === void 0 || value === null) continue;
+    if (typeof value !== "string" && typeof value !== "number") {
+      throw new Error(runtimeStyleUnsupportedValueMessage(selector, property));
+    }
+    lines.push(`  ${camelToKebabRuntime(property)}: ${String(value)};`);
+  }
+  if (lines.length === 0) return `${selector} {}`;
+  return `${selector} {
+${lines.join("\n")}
+}`;
+}
+function runtimeStyleUnsupportedValueMessage(selector, property) {
+  return `RuntimeStyle selector \`${selector}\` has an unsupported nested value for \`${property}\`. Only flat Css expressions can be used here; selector/marker/className helpers like onHover, when, ifSm, ifContainer, element, and className() are not supported.`;
+}
+function camelToKebabRuntime(property) {
+  return property.replace(/^(Webkit|Moz|Ms|O)/, function prefixToCss(prefix) {
+    return `-${prefix.toLowerCase()}`;
+  }).replace(/[A-Z]/g, function upperToCss(letter) {
+    return `-${letter.toLowerCase()}`;
+  });
+}
 function assertValidTrussStyleValue(key, value) {
   if (typeof value === "string") return;
   if (Array.isArray(value) && typeof value[0] === "string") {
@@ -131,6 +187,7 @@ function getOrCreateTrussStyleElement() {
   return trussStyleElement;
 }
 export {
+  RuntimeStyle,
   TrussDebugInfo,
   __injectTrussCSS,
   mergeProps,

package/build/runtime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/runtime.ts"],"sourcesContent":["/** A compact source label for a Truss CSS expression, used in debug mode. */\nexport class TrussDebugInfo {\n  /** I.e. `\"FileName.tsx:line\"` */\n  readonly src: string;\n\n  constructor(src: string) {\n    this.src = src;\n  }\n}\n\n/**\n * Space-separated atomic class names, or a variable tuple with class names + CSS variable map.\n *\n * In debug mode, the transform appends a TrussDebugInfo as an extra tuple element:\n * - static with debug: `[classNames, debugInfo]`\n * - variable with debug: `[classNames, vars, debugInfo]`\n */\nexport type TrussStyleValue =\n  | string\n  | [classNames: string, vars: Record<string, string>]\n  | [classNames: string, debugInfo: TrussDebugInfo]\n  | [classNames: string, vars: Record<string, string>, debugInfo: TrussDebugInfo];\n\n/** A property-keyed style hash where each key owns one logical CSS property. */\nexport type TrussCustomClassNameValue = string | ReadonlyArray<string | false | null | undefined>;\nexport type TrussStyleHash = Record<string, TrussStyleValue | TrussCustomClassNameValue>;\n\nconst shouldValidateTrussStyleValues = resolveShouldValidateTrussStyleValues();\nconst TRUSS_CSS_CHUNKS = \"__trussCssChunks__\";\nlet trussStyleElement: TrussStyleElement | null = null;\n\n/** Merge one or more Truss style hashes into `{ className, style?, data-truss-src? }`. */\nexport function trussProps(\n  ...hashes: ReadonlyArray<TrussStyleHash | false | null | undefined>\n): Record<string, unknown> {\n  const merged: Record<string, TrussStyleValue> = {};\n\n  for (const hash of hashes) {\n    if (!hash || typeof hash !== \"object\") continue;\n    Object.assign(merged, hash);\n  }\n\n  const classNames: string[] = [];\n  const inlineStyle: Record<string, string> = {};\n  const debugSources: string[] = [];\n\n  for (const [key, value] of Object.entries(merged)) {\n    // __marker is a special key — its value is a marker class name, not a CSS property\n    if (key === \"__marker\") {\n      if (typeof value === \"string\") {\n        classNames.push(value);\n      }\n      continue;\n    }\n\n    if (key.startsWith(\"className_\")) {\n      // I.e. plugin-emitted raw class names that should flow straight into the final prop.\n      appendCustomClassNames(classNames, value);\n      continue;\n    }\n\n    if (shouldValidateTrussStyleValues) assertValidTrussStyleValue(key, value);\n\n    if (typeof value === \"string\") {\n      // I.e. \"df\" or \"black blue_h\"\n      classNames.push(value);\n      continue;\n    }\n\n    // Tuple: [classNames, varsOrDebug?, maybeDebug?]\n    classNames.push(value[0]);\n\n    for (let i = 1; i < value.length; i++) {\n      const el = value[i];\n      if (el instanceof TrussDebugInfo) {\n        debugSources.push(el.src);\n      } else if (typeof el === \"object\" && el !== null) {\n        Object.assign(inlineStyle, el);\n      }\n    }\n  }\n\n  const props: Record<string, unknown> = {\n    className: classNames.join(\" \"),\n  };\n\n  if (Object.keys(inlineStyle).length > 0) {\n    props.style = inlineStyle;\n  }\n\n  if (debugSources.length > 0) {\n    props[\"data-truss-src\"] = [...new Set(debugSources)].join(\"; \");\n  }\n\n  return props;\n}\n\nfunction appendCustomClassNames(classNames: string[], value: unknown): void {\n  if (typeof value === \"string\") {\n    // I.e. `className_button: \"button\"`\n    classNames.push(value);\n    return;\n  }\n\n  if (!Array.isArray(value)) return;\n  for (const entry of value) {\n    if (typeof entry === \"string\") {\n      // I.e. `className_button: [\"button\", cond && \"selected\"]`\n      classNames.push(entry);\n    }\n  }\n}\n\n/** Merge explicit className/style with Truss style hashes. */\nexport function mergeProps(\n  explicitClassName: string | undefined,\n  explicitStyle: Record<string, unknown> | undefined,\n  ...hashes: ReadonlyArray<TrussStyleHash | false | null | undefined>\n): Record<string, unknown> {\n  const result = trussProps(...hashes);\n\n  if (explicitClassName) {\n    result.className = `${explicitClassName} ${result.className ?? \"\"}`.trim();\n  }\n\n  if (explicitStyle) {\n    result.style = { ...explicitStyle, ...(result.style as Record<string, unknown> | undefined) };\n  }\n\n  return result;\n}\n\n/**\n * Inject CSS text into the document for jsdom/test environments.\n *\n * In browser dev mode, CSS is served via the Vite virtual endpoint instead.\n */\nexport function __injectTrussCSS(cssText: string): void {\n  if (typeof document === \"undefined\" || cssText.length === 0) return;\n\n  const style = getOrCreateTrussStyleElement();\n\n  // Track exact injected chunks on the style node so repeated execution of the\n  // test bootstrap or transformed modules does not append duplicate CSS text.\n  const injectedChunks = (style[TRUSS_CSS_CHUNKS] ??= new Set<string>());\n  if (injectedChunks.has(cssText) || style.textContent?.includes(cssText)) {\n    injectedChunks.add(cssText);\n    return;\n  }\n\n  injectedChunks.add(cssText);\n  style.textContent = (style.textContent ?? \"\") + cssText;\n}\n\n/** Fail fast when `trussProps` receives a non-Truss style value. */\nfunction assertValidTrussStyleValue(key: string, value: unknown): asserts value is TrussStyleValue {\n  if (typeof value === \"string\") return;\n  if (Array.isArray(value) && typeof value[0] === \"string\") {\n    for (let i = 1; i < value.length; i++) {\n      const el = value[i];\n      if (el instanceof TrussDebugInfo) continue;\n      if (typeof el === \"object\" && el !== null && !Array.isArray(el)) continue;\n      throw new TypeError(invalidTrussStyleValueMessage(key));\n    }\n    return;\n  }\n  throw new TypeError(invalidTrussStyleValueMessage(key));\n}\n\nfunction invalidTrussStyleValueMessage(key: string): string {\n  return `Invalid Truss style value for \\`${key}\\`. trussProps only accepts generated Truss style hashes; use mergeProps for explicit className/style merging.`;\n}\n\n/** Enable validation in dev/test environments, but skip it in production. */\nfunction resolveShouldValidateTrussStyleValues(): boolean {\n  if (typeof process !== \"undefined\" && typeof process.env.NODE_ENV === \"string\") {\n    return process.env.NODE_ENV !== \"production\";\n  }\n  const viteEnv = (import.meta as ImportMeta & { env?: { DEV?: boolean; PROD?: boolean } }).env;\n  if (typeof viteEnv?.DEV === \"boolean\") {\n    return viteEnv.DEV;\n  }\n  if (typeof viteEnv?.PROD === \"boolean\") {\n    return !viteEnv.PROD;\n  }\n  return false;\n}\n\nfunction getOrCreateTrussStyleElement(): TrussStyleElement {\n  const id = \"data-truss\";\n  if (trussStyleElement?.ownerDocument === document && trussStyleElement.isConnected) {\n    return trussStyleElement;\n  }\n\n  const style = (document.querySelector(`style[${id}]`) as TrussStyleElement | null) ?? document.createElement(\"style\");\n  if (!style.isConnected) {\n    style.setAttribute(id, \"\");\n    document.head.appendChild(style);\n  }\n  trussStyleElement = style;\n  return trussStyleElement;\n}\n\ntype TrussStyleElement = HTMLStyleElement & {\n  [TRUSS_CSS_CHUNKS]?: Set<string>;\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/runtime.ts"],"sourcesContent":["import { useInsertionEffect } from \"react\";\n\n/** A compact source label for a Truss CSS expression, used in debug mode. */\nexport class TrussDebugInfo {\n  /** I.e. `\"FileName.tsx:line\"` */\n  readonly src: string;\n\n  constructor(src: string) {\n    this.src = src;\n  }\n}\n\n/**\n * Space-separated atomic class names, or a variable tuple with class names + CSS variable map.\n *\n * In debug mode, the transform appends a TrussDebugInfo as an extra tuple element:\n * - static with debug: `[classNames, debugInfo]`\n * - variable with debug: `[classNames, vars, debugInfo]`\n */\nexport type TrussStyleValue =\n  | string\n  | [classNames: string, vars: Record<string, string>]\n  | [classNames: string, debugInfo: TrussDebugInfo]\n  | [classNames: string, vars: Record<string, string>, debugInfo: TrussDebugInfo];\n\n/** A property-keyed style hash where each key owns one logical CSS property. */\nexport type TrussCustomClassNameValue = string | ReadonlyArray<string | false | null | undefined>;\nexport type TrussStyleHash = Record<string, TrussStyleValue | TrussCustomClassNameValue>;\nexport type RuntimeStyleDeclarationValue = string | number | null | undefined;\nexport type RuntimeStyleDeclarations = Record<string, RuntimeStyleDeclarationValue | Record<string, unknown>>;\nexport type RuntimeStyleCss = Record<string, RuntimeStyleDeclarations | string>;\n\nconst shouldValidateTrussStyleValues = resolveShouldValidateTrussStyleValues();\nconst TRUSS_CSS_CHUNKS = \"__trussCssChunks__\";\nlet trussStyleElement: TrussStyleElement | null = null;\n\n/** Merge one or more Truss style hashes into `{ className, style?, data-truss-src? }`. */\nexport function trussProps(\n  ...hashes: ReadonlyArray<TrussStyleHash | false | null | undefined>\n): Record<string, unknown> {\n  const merged: Record<string, TrussStyleValue> = {};\n\n  for (const hash of hashes) {\n    if (!hash || typeof hash !== \"object\") continue;\n    Object.assign(merged, hash);\n  }\n\n  const classNames: string[] = [];\n  const inlineStyle: Record<string, string> = {};\n  const debugSources: string[] = [];\n\n  for (const [key, value] of Object.entries(merged)) {\n    // __marker is a special key — its value is a marker class name, not a CSS property\n    if (key === \"__marker\") {\n      if (typeof value === \"string\") {\n        classNames.push(value);\n      }\n      continue;\n    }\n\n    if (key.startsWith(\"className_\")) {\n      // I.e. plugin-emitted raw class names that should flow straight into the final prop.\n      appendCustomClassNames(classNames, value);\n      continue;\n    }\n\n    if (shouldValidateTrussStyleValues) assertValidTrussStyleValue(key, value);\n\n    if (typeof value === \"string\") {\n      // I.e. \"df\" or \"black blue_h\"\n      classNames.push(value);\n      continue;\n    }\n\n    // Tuple: [classNames, varsOrDebug?, maybeDebug?]\n    classNames.push(value[0]);\n\n    for (let i = 1; i < value.length; i++) {\n      const el = value[i];\n      if (el instanceof TrussDebugInfo) {\n        debugSources.push(el.src);\n      } else if (typeof el === \"object\" && el !== null) {\n        Object.assign(inlineStyle, el);\n      }\n    }\n  }\n\n  const props: Record<string, unknown> = {\n    className: classNames.join(\" \"),\n  };\n\n  if (Object.keys(inlineStyle).length > 0) {\n    props.style = inlineStyle;\n  }\n\n  if (debugSources.length > 0) {\n    props[\"data-truss-src\"] = [...new Set(debugSources)].join(\"; \");\n  }\n\n  return props;\n}\n\nfunction appendCustomClassNames(classNames: string[], value: unknown): void {\n  if (typeof value === \"string\") {\n    // I.e. `className_button: \"button\"`\n    classNames.push(value);\n    return;\n  }\n\n  if (!Array.isArray(value)) return;\n  for (const entry of value) {\n    if (typeof entry === \"string\") {\n      // I.e. `className_button: [\"button\", cond && \"selected\"]`\n      classNames.push(entry);\n    }\n  }\n}\n\n/** Merge explicit className/style with Truss style hashes. */\nexport function mergeProps(\n  explicitClassName: string | undefined,\n  explicitStyle: Record<string, unknown> | undefined,\n  ...hashes: ReadonlyArray<TrussStyleHash | false | null | undefined>\n): Record<string, unknown> {\n  const result = trussProps(...hashes);\n\n  if (explicitClassName) {\n    result.className = `${explicitClassName} ${result.className ?? \"\"}`.trim();\n  }\n\n  if (explicitStyle) {\n    result.style = { ...explicitStyle, ...(result.style as Record<string, unknown> | undefined) };\n  }\n\n  return result;\n}\n\n/**\n * Inject CSS text into the document for jsdom/test environments.\n *\n * In browser dev mode, CSS is served via the Vite virtual endpoint instead.\n */\nexport function __injectTrussCSS(cssText: string): void {\n  if (typeof document === \"undefined\" || cssText.length === 0) return;\n\n  const style = getOrCreateTrussStyleElement();\n\n  // Track exact injected chunks on the style node so repeated execution of the\n  // test bootstrap or transformed modules does not append duplicate CSS text.\n  const injectedChunks = (style[TRUSS_CSS_CHUNKS] ??= new Set<string>());\n  if (injectedChunks.has(cssText) || style.textContent?.includes(cssText)) {\n    injectedChunks.add(cssText);\n    return;\n  }\n\n  injectedChunks.add(cssText);\n  style.textContent = (style.textContent ?? \"\") + cssText;\n}\n\nexport interface RuntimeStyleProps {\n  css: RuntimeStyleCss;\n}\n\n/**\n * Inject dynamic or selector-based CSS at runtime into a transient `<style>` tag.\n *\n * This is the runtime counterpart to `.css.ts` files:\n * - use `.css.ts` for static/global arbitrary selectors that should be baked into the build output\n * - use `RuntimeStyle` for selectors that depend on runtime values or should only exist while a component is mounted\n *\n * Example with a flat `Css` expression:\n * ```tsx\n * <RuntimeStyle\n *   css={{\n *     \".preview a\": Css.blue.$,\n *   }}\n * />\n * ```\n *\n * Example with raw CSS via `Css.raw`:\n * ```tsx\n * <RuntimeStyle\n *   css={{\n *     \".preview code\": Css.raw`\n *       font-variant-ligatures: none;\n *       text-decoration: underline;\n *     `,\n *   }}\n * />\n * ```\n *\n * The injected `<style>` element is appended on mount and removed on unmount.\n *\n * Note: Only flat `Css.*.$` expressions are supported here; selector/marker helpers like\n * `onHover`, `when`, `ifSm`, `ifContainer`, `element`, and `className()` are rejected\n * at runtime.\n */\nexport function RuntimeStyle(props: RuntimeStyleProps): null {\n  const cssText = buildRuntimeStyleCssText(props.css);\n  useInsertionEffect(() => {\n    if (typeof document === \"undefined\" || cssText.length === 0) return;\n    const style = document.createElement(\"style\");\n    style.setAttribute(\"data-truss-runtime-style\", \"\");\n    style.textContent = cssText;\n    document.head.appendChild(style);\n    return () => style.remove();\n  }, [cssText]);\n  return null;\n}\n\n/** Serialize RuntimeStyle rules into CSS text for a transient `<style>` tag. */\nfunction buildRuntimeStyleCssText(css: RuntimeStyleCss): string {\n  const rules: string[] = [];\n  for (const [selector, value] of Object.entries(css)) {\n    if (typeof value === \"string\") {\n      rules.push(formatRawRuntimeStyleRule(selector, value));\n    } else {\n      rules.push(formatRuntimeStyleRule(selector, value));\n    }\n  }\n  return rules.join(\"\\n\\n\");\n}\n\nfunction formatRawRuntimeStyleRule(selector: string, raw: string): string {\n  const trimmed = raw.trim();\n  if (!trimmed) return `${selector} {}`;\n  const body = trimmed\n    .split(\"\\n\")\n    .map((line) => `  ${line.trim()}`)\n    .filter((line) => line.trim().length > 0)\n    .join(\"\\n\");\n  return `${selector} {\\n${body}\\n}`;\n}\n\nfunction formatRuntimeStyleRule(selector: string, declarations: RuntimeStyleDeclarations): string {\n  const lines: string[] = [];\n  for (const [property, value] of Object.entries(declarations)) {\n    if (value === undefined || value === null) continue;\n    if (typeof value !== \"string\" && typeof value !== \"number\") {\n      throw new Error(runtimeStyleUnsupportedValueMessage(selector, property));\n    }\n    lines.push(`  ${camelToKebabRuntime(property)}: ${String(value)};`);\n  }\n  if (lines.length === 0) return `${selector} {}`;\n  return `${selector} {\\n${lines.join(\"\\n\")}\\n}`;\n}\n\nfunction runtimeStyleUnsupportedValueMessage(selector: string, property: string): string {\n  return `RuntimeStyle selector \\`${selector}\\` has an unsupported nested value for \\`${property}\\`. Only flat Css expressions can be used here; selector/marker/className helpers like onHover, when, ifSm, ifContainer, element, and className() are not supported.`;\n}\n\nfunction camelToKebabRuntime(property: string): string {\n  return property\n    .replace(/^(Webkit|Moz|Ms|O)/, function prefixToCss(prefix) {\n      return `-${prefix.toLowerCase()}`;\n    })\n    .replace(/[A-Z]/g, function upperToCss(letter) {\n      return `-${letter.toLowerCase()}`;\n    });\n}\n\n/** Fail fast when `trussProps` receives a non-Truss style value. */\nfunction assertValidTrussStyleValue(key: string, value: unknown): asserts value is TrussStyleValue {\n  if (typeof value === \"string\") return;\n  if (Array.isArray(value) && typeof value[0] === \"string\") {\n    for (let i = 1; i < value.length; i++) {\n      const el = value[i];\n      if (el instanceof TrussDebugInfo) continue;\n      if (typeof el === \"object\" && el !== null && !Array.isArray(el)) continue;\n      throw new TypeError(invalidTrussStyleValueMessage(key));\n    }\n    return;\n  }\n  throw new TypeError(invalidTrussStyleValueMessage(key));\n}\n\nfunction invalidTrussStyleValueMessage(key: string): string {\n  return `Invalid Truss style value for \\`${key}\\`. trussProps only accepts generated Truss style hashes; use mergeProps for explicit className/style merging.`;\n}\n\n/** Enable validation in dev/test environments, but skip it in production. */\nfunction resolveShouldValidateTrussStyleValues(): boolean {\n  if (typeof process !== \"undefined\" && typeof process.env.NODE_ENV === \"string\") {\n    return process.env.NODE_ENV !== \"production\";\n  }\n  const viteEnv = (import.meta as ImportMeta & { env?: { DEV?: boolean; PROD?: boolean } }).env;\n  if (typeof viteEnv?.DEV === \"boolean\") {\n    return viteEnv.DEV;\n  }\n  if (typeof viteEnv?.PROD === \"boolean\") {\n    return !viteEnv.PROD;\n  }\n  return false;\n}\n\nfunction getOrCreateTrussStyleElement(): TrussStyleElement {\n  const id = \"data-truss\";\n  if (trussStyleElement?.ownerDocument === document && trussStyleElement.isConnected) {\n    return trussStyleElement;\n  }\n\n  const style = (document.querySelector(`style[${id}]`) as TrussStyleElement | null) ?? document.createElement(\"style\");\n  if (!style.isConnected) {\n    style.setAttribute(id, \"\");\n    document.head.appendChild(style);\n  }\n  trussStyleElement = style;\n  return trussStyleElement;\n}\n\ntype TrussStyleElement = HTMLStyleElement & {\n  [TRUSS_CSS_CHUNKS]?: Set<string>;\n};\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/truss",
-  "version": "2.12.0",
+  "version": "2.13.0",
   "type": "module",
   "main": "build/index.js",
   "bin": "cli.js",
@@ -41,11 +41,16 @@
     "jiti": "^2.6.1",
     "ts-poet": "^6.12.0"
   },
+  "peerDependencies": {
+    "react": ">=18"
+  },
   "devDependencies": {
     "@homebound/tsconfig": "^1.1.1",
     "@types/babel__generator": "^7.27.0",
     "@types/babel__traverse": "^7.28.0",
     "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
+    "react": "^19.2.4",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.0"