@homebound/truss 2.22.0 → 2.24.0

package/build/plugin/index.js

@@ -1360,6 +1360,21 @@ function normalizePseudoIdentifier(pseudo) {
   return `${prefix}${name}`;
 }
 
+// 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 +1428,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,7 +1451,7 @@ 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;
 }
@@ -1687,16 +1706,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]
         )
       )
     )
@@ -1725,6 +1745,9 @@ function buildRuntimeLookupDeclaration(lookupName, segmentsByName, mapping) {
 // src/plugin/transform-css.ts
 import * as t5 from "@babel/types";
 
+// src/plugin/resolve-chain.ts
+import { pascalCase } from "change-case";
+
 // src/media-query.ts
 function invertMediaQuery(query) {
   const screenPrefix = "@media screen and ";
@@ -2149,6 +2172,18 @@ function resolveChain(ctx, chain) {
           segments.push(seg);
           continue;
         }
+        if (abbr === "setVar") {
+          const segs = resolveSetVarCall(
+            node,
+            mapping,
+            context.mediaQuery,
+            context.pseudoClass,
+            context.pseudoElement,
+            context.whenPseudo
+          );
+          segments.push(...segs);
+          continue;
+        }
         if (abbr === "typography") {
           const resolved = resolveTypographyCall(
             node,
@@ -2305,7 +2340,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 = tryEvaluateLiteral(node.args[0], entry.incremented);
   return buildParameterizedSegment({
     abbr,
     props: entry.props,
@@ -2588,10 +2623,10 @@ 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 tryEvaluateLiteral(node, incremented) {
   if (node.type === "NumericLiteral") {
     if (incremented) {
-      return `${node.value * increment}px`;
+      return incrementCssValue(node.value);
     }
     return String(node.value);
   }
@@ -2601,7 +2636,7 @@ function tryEvaluateLiteral(node, incremented, increment) {
   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);
   }
@@ -2697,6 +2732,245 @@ function stringLiteralValue(node, errorMessage) {
   }
   throw new UnsupportedPatternError(errorMessage);
 }
+function mediaQueryForBreakpointName(mapping, bpName) {
+  if (!mapping.breakpoints) return null;
+  const key = `if${pascalCase(bpName)}`;
+  return mapping.breakpoints[key] ?? null;
+}
+function setVarClassBaseFromCssVarName(cssVarName) {
+  const body = (cssVarName.startsWith("--") ? cssVarName.slice(2) : cssVarName).replace(/[^a-zA-Z0-9]/g, "_").replace(/_+/g, "_").replace(/^_|_$/g, "");
+  return `__${body}`;
+}
+function containerQueryStringFromBounds(name, gt, lt) {
+  const parts = [];
+  if (gt !== void 0) {
+    parts.push(`(min-width: ${gt + 1}px)`);
+  }
+  if (lt !== void 0) {
+    parts.push(`(max-width: ${lt}px)`);
+  }
+  const query = parts.join(" and ");
+  const namePrefix = name ? `${name} ` : "";
+  return `@container ${namePrefix}${query}`;
+}
+function resolveSetVarPropertyKey(prop, mapping) {
+  const key = prop.key;
+  if (!prop.computed) {
+    if (key.type === "StringLiteral") {
+      if (key.value.startsWith("--")) {
+        return key.value;
+      }
+      throw new UnsupportedPatternError(
+        `setVar() string keys must be CSS variables starting with "--" - got ${JSON.stringify(key.value)}`
+      );
+    }
+    if (key.type === "Identifier") {
+      throw new UnsupportedPatternError(
+        `setVar() requires computed keys like [Tokens.Name] or string keys "--my-var", not bare property names`
+      );
+    }
+    throw new UnsupportedPatternError(`setVar() property keys must be string literals or [Tokens.*] members`);
+  }
+  if (key.type === "MemberExpression") {
+    const mem = key;
+    const memberName = !mem.computed && mem.property.type === "Identifier" ? mem.property.name : mem.computed && mem.property.type === "StringLiteral" ? mem.property.value : null;
+    if (memberName == null) {
+      throw new UnsupportedPatternError(
+        `setVar() [Tokens.name] keys must use a plain .member or ["string"] member access`
+      );
+    }
+    const tokenMap = mapping.tokens;
+    if (!tokenMap || !(memberName in tokenMap)) {
+      throw new UnsupportedPatternError(
+        tokenMap ? `Unknown token "${memberName}" - add it to config.tokens or use a "--" string literal key` : `setVar() [Tokens.*] requires config.tokens; use "--" string literal keys only`
+      );
+    }
+    return tokenMap[memberName];
+  }
+  throw new UnsupportedPatternError(`setVar() computed keys must be Tokens.*-style members`);
+}
+function expandSetVarValueToLeaves(valueNode, mapping, baseCtx) {
+  const unwrapped = unwrapExpression(valueNode);
+  const scalar = tryEvaluateAddLiteral(unwrapped);
+  if (scalar !== null) {
+    return [{ literal: scalar, ctx: cloneConditionContext(baseCtx) }];
+  }
+  if (unwrapped.type !== "ObjectExpression") {
+    throw new UnsupportedPatternError(
+      `setVar() values must be string/number literals or a { default?, media?, container? } object`
+    );
+  }
+  let defaultLit;
+  let mediaObj;
+  let containerArr;
+  for (const prop of unwrapped.properties) {
+    if (prop.type === "SpreadElement") {
+      throw new UnsupportedPatternError(`setVar() responsive object does not support spread properties`);
+    }
+    if (prop.type !== "ObjectProperty" || prop.computed) {
+      throw new UnsupportedPatternError(`setVar() responsive object only supports plain data properties`);
+    }
+    const name = objectPropertyName(prop.key);
+    if (!name) {
+      throw new UnsupportedPatternError(`setVar() responsive object: invalid property key`);
+    }
+    if (name === "default") {
+      const v = tryEvaluateAddLiteral(unwrapExpression(prop.value));
+      if (v === null) {
+        throw new UnsupportedPatternError(`setVar().default must be a string or number literal`);
+      }
+      defaultLit = v;
+      continue;
+    }
+    if (name === "media") {
+      if (prop.value.type !== "ObjectExpression") {
+        throw new UnsupportedPatternError(`setVar().media must be an object literal`);
+      }
+      mediaObj = prop.value;
+      continue;
+    }
+    if (name === "container") {
+      if (prop.value.type !== "ArrayExpression") {
+        throw new UnsupportedPatternError(`setVar().container must be an array literal`);
+      }
+      containerArr = prop.value;
+      continue;
+    }
+    throw new UnsupportedPatternError(`setVar() responsive object does not support property "${name}"`);
+  }
+  const leaves = [];
+  if (defaultLit !== void 0) {
+    leaves.push({ literal: defaultLit, ctx: cloneConditionContext(baseCtx) });
+  }
+  if (mediaObj) {
+    for (const mprop of mediaObj.properties) {
+      if (mprop.type === "SpreadElement") {
+        throw new UnsupportedPatternError(`setVar().media does not support spread properties`);
+      }
+      if (mprop.type !== "ObjectProperty" || mprop.computed) {
+        throw new UnsupportedPatternError(`setVar().media only supports plain identifier or string keys`);
+      }
+      const bpName = objectPropertyName(mprop.key);
+      if (!bpName) {
+        throw new UnsupportedPatternError(`setVar().media: invalid breakpoint key`);
+      }
+      const mq = mediaQueryForBreakpointName(mapping, bpName);
+      if (!mq) {
+        throw new UnsupportedPatternError(
+          `Unknown breakpoint "${bpName}" in setVar().media - use a Breakpoint name from truss-config`
+        );
+      }
+      const v = tryEvaluateAddLiteral(unwrapExpression(mprop.value));
+      if (v === null) {
+        throw new UnsupportedPatternError(`setVar().media[${bpName}] must be a string or number literal`);
+      }
+      const ctx = cloneConditionContext(baseCtx);
+      ctx.mediaQuery = mq;
+      leaves.push({ literal: v, ctx });
+    }
+  }
+  if (containerArr) {
+    for (const elt of containerArr.elements) {
+      if (elt === null) {
+        continue;
+      }
+      if (elt.type !== "ObjectExpression") {
+        throw new UnsupportedPatternError(`setVar().container entries must be object literals`);
+      }
+      let rowValue;
+      let cname;
+      let lt;
+      let gt;
+      for (const rprop of elt.properties) {
+        if (rprop.type === "SpreadElement") {
+          throw new UnsupportedPatternError(`setVar().container row does not support spread`);
+        }
+        if (rprop.type !== "ObjectProperty" || rprop.computed) {
+          throw new UnsupportedPatternError(`setVar().container row: use plain properties only`);
+        }
+        const rk = objectPropertyName(rprop.key);
+        if (!rk) {
+          continue;
+        }
+        const rv = rprop.value;
+        if (rk === "value") {
+          const lit = tryEvaluateAddLiteral(unwrapExpression(rv));
+          if (lit === null) {
+            throw new UnsupportedPatternError(`setVar().container row "value" must be a string or number literal`);
+          }
+          rowValue = lit;
+        } else if (rk === "name") {
+          cname = stringLiteralValue(rv, `setVar().container name must be a string literal`);
+        } else if (rk === "lt") {
+          lt = numericLiteralValue(rv, `setVar().container lt must be a numeric literal`);
+        } else if (rk === "gt") {
+          gt = numericLiteralValue(rv, `setVar().container gt must be a numeric literal`);
+        } else {
+          throw new UnsupportedPatternError(`setVar().container row does not support property "${rk}"`);
+        }
+      }
+      if (rowValue === void 0) {
+        throw new UnsupportedPatternError(`setVar().container row requires a "value" property`);
+      }
+      if (lt === void 0 && gt === void 0) {
+        throw new UnsupportedPatternError(`setVar().container row requires at least one of gt or lt`);
+      }
+      const containerMq = containerQueryStringFromBounds(cname, gt, lt);
+      const ctx = cloneConditionContext(baseCtx);
+      ctx.mediaQuery = containerMq;
+      leaves.push({ literal: rowValue, ctx });
+    }
+  }
+  if (leaves.length === 0) {
+    throw new UnsupportedPatternError(
+      `setVar() responsive object must include at least one of default, media entries, or container entries`
+    );
+  }
+  return leaves;
+}
+function resolveSetVarCall(node, mapping, mediaQuery, pseudoClass, pseudoElement, whenPseudo) {
+  if (node.args.length !== 1) {
+    throw new UnsupportedPatternError(`setVar() requires exactly 1 argument (an object literal)`);
+  }
+  const arg = node.args[0];
+  if (arg.type === "SpreadElement") {
+    throw new UnsupportedPatternError(`setVar() does not support spread arguments`);
+  }
+  if (arg.type !== "ObjectExpression") {
+    throw new UnsupportedPatternError(`setVar() requires an object literal argument`);
+  }
+  const baseContext = {
+    mediaQuery,
+    pseudoClass,
+    pseudoElement,
+    whenPseudo
+  };
+  const segments = [];
+  for (const prop of arg.properties) {
+    if (prop.type === "SpreadElement") {
+      throw new UnsupportedPatternError(`setVar() does not support spread properties`);
+    }
+    if (prop.type !== "ObjectProperty") {
+      throw new UnsupportedPatternError(`setVar() only supports object properties`);
+    }
+    const cssVarName = resolveSetVarPropertyKey(prop, mapping);
+    const leaves = expandSetVarValueToLeaves(prop.value, mapping, baseContext);
+    for (const leaf of leaves) {
+      const abbr = setVarClassBaseFromCssVarName(cssVarName);
+      segments.push(
+        segmentWithConditionContext(
+          {
+            abbr,
+            defs: { [cssVarName]: leaf.literal },
+            argResolved: leaf.literal
+          },
+          leaf.ctx
+        )
+      );
+    }
+  }
+  return segments;
+}
 var UnsupportedPatternError = class extends Error {
   constructor(message) {
     super(`[truss] Unsupported pattern: ${message}`);
@@ -3475,7 +3749,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);
@@ -3775,13 +4049,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;