@homebound/truss 2.24.0 → 2.25.0

package/build/css-custom-property-B-Ncwzgt.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Utilities for CSS custom properties (`--token`) in Truss style values.
+ */
+/**
+ * If `value` is a custom property name (`--token`), wrap as `var(--token)` for use as a property value.
+ * Passes through values that are not custom-property names (including existing `var(...)`).
+ */
+declare function maybeCssVar<T>(value: T): T;
+
+export { maybeCssVar as m };

package/build/index.d.ts

@@ -1,5 +1,6 @@
 import { Properties } from 'csstype';
 import { Code } from 'ts-poet';
+export { m as maybeCssVar } from './css-custom-property-B-Ncwzgt.js';
 
 /**
  * A map from human name to font size, i.e. `f12` -> `12px`.

package/build/index.js

@@ -1078,6 +1078,17 @@ type Opts<T> = {
   elseApplied: boolean,
 };
 
+/** Wraps \`--token\` custom property names as \`var(--token)\` for CSS property values. */
+function maybeCssVar<T>(value: T): T {
+  if (typeof value !== "string") return value;
+  if (value.startsWith("--")) return \`var(\${value})\` as T;
+  return value;
+}
+
+function maybeCssVarValues<O extends Record<string, unknown>>(obj: O): O {
+  return Object.fromEntries(Object.entries(obj).map(([key, val]) => [key, maybeCssVar(val)])) as O;
+}
+
 function invertMediaQuery(query: string): string {
   const screenPrefix = "@media screen and ";
   if (query.startsWith(screenPrefix)) {
@@ -1174,7 +1185,10 @@ class CssBuilder<T extends Properties> {
   add<K extends keyof Properties>(prop: K, value: Properties[K]): CssBuilder<T & { [U in K]: Properties[K] }>;
   add<K extends keyof Properties>(propOrProperties: K | Properties, value?: Properties[K]): CssBuilder<any> {
     if (!this.enabled) return this;
-    const newRules = typeof propOrProperties === "string" ?  { [propOrProperties]: value } : propOrProperties;
+    const newRules =
+      typeof propOrProperties === "string"
+        ? { [propOrProperties]: maybeCssVar(value) }
+        : maybeCssVarValues(propOrProperties as Record<string, unknown>);
     if (typeof propOrProperties !== "string" && (newRules as any).$css) {
       throw new Error("add() received a Css expression — use with() to compose Css expressions");
     }
@@ -1189,7 +1203,7 @@ class CssBuilder<T extends Properties> {
   with(cssProp: Properties): CssBuilder<any> {
     if (!this.enabled) return this;
     const { $css, ...rest } = cssProp as any;
-    const filtered = omitUndefinedValues(rest);
+    const filtered = maybeCssVarValues(omitUndefinedValues(rest));
     const rules = this.selector
       ? { ...this.rules, [this.selector]: { ...(this.rules as any)[this.selector], ...filtered } }
       : { ...this.rules, ...filtered };
@@ -1504,7 +1518,10 @@ class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"> {
   add<K extends keyof Properties>(propOrStyles: K | Properties, value?: Properties[K]): CssBuilder<any, S> {
     if (!this.enabled) return this;
 
-    const newRules = typeof propOrStyles === "string" ? { [propOrStyles]: value } : propOrStyles;
+    const newRules =
+      typeof propOrStyles === "string"
+        ? { [propOrStyles]: maybeCssVar(value) }
+        : maybeCssVarValues(propOrStyles as Record<string, unknown>);
     if (typeof propOrStyles !== "string" && (newRules as any).$css) {
       throw new Error("add() received a Css expression — use with() to compose Css expressions");
     }
@@ -1519,7 +1536,7 @@ class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"> {
   with(cssProp: Properties): CssBuilder<any, S> {
     if (!this.enabled) return this;
     const { $css, ...rest } = cssProp as any;
-    const filtered = omitUndefinedValues(rest);
+    const filtered = maybeCssVarValues(omitUndefinedValues(rest));
     const rules = this.selector
       ? { ...this.rules, [this.selector]: { ...(this.rules as any)[this.selector], ...filtered } }
       : { ...this.rules, ...filtered };
@@ -1577,6 +1594,17 @@ export function maybeInc(inc: number | string): string {
   return typeof inc === "string" ? inc : \`calc(var(${SPACING_CUSTOM_PROPERTY}) * \${inc})\`;
 }
 
+/** Wraps \`--token\` custom property names as \`var(--token)\` for CSS property values. */
+export function maybeCssVar<T>(value: T): T {
+  if (typeof value !== "string") return value;
+  if (value.startsWith("--")) return \`var(\${value})\` as T;
+  return value;
+}
+
+function maybeCssVarValues<O extends Record<string, unknown>>(obj: O): O {
+  return Object.fromEntries(Object.entries(obj).map(([key, val]) => [key, maybeCssVar(val)])) as O;
+}
+
 /** Converts \`inc\` into pixels. */
 export function increment(inc: number): number {
   return inc * ${increment};
@@ -1713,12 +1741,20 @@ function condensedJson(mapping) {
   lines.push("}");
   return lines.join("\n");
 }
+
+// src/css-custom-property.ts
+function maybeCssVar(value) {
+  if (typeof value !== "string") return value;
+  if (value.startsWith("--")) return `var(${value})`;
+  return value;
+}
 export {
   SPACING_CUSTOM_PROPERTY,
   defaultSections,
   defineConfig,
   generate,
   incrementCssValue,
+  maybeCssVar,
   newAliasesMethods,
   newCoreIncrementMethods,
   newIncrementMethods,