@homebound/truss 2.24.0 → 2.25.0

package/build/plugin/index.js

@@ -1360,6 +1360,19 @@ 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) {
@@ -1458,6 +1471,7 @@ function computeStaticBaseName(seg, cssProp, cssValue, isMultiProp, mapping) {
 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) {
@@ -1469,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) {
@@ -1479,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) : ""}`;
@@ -1565,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
     });
@@ -1654,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;
@@ -1682,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));
       }
@@ -2340,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);
+  const literalValue = tryEvaluatePropertyLiteral(node.args[0], mapping, entry.incremented);
   return buildParameterizedSegment({
     abbr,
     props: entry.props,
@@ -2348,6 +2374,7 @@ function resolveVariableCall(abbr, entry, node, mapping, mediaQuery, pseudoClass
     extraDefs: entry.extraDefs,
     argAst: node.args[0],
     literalValue,
+    mapping,
     mediaQuery,
     pseudoClass,
     pseudoElement,
@@ -2371,6 +2398,7 @@ function resolveDelegateCall(abbr, entry, node, mapping, mediaQuery, pseudoClass
     extraDefs: targetEntry.extraDefs,
     argAst: node.args[0],
     literalValue,
+    mapping,
     mediaQuery,
     pseudoClass,
     pseudoElement,
@@ -2378,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;
@@ -2498,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 = [];
@@ -2534,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 },
@@ -2561,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;
   }
@@ -2573,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) {
@@ -2623,16 +2704,13 @@ 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) {
+function tryEvaluatePropertyLiteral(node, mapping, incremented) {
   if (node.type === "NumericLiteral") {
     if (incremented) {
       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) {
@@ -2640,6 +2718,10 @@ function tryEvaluateLiteral(node, incremented) {
     }
     return String(val);
   }
+  const raw = tryResolveValueLiteral(node, mapping);
+  if (raw !== null) {
+    return maybeCssVar(raw);
+  }
   return null;
 }
 function tryEvaluatePxLiteral(node) {
@@ -2791,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) }];
   }
@@ -2815,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`);
       }
@@ -2860,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`);
       }
@@ -2894,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`);
           }
@@ -3178,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) });
@@ -3304,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;
     }
   }
@@ -3690,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 };
@@ -3716,6 +3813,7 @@ function transformTruss(code, filename, mapping, options = {}) {
     debug: options.debug ?? false,
     mapping,
     maybeIncHelperName,
+    maybeCssVarHelperName,
     mergePropsHelperName,
     needsMergePropsHelper,
     trussPropsHelperName,
@@ -3734,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" });
   }