@homebound/truss 2.23.0 → 2.25.0

package/build/plugin/index.js

@@ -1360,6 +1360,34 @@ function normalizePseudoIdentifier(pseudo) {
   return `${prefix}${name}`;
 }
 
+// src/css-custom-property.ts
+function maybeCssVar(value) {
+  if (typeof value !== "string") return value;
+  if (value.startsWith("--")) return `var(${value})`;
+  return value;
+}
+function variableValueNeedsMaybeCssVar(opts) {
+  return !opts.appendPx;
+}
+function isCustomPropertyName(value) {
+  return value.startsWith("--");
+}
+
+// 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/plugin/emit-truss.ts
 var RELATIONSHIP_SHORT = {
   ancestor: "anc",
@@ -1413,18 +1441,22 @@ function cleanValueForClassName(value) {
   }
   return cleaned.replace(/[^a-zA-Z0-9]/g, "_").replace(/_+/g, "_").replace(/^_|_$/g, "");
 }
+function classNameFragmentForResolvedValue(value) {
+  const inc = tryParseIncrementCalcMultiplier(value);
+  return inc !== null ? cleanValueForClassName(inc) : cleanValueForClassName(value);
+}
 function getPropertyAbbreviation(cssProp) {
   return cssPropertyAbbreviations[cssProp] ?? cssProp;
 }
 function computeStaticBaseName(seg, cssProp, cssValue, isMultiProp, mapping) {
   const abbr = seg.abbr;
   if (seg.argResolved !== void 0) {
-    const valuePart = cleanValueForClassName(seg.argResolved);
+    const valuePart = classNameFragmentForResolvedValue(seg.argResolved);
     if (isMultiProp) {
       const lookup = getLonghandLookup(mapping);
       const canonical = lookup.get(`${cssProp}\0${cssValue}`);
       if (canonical) return canonical;
-      return `${getPropertyAbbreviation(cssProp)}_${cleanValueForClassName(cssValue)}`;
+      return `${getPropertyAbbreviation(cssProp)}_${classNameFragmentForResolvedValue(cssValue)}`;
     }
     return `${abbr}_${valuePart}`;
   }
@@ -1432,13 +1464,14 @@ function computeStaticBaseName(seg, cssProp, cssValue, isMultiProp, mapping) {
     const lookup = getLonghandLookup(mapping);
     const canonical = lookup.get(`${cssProp}\0${cssValue}`);
     if (canonical) return canonical;
-    return `${getPropertyAbbreviation(cssProp)}_${cleanValueForClassName(cssValue)}`;
+    return `${getPropertyAbbreviation(cssProp)}_${classNameFragmentForResolvedValue(cssValue)}`;
   }
   return abbr;
 }
 function collectAtomicRules(chains, mapping) {
   const rules = /* @__PURE__ */ new Map();
   let needsMaybeInc = false;
+  let needsMaybeCssVar = false;
   function collectSegment(seg) {
     if (seg.error || seg.styleArrayArg || seg.classNameArg || seg.styleArg) return;
     if (seg.typographyLookup) {
@@ -1450,6 +1483,9 @@ function collectAtomicRules(chains, mapping) {
       return;
     }
     if (seg.incremented) needsMaybeInc = true;
+    if (seg.variableProps && seg.argResolved === void 0 && variableValueNeedsMaybeCssVar(seg)) {
+      needsMaybeCssVar = true;
+    }
     collectSegmentRules(rules, seg, mapping);
   }
   for (const chain of chains) {
@@ -1460,7 +1496,7 @@ function collectAtomicRules(chains, mapping) {
       }
     }
   }
-  return { rules, needsMaybeInc };
+  return { rules, needsMaybeInc, needsMaybeCssVar };
 }
 function segmentContext(seg, mapping) {
   const prefix = `${conditionPrefix(seg.pseudoClass, seg.mediaQuery, seg.pseudoElement, mapping.breakpoints)}${seg.whenPseudo ? whenPrefix(seg.whenPseudo) : ""}`;
@@ -1546,6 +1582,7 @@ function variableStyleEntries(seg, mapping, prefix, isConditional) {
       cssValue: `var(${varName})`,
       varName,
       argNode: seg.argNode,
+      argResolved: seg.argResolved,
       incremented: seg.incremented,
       appendPx: seg.appendPx
     });
