@homebound/truss 2.23.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`.
@@ -263,12 +264,24 @@ type IncConfig = [string, Prop | Prop[]];
 declare function newIncrementMethods(config: Config, abbr: UtilityName, prop: Prop | Prop[], opts?: {
     auto?: boolean;
 }): UtilityMethod[];
-/**
- * Creates just the core `<abbr>X` utility methods that set `props` with each increment value.
- *
- * See `newIncrementMethods` for handling the `<abbr>Px`, `<abbr>a`, and `<attr>(value)` methods.
- */
 declare function newCoreIncrementMethods(config: Config, abbr: UtilityName, props: Prop[]): UtilityMethod[];
 declare function newPxMethod(abbr: UtilityName, prop: Prop): UtilityMethod;
 
-export { type Aliases, type Config, type CreateMethodsFn, type FontConfig, type IncConfig, type SectionName, type Sections, type TokenRegistry, type UtilityMethod, type UtilityName, type WebEntry, defaultSections, defineConfig, generate, newAliasesMethods, newCoreIncrementMethods, newIncrementMethods, newMethod, newMethodsForProp, newParamMethod, newPxMethod, newSetCssVariablesMethod, startWebCollection, stopWebCollection };
+/**
+ * Web increment utilities use `--t-spacing` with `calc` (see generated `Css.ts` and the Vite plugin).
+ * Keep literals in one place so codegen, emitted CSS, and the transform stay aligned.
+ * `--t-spacing` must be set (e.g. `:root` prelude from `collectCss()` / mapping `increment`).
+ */
+/** Custom property for increment-based spacing (web). */
+declare const SPACING_CUSTOM_PROPERTY = "--t-spacing";
+/** I.e. `calc(var(--t-spacing) * 3)` — requires prelude defining `--t-spacing`. */
+declare function incrementCssValue(multiplier: number): string;
+/**
+ * If `cssValue` is exactly `calc(var(--t-spacing) * k)` for this package's spacing property,
+ * returns the multiplier substring `k` (e.g. `"2"`, `"-1"`, `"2.5"`). Otherwise null.
+ */
+declare function tryParseIncrementCalcMultiplier(cssValue: string): string | null;
+/** Prepended to emitted Truss CSS; `incrementPx` comes from `truss-config` / `Css.json`. */
+declare function rootSpacingPreludeCss(incrementPx: number): string;
+
+export { type Aliases, type Config, type CreateMethodsFn, type FontConfig, type IncConfig, SPACING_CUSTOM_PROPERTY, type SectionName, type Sections, type TokenRegistry, type UtilityMethod, type UtilityName, type WebEntry, defaultSections, defineConfig, generate, incrementCssValue, newAliasesMethods, newCoreIncrementMethods, newIncrementMethods, newMethod, newMethodsForProp, newParamMethod, newPxMethod, newSetCssVariablesMethod, rootSpacingPreludeCss, startWebCollection, stopWebCollection, tryParseIncrementCalcMultiplier };

package/build/index.js

@@ -3,6 +3,21 @@ function defineConfig(config) {
   return config;
 }
 
+// src/spacing-css-var.ts
+var SPACING_CUSTOM_PROPERTY = "--t-spacing";
+function incrementCssValue(multiplier) {
+  return `calc(var(${SPACING_CUSTOM_PROPERTY}) * ${multiplier})`;
+}
+function tryParseIncrementCalcMultiplier(cssValue) {
+  const prop = SPACING_CUSTOM_PROPERTY.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const re = new RegExp(`^calc\\(var\\(${prop}\\) \\* (-?\\d+(?:\\.\\d+)?)\\)$`);
+  const m = cssValue.match(re);
+  return m ? m[1] : null;
+}
+function rootSpacingPreludeCss(incrementPx) {
+  return `:root { ${SPACING_CUSTOM_PROPERTY}: ${incrementPx}px; }`;
+}
+
 // src/methods.ts
 var _webCollector = null;
 function startWebCollection() {
@@ -74,12 +89,15 @@ function newIncrementMethods(config, abbr, prop, opts = {}) {
     `${pxComment} ${abbr}Px(px: number) { return this.${props.map((p) => `add("${p}", \`\${px}px\`)`).join(".")}; }`
   ];
 }
+function isWebIncrementTarget(config) {
+  return config.target !== "react-native";
+}
 function newCoreIncrementMethods(config, abbr, props) {
   return zeroTo(config.numberOfIncrements).map((i) => {
-    const px = `${i * config.increment}px`;
-    const defs = Object.fromEntries(props.map((p) => [p, px]));
+    const value = isWebIncrementTarget(config) ? incrementCssValue(i) : `${i * config.increment}px`;
+    const defs = Object.fromEntries(props.map((p) => [p, value]));
     collect({ kind: "static", abbr: `${abbr}${i}`, defs });
-    const sets = props.map((p) => `add("${p}", "${px}")`).join(".");
+    const sets = props.map((p) => `add("${p}", "${value}")`).join(".");
     return `${comment(defs)} get ${abbr}${i}() { return this.${sets}; }`;
   });
 }
@@ -1060,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)) {
@@ -1156,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");
     }
@@ -1171,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 };
@@ -1486,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");
     }
@@ -1501,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 };
@@ -1554,9 +1589,20 @@ class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"> {
   }
 }
 
-/** Converts \`inc\` into pixels value with a \`px\` suffix. */
+/** Converts \`inc\` into a spacing length using \`--t-spacing\` (build-time atomic CSS). */
 export function maybeInc(inc: number | string): string {
-  return typeof inc === "string" ? inc : \`\${inc * ${increment}}px\`;
+  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. */
@@ -1695,10 +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,
@@ -1707,7 +1763,9 @@ export {
   newParamMethod,
   newPxMethod,
   newSetCssVariablesMethod,
+  rootSpacingPreludeCss,
   startWebCollection,
-  stopWebCollection
+  stopWebCollection,
+  tryParseIncrementCalcMultiplier
 };
 //# sourceMappingURL=index.js.map