@homebound/truss 2.21.6 → 2.23.0

package/build/plugin/index.js

@@ -1725,6 +1725,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 ";
@@ -1820,7 +1823,7 @@ function applyModifierNodeToConditionContext(context, node, mapping) {
     }
     const resolved = resolveWhenCall(node);
     if (resolved.kind === "selector") {
-      context.pseudoClass = resolved.pseudo;
+      context.pseudoClass = resolved.selector;
     } else {
       context.whenPseudo = resolved;
     }
@@ -2149,6 +2152,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,
@@ -2546,11 +2561,11 @@ function resolveWhenCall(node) {
     );
   }
   if (node.args.length === 1) {
-    const pseudoArg2 = node.args[0];
-    if (pseudoArg2.type !== "StringLiteral") {
+    const selectorArg = node.args[0];
+    if (selectorArg.type !== "StringLiteral") {
       throw new UnsupportedPatternError(`when() selector must be a string literal`);
     }
-    return { kind: "selector", pseudo: pseudoArg2.value };
+    return { kind: "selector", selector: selectorArg.value };
   }
   const markerArg = node.args[0];
   const markerNode = resolveWhenMarker(markerArg);
@@ -2697,6 +2712,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}`);