@homebound/truss 2.23.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]
         )
       )
     )
@@ -2320,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,
@@ -2603,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);
   }
@@ -2616,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);
   }
@@ -3729,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);
@@ -4029,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;