@homebound/truss 2.19.0 → 2.19.2

package/build/plugin/index.js

@@ -1749,7 +1749,7 @@ function applyModifierNodeToConditionContext(context, node, mapping) {
     context.pseudoClass = pseudoSelector(node.name);
   }
 }
-function resolveFullChain(chain, mapping, cssBindingName, initialContext = emptyConditionContext()) {
+function resolveFullChain(chain, mapping, cssBindingName, initialContext = emptyConditionContext(), resolveCssChainReference2) {
   const parts = [];
   const markers = [];
   const nestedErrors = [];
@@ -1779,7 +1779,7 @@ function resolveFullChain(chain, mapping, cssBindingName, initialContext = empty
     }
     parts.push({
       type: "unconditional",
-      segments: resolveChain(currentNodes, mapping, currentNodesStartContext, cssBindingName)
+      segments: resolveChain(currentNodes, mapping, currentNodesStartContext, cssBindingName, resolveCssChainReference2)
     });
     currentNodes = [];
     currentNodesStartContext = cloneConditionContext(currentContext);
@@ -1801,8 +1801,8 @@ function resolveFullChain(chain, mapping, cssBindingName, initialContext = empty
         const branchContext = cloneConditionContext(currentContext);
         const thenNodes = mediaStart.thenNodes ? [...mediaStart.thenNodes, ...filteredChain.slice(i + 1, elseIndex)] : filteredChain.slice(i, elseIndex);
         const elseNodes = [makeMediaQueryNode(mediaStart.inverseMediaQuery), ...filteredChain.slice(elseIndex + 1)];
-        const thenSegs = resolveChain(thenNodes, mapping, branchContext, cssBindingName);
-        const elseSegs = resolveChain(elseNodes, mapping, branchContext, cssBindingName);
+        const thenSegs = resolveChain(thenNodes, mapping, branchContext, cssBindingName, resolveCssChainReference2);
+        const elseSegs = resolveChain(elseNodes, mapping, branchContext, cssBindingName, resolveCssChainReference2);
         parts.push({ type: "unconditional", segments: [...thenSegs, ...elseSegs] });
         i = filteredChain.length;
         break;
@@ -1810,7 +1810,13 @@ function resolveFullChain(chain, mapping, cssBindingName, initialContext = empty
     }
     if (isWhenObjectCall(node)) {
       flushCurrentNodes();
-      const resolved = resolveWhenObjectSelectors(node, mapping, cssBindingName, currentContext);
+      const resolved = resolveWhenObjectSelectors(
+        node,
+        mapping,
+        cssBindingName,
+        currentContext,
+        resolveCssChainReference2
+      );
       parts.push(...resolved.parts);
       markers.push(...resolved.markers);
       nestedErrors.push(...resolved.errors);
@@ -1846,8 +1852,8 @@ function resolveFullChain(chain, mapping, cssBindingName, initialContext = empty
         }
         i++;
       }
-      const thenSegs = resolveChain(thenNodes, mapping, branchContext, cssBindingName);
-      const elseSegs = resolveChain(elseNodes, mapping, branchContext, cssBindingName);
+      const thenSegs = resolveChain(thenNodes, mapping, branchContext, cssBindingName, resolveCssChainReference2);
+      const elseSegs = resolveChain(elseNodes, mapping, branchContext, cssBindingName, resolveCssChainReference2);
       parts.push({
         type: "conditional",
         conditionNode: node.conditionNode,
@@ -1874,7 +1880,7 @@ function resolveFullChain(chain, mapping, cssBindingName, initialContext = empty
 function isWhenObjectCall(node) {
   return node.type === "call" && node.name === "when" && node.args.length === 1 && node.args[0].type === "ObjectExpression";
 }
-function resolveWhenObjectSelectors(node, mapping, cssBindingName, initialContext) {
+function resolveWhenObjectSelectors(node, mapping, cssBindingName, initialContext, resolveCssChainReference2) {
   if (!cssBindingName) {
     return {
       parts: [],
@@ -1901,16 +1907,13 @@ function resolveWhenObjectSelectors(node, mapping, cssBindingName, initialContex
         throw new UnsupportedPatternError(`when({ ... }) selector keys must be string literals`);
       }
       const value = unwrapExpression(property.value);
-      if (value.type !== "MemberExpression" || value.computed || value.property.type !== "Identifier" || value.property.name !== "$") {
-        throw new UnsupportedPatternError(`when({ ... }) values must be Css.*.$ expressions`);
-      }
-      const innerChain = extractChain(value.object, cssBindingName);
+      const innerChain = resolveWhenObjectValueChain(value, cssBindingName, resolveCssChainReference2);
       if (!innerChain) {
         throw new UnsupportedPatternError(`when({ ... }) values must be Css.*.$ expressions`);
       }
       const selectorContext = cloneConditionContext(initialContext);
       selectorContext.pseudoClass = property.key.value;
-      const resolved = resolveFullChain(innerChain, mapping, cssBindingName, selectorContext);
+      const resolved = resolveFullChain(innerChain, mapping, cssBindingName, selectorContext, resolveCssChainReference2);
       parts.push(...resolved.parts);
       markers.push(...resolved.markers);
       errors.push(...resolved.errors);
@@ -1924,6 +1927,12 @@ function resolveWhenObjectSelectors(node, mapping, cssBindingName, initialContex
   }
   return { parts, markers, errors: [...new Set(errors)] };
 }
+function resolveWhenObjectValueChain(value, cssBindingName, resolveCssChainReference2) {
+  if (cssBindingName && value.type === "MemberExpression" && !value.computed && value.property.type === "Identifier" && value.property.name === "$") {
+    return extractChain(value.object, cssBindingName);
+  }
+  return resolveCssChainReference2?.(value) ?? null;
+}
 function flattenWhenObjectParts(resolved) {
   const segments = [];
   for (const part of resolved.parts) {
@@ -1984,7 +1993,7 @@ function invertMediaQuery(query) {
   }
   return query.replace("@media", "@media not");
 }
-function resolveChain(chain, mapping, initialContext = emptyConditionContext(), cssBindingName) {
+function resolveChain(chain, mapping, initialContext = emptyConditionContext(), cssBindingName, resolveCssChainReference2) {
   const segments = [];
   const context = cloneConditionContext(initialContext);
   for (const node of chain) {
@@ -2084,7 +2093,13 @@ function resolveChain(chain, mapping, initialContext = emptyConditionContext(),
         }
         if (abbr === "when") {
           if (isWhenObjectCall(node)) {
-            const resolved2 = resolveWhenObjectSelectors(node, mapping, cssBindingName, context);
+            const resolved2 = resolveWhenObjectSelectors(
+              node,
+              mapping,
+              cssBindingName,
+              context,
+              resolveCssChainReference2
+            );
             segments.push(...flattenWhenObjectParts(resolved2));
             continue;
           }
@@ -3098,7 +3113,8 @@ function transformTruss(code, filename, mapping, options = {}) {
       if (parentPath && parentPath.isMemberExpression() && t4.isIdentifier(parentPath.node.property, { name: "$" })) {
         return;
       }
-      const resolvedChain = resolveFullChain(chain, mapping, cssBindingName);
+      const resolveCssChainReference2 = buildCssChainReferenceResolver(path, cssBindingName);
+      const resolvedChain = resolveFullChain(chain, mapping, cssBindingName, void 0, resolveCssChainReference2);
       sites.push({ path, resolvedChain });
       const line = path.node.loc?.start.line ?? null;
       for (const err of resolvedChain.errors) {
@@ -3255,6 +3271,40 @@ function isInsideWhenObjectValue(path, cssBindingName) {
   }
   return false;
 }
+function buildCssChainReferenceResolver(path, cssBindingName) {
+  return (node) => {
+    return resolveCssChainReference(path, node, cssBindingName, /* @__PURE__ */ new Set());
+  };
+}
+function resolveCssChainReference(path, node, cssBindingName, seen2) {
+  const value = unwrapReferenceExpression(node);
+  if (t4.isMemberExpression(value) && !value.computed && t4.isIdentifier(value.property, { name: "$" })) {
+    return extractChain(value.object, cssBindingName);
+  }
+  if (!t4.isIdentifier(value) || seen2.has(value.name)) {
+    return null;
+  }
+  const binding = path.scope.getBinding(value.name);
+  if (!binding?.constant || !binding.path.isVariableDeclarator()) {
+    return null;
+  }
+  const init = binding.path.node.init;
+  if (!init || !t4.isExpression(init)) {
+    return null;
+  }
+  seen2.add(value.name);
+  return resolveCssChainReference(binding.path, init, cssBindingName, seen2);
+}
+function unwrapReferenceExpression(node) {
+  let current = node;
+  while (true) {
+    if (t4.isParenthesizedExpression(current) || t4.isTSAsExpression(current) || t4.isTSTypeAssertion(current) || t4.isTSNonNullExpression(current) || t4.isTSSatisfiesExpression(current)) {
+      current = current.expression;
+      continue;
+    }
+    return current;
+  }
+}
 function collectRuntimeLookups(chains) {
   const lookups = /* @__PURE__ */ new Map();
   for (const chain of chains) {
@@ -3461,6 +3511,9 @@ function resolveCssExpression(node, cssBindingName, mapping, filename) {
   for (const n of chain) {
     if (n.type === "if") return { error: "if() conditionals are not supported in .css.ts files" };
     if (n.type === "else") return { error: "else is not supported in .css.ts files" };
+    if (n.type === "call" && n.name === "when") {
+      return { error: "when() modifiers are not supported in .css.ts files" };
+    }
   }
   const resolved = resolveFullChain(chain, mapping, cssBindingName);
   if (resolved.errors.length > 0) {