@homebound/truss 2.23.0 → 2.24.0

package/build/index.d.ts

@@ -263,12 +263,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}; }`;
   });
 }
@@ -1554,9 +1572,9 @@ 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})\`;
 }
 
 /** Converts \`inc\` into pixels. */
@@ -1696,9 +1714,11 @@ function condensedJson(mapping) {
   return lines.join("\n");
 }
 export {
+  SPACING_CUSTOM_PROPERTY,
   defaultSections,
   defineConfig,
   generate,
+  incrementCssValue,
   newAliasesMethods,
   newCoreIncrementMethods,
   newIncrementMethods,
@@ -1707,7 +1727,9 @@ export {
   newParamMethod,
   newPxMethod,
   newSetCssVariablesMethod,
+  rootSpacingPreludeCss,
   startWebCollection,
-  stopWebCollection
+  stopWebCollection,
+  tryParseIncrementCalcMultiplier
 };
 //# sourceMappingURL=index.js.map