@@ -1635,7 +1672,7 @@ function formatNestedRuleBlock(wrapper, selector, rule) {
   }).join(" ");
   return `${wrapper} { ${selector} { ${body} } }`;
 }
-function buildStyleHashProperties(segments, mapping, maybeIncHelperName) {
+function buildStyleHashProperties(segments, mapping, maybeIncHelperName, maybeCssVarHelperName) {
   const propGroups = /* @__PURE__ */ new Map();
   function pushEntry(entry) {
     const cssProp = entry.cssProp;
@@ -1663,14 +1700,22 @@ function buildStyleHashProperties(segments, mapping, maybeIncHelperName) {
     if (variableEntries.length > 0) {
       const varsProps = [];
       for (const dyn of variableEntries) {
-        let valueExpr = dyn.argNode;
-        if (dyn.incremented) {
-          valueExpr = t3.callExpression(t3.identifier(maybeIncHelperName ?? "__maybeInc"), [valueExpr]);
-        } else if (dyn.appendPx) {
-          valueExpr = t3.templateLiteral(
-            [t3.templateElement({ raw: "", cooked: "" }, false), t3.templateElement({ raw: "px", cooked: "px" }, true)],
-            [valueExpr]
-          );
+        let valueExpr;
+        if (dyn.argResolved !== void 0) {
+          valueExpr = t3.stringLiteral(dyn.argResolved);
+        } else {
+          valueExpr = dyn.argNode;
+          if (dyn.incremented) {
+            valueExpr = t3.callExpression(t3.identifier(maybeIncHelperName ?? "__maybeInc"), [valueExpr]);
+          } else if (dyn.appendPx) {
+            valueExpr = t3.templateLiteral(
+              [t3.templateElement({ raw: "", cooked: "" }, false), t3.templateElement({ raw: "px", cooked: "px" }, true)],
+              [valueExpr]
+            );
+          }
+          if (maybeCssVarHelperName && variableValueNeedsMaybeCssVar(dyn)) {
+            valueExpr = t3.callExpression(t3.identifier(maybeCssVarHelperName), [valueExpr]);
+          }
         }
         varsProps.push(t3.objectProperty(t3.stringLiteral(dyn.varName), valueExpr));
       }
@@ -1687,16 +1732,17 @@ function toCssVariableName(className, baseKey, cssProp) {
   const cp = className.endsWith(baseClassName) ? className.slice(0, -baseClassName.length) : "";
   return `--${cp}${cssProp}`;
 }
-function buildMaybeIncDeclaration(helperName, increment) {
+function buildMaybeIncDeclaration(helperName) {
   const incParam = t3.identifier("inc");
+  const calcPrefix = `calc(var(${SPACING_CUSTOM_PROPERTY}) * `;
   const body = t3.blockStatement([
     t3.returnStatement(
       t3.conditionalExpression(
         t3.binaryExpression("===", t3.unaryExpression("typeof", incParam), t3.stringLiteral("string")),
         incParam,
         t3.templateLiteral(
-          [t3.templateElement({ raw: "", cooked: "" }, false), t3.templateElement({ raw: "px", cooked: "px" }, true)],
-          [t3.binaryExpression("*", incParam, t3.numericLiteral(increment))]
+          [t3.templateElement({ raw: calcPrefix, cooked: calcPrefix }, false), t3.templateElement({ raw: ")", cooked: ")" }, true)],
+          [incParam]
         )
       )
     )
@@ -2320,7 +2366,7 @@ function resolveVariableCall(abbr, entry, node, mapping, mediaQuery, pseudoClass
   if (node.args.length !== 1) {
     throw new UnsupportedPatternError(`${abbr}() expects exactly 1 argument, got ${node.args.length}`);
   }
-  const literalValue = tryEvaluateLiteral(node.args[0], entry.incremented, mapping.increment);
+  const literalValue = tryEvaluatePropertyLiteral(node.args[0], mapping, entry.incremented);
   return buildParameterizedSegment({
     abbr,
     props: entry.props,
@@ -2328,6 +2374,7 @@ function resolveVariableCall(abbr, entry, node, mapping, mediaQuery, pseudoClass
     extraDefs: entry.extraDefs,
     argAst: node.args[0],
     literalValue,
+    mapping,
     mediaQuery,
     pseudoClass,
     pseudoElement,
@@ -2351,6 +2398,7 @@ function resolveDelegateCall(abbr, entry, node, mapping, mediaQuery, pseudoClass
     extraDefs: targetEntry.extraDefs,
     argAst: node.args[0],
     literalValue,
+    mapping,
     mediaQuery,
     pseudoClass,
     pseudoElement,
@@ -2358,14 +2406,44 @@ function resolveDelegateCall(abbr, entry, node, mapping, mediaQuery, pseudoClass
   });
 }
 function buildParameterizedSegment(params) {
-  const { abbr, props, incremented, appendPx, extraDefs, argAst, literalValue, whenPseudo } = params;
+  const { abbr, props, incremented, appendPx, extraDefs, argAst, literalValue, mapping, whenPseudo } = params;
   const context = {
     mediaQuery: params.mediaQuery,
     pseudoClass: params.pseudoClass,
     pseudoElement: params.pseudoElement,
     whenPseudo
   };
+  return resolveLiteralOrVariableSegment({
+    abbr,
+    props,
+    incremented,
+    appendPx,
+    extraDefs,
+    argAst,
+    literalValue,
+    mapping,
+    context
+  });
+}
+function resolveLiteralOrVariableSegment(params) {
+  const { abbr, props, incremented, appendPx, extraDefs, argAst, literalValue, mapping, context } = params;
   if (literalValue !== null) {
+    const raw = tryResolveValueLiteral(argAst, mapping);
+    if (raw !== null && isCustomPropertyName(raw)) {
+      const base2 = segmentWithConditionContext(
+        {
+          abbr,
+          defs: {},
+          variableProps: props,
+          incremented,
+          variableExtraDefs: extraDefs,
+          argResolved: literalValue
+        },
+        context
+      );
+      if (appendPx) base2.appendPx = true;
+      return base2;
+    }
     const defs = {};
     for (const prop of props) {
       defs[prop] = literalValue;
@@ -2478,23 +2556,18 @@ function resolveAddCall(node, mapping, mediaQuery, pseudoClass, pseudoElement, w
   }
   const propName = propArg.value;
   const valueArg = node.args[1];
-  const literalValue = tryEvaluateAddLiteral(valueArg);
-  if (literalValue !== null) {
-    return [segmentWithConditionContext(
-      { abbr: propName, defs: { [propName]: literalValue }, argResolved: literalValue },
-      context
-    )];
-  }
-  return [segmentWithConditionContext(
-    {
+  const literalValue = tryEvaluatePropertyLiteral(valueArg, mapping, false);
+  return [
+    resolveLiteralOrVariableSegment({
       abbr: propName,
-      defs: {},
-      variableProps: [propName],
+      props: [propName],
       incremented: false,
-      argNode: valueArg
-    },
-    context
-  )];
+      argAst: valueArg,
+      literalValue,
+      mapping,
+      context
+    })
+  ];
 }
 function resolveAddObjectLiteral(obj, mapping, context) {
   const segments = [];
@@ -2514,21 +2587,31 @@ function resolveAddObjectLiteral(obj, mapping, context) {
       throw new UnsupportedPatternError(`add({...}) property keys must be identifiers or string literals`);
     }
     const valueNode = property.value;
-    const literalValue = tryEvaluateAddLiteral(valueNode);
+    const literalValue = tryEvaluatePropertyLiteral(valueNode, mapping, false);
     if (literalValue !== null) {
-      const canonicalAbbr = findCanonicalAbbreviation(mapping, propName, literalValue);
-      if (canonicalAbbr) {
-        const entry = mapping.abbreviations[canonicalAbbr];
-        segments.push(segmentWithConditionContext(
-          { abbr: canonicalAbbr, defs: entry.defs },
-          context
-        ));
-      } else {
-        segments.push(segmentWithConditionContext(
-          { abbr: propName, defs: { [propName]: literalValue }, argResolved: literalValue },
-          context
-        ));
+      const raw = tryResolveValueLiteral(valueNode, mapping);
+      if (raw === null || !isCustomPropertyName(raw)) {
+        const canonicalAbbr = findCanonicalAbbreviation(mapping, propName, literalValue);
+        if (canonicalAbbr) {
+          const entry = mapping.abbreviations[canonicalAbbr];
+          segments.push(segmentWithConditionContext(
+            { abbr: canonicalAbbr, defs: entry.defs },
+            context
+          ));
+          continue;
+        }
       }
+      segments.push(
+        resolveLiteralOrVariableSegment({
+          abbr: propName,
+          props: [propName],
+          incremented: false,
+          argAst: valueNode,
+          literalValue,
+          mapping,
+          context
+        })
+      );
     } else {
       segments.push(segmentWithConditionContext(
         { abbr: propName, defs: {}, variableProps: [propName], incremented: false, argNode: valueNode },
@@ -2541,7 +2624,11 @@ function resolveAddObjectLiteral(obj, mapping, context) {
 function findCanonicalAbbreviation(mapping, prop, value) {
   return getLonghandLookup(mapping).get(`${prop}\0${value}`) ?? null;
 }
-function tryEvaluateAddLiteral(node) {
+function tryResolveValueLiteral(node, mapping) {
+  if (mapping) {
+    const token = tryResolveTokensMember(node, mapping);
+    if (token !== null) return token;
+  }
   if (node.type === "StringLiteral") {
     return node.value;
   }
@@ -2553,6 +2640,20 @@ function tryEvaluateAddLiteral(node) {
   }
   return null;
 }
+function tryResolveTokensMember(node, mapping) {
+  if (node.type !== "MemberExpression") return null;
+  if (node.object.type !== "Identifier" || node.object.name !== "Tokens") return null;
+  const memberName = !node.computed && node.property.type === "Identifier" ? node.property.name : node.computed && node.property.type === "StringLiteral" ? node.property.value : null;
+  if (memberName == null) return null;
+  const tokenMap = mapping.tokens;
+  if (!tokenMap) {
+    throw new UnsupportedPatternError(`Tokens.* requires config.tokens`);
+  }
+  if (!(memberName in tokenMap)) {
+    throw new UnsupportedPatternError(`Unknown token "${memberName}" - add it to config.tokens`);
+  }
+  return tokenMap[memberName];
+}
 var WHEN_RELATIONSHIPS = /* @__PURE__ */ new Set(["ancestor", "descendant", "anySibling", "siblingBefore", "siblingAfter"]);
 function resolveWhenCall(node) {
   if (node.args.length !== 1 && node.args.length !== 3) {
@@ -2603,23 +2704,24 @@ function isDefaultMarkerNode(node) {
 function isLegacyDefaultMarkerExpression(node) {
   return node.type === "CallExpression" && node.arguments.length === 0 && node.callee.type === "MemberExpression" && !node.callee.computed && node.callee.property.type === "Identifier" && node.callee.property.name === "defaultMarker";
 }
-function tryEvaluateLiteral(node, incremented, increment) {
+function tryEvaluatePropertyLiteral(node, mapping, incremented) {
   if (node.type === "NumericLiteral") {
     if (incremented) {
-      return `${node.value * increment}px`;
+      return incrementCssValue(node.value);
     }
     return String(node.value);
   }
-  if (node.type === "StringLiteral") {
-    return node.value;
-  }
   if (node.type === "UnaryExpression" && node.operator === "-" && node.argument.type === "NumericLiteral") {
     const val = -node.argument.value;
     if (incremented) {
-      return `${val * increment}px`;
+      return incrementCssValue(val);
     }
     return String(val);
   }
+  const raw = tryResolveValueLiteral(node, mapping);
+  if (raw !== null) {
+    return maybeCssVar(raw);
+  }
   return null;
 }
 function tryEvaluatePxLiteral(node) {
@@ -2771,7 +2873,7 @@ function resolveSetVarPropertyKey(prop, mapping) {
 }
 function expandSetVarValueToLeaves(valueNode, mapping, baseCtx) {
   const unwrapped = unwrapExpression(valueNode);
-  const scalar = tryEvaluateAddLiteral(unwrapped);
+  const scalar = tryResolveValueLiteral(unwrapped);
   if (scalar !== null) {
     return [{ literal: scalar, ctx: cloneConditionContext(baseCtx) }];
   }
@@ -2795,7 +2897,7 @@ function expandSetVarValueToLeaves(valueNode, mapping, baseCtx) {
       throw new UnsupportedPatternError(`setVar() responsive object: invalid property key`);
     }
     if (name === "default") {
-      const v = tryEvaluateAddLiteral(unwrapExpression(prop.value));
+      const v = tryResolveValueLiteral(unwrapExpression(prop.value));
       if (v === null) {
         throw new UnsupportedPatternError(`setVar().default must be a string or number literal`);
       }
@@ -2840,7 +2942,7 @@ function expandSetVarValueToLeaves(valueNode, mapping, baseCtx) {
           `Unknown breakpoint "${bpName}" in setVar().media - use a Breakpoint name from truss-config`
         );
       }
-      const v = tryEvaluateAddLiteral(unwrapExpression(mprop.value));
+      const v = tryResolveValueLiteral(unwrapExpression(mprop.value));
       if (v === null) {
         throw new UnsupportedPatternError(`setVar().media[${bpName}] must be a string or number literal`);
       }
@@ -2874,7 +2976,7 @@ function expandSetVarValueToLeaves(valueNode, mapping, baseCtx) {
         }
         const rv = rprop.value;
         if (rk === "value") {
-          const lit = tryEvaluateAddLiteral(unwrapExpression(rv));
+          const lit = tryResolveValueLiteral(unwrapExpression(rv));
           if (lit === null) {
             throw new UnsupportedPatternError(`setVar().container row "value" must be a string or number literal`);
           }
@@ -3158,6 +3260,12 @@ function resolveCssExpression(node, cssBindingName, mapping, filename) {
       if (seg.whenPseudo) {
         return { error: `when() modifiers are not supported in .css.ts files` };
       }
+      if (seg.variableProps && seg.argResolved) {
+        for (const prop of seg.variableProps) {
+          declarations.push({ property: camelToKebab(prop), value: seg.argResolved });
+        }
+        continue;
+      }
       for (const [prop, value] of Object.entries(seg.defs)) {
         if (typeof value === "string" || typeof value === "number") {
           declarations.push({ property: camelToKebab(prop), value: String(value) });
@@ -3284,7 +3392,14 @@ function buildStyleHashMembers(segments, options) {
   const styleKeyCounts = /* @__PURE__ */ new Map();
   function flushNormal() {
     if (normalSegs.length > 0) {
-      members.push(...buildStyleHashProperties(normalSegs, options.mapping, options.maybeIncHelperName));
+      members.push(
+        ...buildStyleHashProperties(
+          normalSegs,
+          options.mapping,
+          options.maybeIncHelperName,
+          options.maybeCssVarHelperName
+        )
+      );
       normalSegs.length = 0;
     }
   }
@@ -3670,10 +3785,12 @@ function transformTruss(code, filename, mapping, options = {}) {
   });
   if (sites.length === 0 && !hasCssPropsCall && !hasBuildtimeJsxCssAttribute) return null;
   const chains = sites.map((s) => s.resolvedChain);
-  const { rules, needsMaybeInc } = collectAtomicRules(chains, mapping);
+  const { rules, needsMaybeInc, needsMaybeCssVar } = collectAtomicRules(chains, mapping);
   const cssText = generateCssText(rules);
   const usedTopLevelNames = collectTopLevelBindings(ast);
   const maybeIncHelperName = needsMaybeInc ? reservePreferredName(usedTopLevelNames, "__maybeInc") : null;
+  const existingMaybeCssVarHelperName = findNamedImportBinding(ast, "@homebound/truss/runtime", "maybeCssVar");
+  const maybeCssVarHelperName = needsMaybeCssVar ? existingMaybeCssVarHelperName ?? reservePreferredName(usedTopLevelNames, "maybeCssVar") : null;
   const existingMergePropsHelperName = findNamedImportBinding(ast, "@homebound/truss/runtime", "mergeProps");
   const mergePropsHelperName = existingMergePropsHelperName ?? reservePreferredName(usedTopLevelNames, "mergeProps");
   const needsMergePropsHelper = { current: false };
@@ -3696,6 +3813,7 @@ function transformTruss(code, filename, mapping, options = {}) {
     debug: options.debug ?? false,
     mapping,
     maybeIncHelperName,
+    maybeCssVarHelperName,
     mergePropsHelperName,
     needsMergePropsHelper,
     trussPropsHelperName,
@@ -3714,6 +3832,9 @@ function transformTruss(code, filename, mapping, options = {}) {
   if (needsTrussDebugInfo.current && !existingTrussDebugInfoName) {
     runtimeImports.push({ importedName: "TrussDebugInfo", localName: trussDebugInfoName });
   }
+  if (needsMaybeCssVar && !existingMaybeCssVarHelperName && maybeCssVarHelperName) {
+    runtimeImports.push({ importedName: "maybeCssVar", localName: maybeCssVarHelperName });
+  }
   if (options.injectCss) {
     runtimeImports.push({ importedName: "__injectTrussCSS", localName: "__injectTrussCSS" });
   }
@@ -3729,7 +3850,7 @@ function transformTruss(code, filename, mapping, options = {}) {
   }
   const declarationsToInsert = [];
   if (maybeIncHelperName) {
-    declarationsToInsert.push(buildMaybeIncDeclaration(maybeIncHelperName, mapping.increment));
+    declarationsToInsert.push(buildMaybeIncDeclaration(maybeIncHelperName));
   }
   for (const [lookupKey, lookup] of runtimeLookups) {
     const lookupName = runtimeLookupNames.get(lookupKey);
@@ -4029,13 +4150,16 @@ function createTrussTransformSession(options) {
     return result;
   }
   function collectCss() {
+    const mapping2 = ensureMapping();
     const appCssParts = [generateCssText(cssRegistry)];
     const allArbitrary = Array.from(arbitraryCssRegistry.values()).join("\n\n");
     appCssParts.push(annotateArbitraryCssBlock(allArbitrary));
     const appCss = appCssParts.filter((part) => part.length > 0).join("\n");
     const libs = loadLibraries();
-    if (libs.length === 0) return appCss;
-    return mergeTrussCss([...libs, parseTrussCss(appCss)]);
+    const body = libs.length === 0 ? appCss : mergeTrussCss([...libs, parseTrussCss(appCss)]);
+    if (body.length === 0) return "";
+    return `${rootSpacingPreludeCss(mapping2.increment)}
+${body}`;
   }
   function hasCss() {
     return cssRegistry.size > 0 || arbitraryCssRegistry.size > 0 || libraryPaths.length > 0;