@homebound/truss 2.17.0 → 2.18.0

package/build/plugin/index.js

@@ -1424,6 +1424,248 @@ import _generate2 from "@babel/generator";
 import * as t4 from "@babel/types";
 import { basename } from "path";
 
+// src/plugin/ast-utils.ts
+import * as t2 from "@babel/types";
+function collectTopLevelBindings(ast) {
+  const used = /* @__PURE__ */ new Set();
+  for (const node of ast.program.body) {
+    if (t2.isImportDeclaration(node)) {
+      for (const spec of node.specifiers) {
+        used.add(spec.local.name);
+      }
+      continue;
+    }
+    if (t2.isVariableDeclaration(node)) {
+      for (const decl of node.declarations) {
+        collectPatternBindings(decl.id, used);
+      }
+      continue;
+    }
+    if (t2.isFunctionDeclaration(node) && node.id) {
+      used.add(node.id.name);
+      continue;
+    }
+    if (t2.isClassDeclaration(node) && node.id) {
+      used.add(node.id.name);
+      continue;
+    }
+    if (t2.isExportNamedDeclaration(node) && node.declaration) {
+      const decl = node.declaration;
+      if (t2.isVariableDeclaration(decl)) {
+        for (const varDecl of decl.declarations) {
+          collectPatternBindings(varDecl.id, used);
+        }
+      } else if ((t2.isFunctionDeclaration(decl) || t2.isClassDeclaration(decl)) && decl.id) {
+        used.add(decl.id.name);
+      }
+      continue;
+    }
+    if (t2.isExportDefaultDeclaration(node)) {
+      const decl = node.declaration;
+      if ((t2.isFunctionDeclaration(decl) || t2.isClassDeclaration(decl)) && decl.id) {
+        used.add(decl.id.name);
+      }
+    }
+  }
+  return used;
+}
+function collectPatternBindings(pattern, used) {
+  if (t2.isVoidPattern(pattern)) {
+    return;
+  }
+  if (t2.isIdentifier(pattern)) {
+    used.add(pattern.name);
+    return;
+  }
+  if (t2.isAssignmentPattern(pattern)) {
+    collectPatternBindings(pattern.left, used);
+    return;
+  }
+  if (t2.isRestElement(pattern)) {
+    collectPatternBindings(pattern.argument, used);
+    return;
+  }
+  if (t2.isObjectPattern(pattern)) {
+    for (const prop of pattern.properties) {
+      if (t2.isObjectProperty(prop)) {
+        collectPatternBindings(prop.value, used);
+      } else if (t2.isRestElement(prop)) {
+        collectPatternBindings(prop.argument, used);
+      }
+    }
+    return;
+  }
+  if (t2.isArrayPattern(pattern)) {
+    for (const el of pattern.elements) {
+      if (!el) continue;
+      if (t2.isIdentifier(el) || t2.isAssignmentPattern(el) || t2.isObjectPattern(el) || t2.isArrayPattern(el)) {
+        collectPatternBindings(el, used);
+      } else if (t2.isRestElement(el)) {
+        collectPatternBindings(el.argument, used);
+      }
+    }
+  }
+}
+function reservePreferredName(used, preferred, secondary) {
+  if (!used.has(preferred)) {
+    used.add(preferred);
+    return preferred;
+  }
+  if (secondary && !used.has(secondary)) {
+    used.add(secondary);
+    return secondary;
+  }
+  const base = secondary ?? preferred;
+  let i = 1;
+  let candidate = `${base}_${i}`;
+  while (used.has(candidate)) {
+    i++;
+    candidate = `${base}_${i}`;
+  }
+  used.add(candidate);
+  return candidate;
+}
+function findCssImportBinding(ast) {
+  for (const node of ast.program.body) {
+    if (!t2.isImportDeclaration(node)) continue;
+    for (const spec of node.specifiers) {
+      if (t2.isImportSpecifier(spec) && t2.isIdentifier(spec.imported, { name: "Css" })) {
+        return spec.local.name;
+      }
+    }
+  }
+  return null;
+}
+function findCssBuilderBinding(ast) {
+  for (const node of ast.program.body) {
+    if (!t2.isVariableDeclaration(node)) continue;
+    for (const decl of node.declarations) {
+      if (t2.isIdentifier(decl.id) && decl.init && t2.isNewExpression(decl.init) && t2.isIdentifier(decl.init.callee, { name: "CssBuilder" })) {
+        return decl.id.name;
+      }
+    }
+  }
+  return null;
+}
+function removeCssImport(ast, cssBinding) {
+  for (let i = 0; i < ast.program.body.length; i++) {
+    const node = ast.program.body[i];
+    if (!t2.isImportDeclaration(node)) continue;
+    const cssSpecIndex = node.specifiers.findIndex((s) => t2.isImportSpecifier(s) && s.local.name === cssBinding);
+    if (cssSpecIndex === -1) continue;
+    if (node.specifiers.length === 1) {
+      ast.program.body.splice(i, 1);
+    } else {
+      node.specifiers.splice(cssSpecIndex, 1);
+    }
+    return;
+  }
+}
+function findLastImportIndex(ast) {
+  let lastImportIndex = -1;
+  for (let i = 0; i < ast.program.body.length; i++) {
+    if (t2.isImportDeclaration(ast.program.body[i])) {
+      lastImportIndex = i;
+    }
+  }
+  return lastImportIndex;
+}
+function findNamedImportBinding(ast, source, importedName) {
+  for (const node of ast.program.body) {
+    if (!t2.isImportDeclaration(node) || node.source.value !== source) continue;
+    for (const spec of node.specifiers) {
+      if (t2.isImportSpecifier(spec) && t2.isIdentifier(spec.imported, { name: importedName })) {
+        return spec.local.name;
+      }
+    }
+  }
+  return null;
+}
+function findImportDeclaration(ast, source) {
+  for (const node of ast.program.body) {
+    if (t2.isImportDeclaration(node) && node.source.value === source) {
+      return node;
+    }
+  }
+  return null;
+}
+function replaceCssImportWithNamedImports(ast, cssBinding, source, imports) {
+  for (const node of ast.program.body) {
+    if (!t2.isImportDeclaration(node)) continue;
+    const cssSpecIndex = node.specifiers.findIndex((spec) => {
+      return t2.isImportSpecifier(spec) && spec.local.name === cssBinding;
+    });
+    if (cssSpecIndex === -1 || node.specifiers.length !== 1) continue;
+    node.source = t2.stringLiteral(source);
+    node.specifiers = imports.map((entry) => {
+      return t2.importSpecifier(t2.identifier(entry.localName), t2.identifier(entry.importedName));
+    });
+    return true;
+  }
+  return false;
+}
+function upsertNamedImports(ast, source, imports) {
+  if (imports.length === 0) return;
+  for (const node of ast.program.body) {
+    if (!t2.isImportDeclaration(node) || node.source.value !== source) continue;
+    for (const entry of imports) {
+      const exists = node.specifiers.some((spec) => {
+        return t2.isImportSpecifier(spec) && t2.isIdentifier(spec.imported, { name: entry.importedName });
+      });
+      if (exists) continue;
+      node.specifiers.push(t2.importSpecifier(t2.identifier(entry.localName), t2.identifier(entry.importedName)));
+    }
+    return;
+  }
+  const importDecl = t2.importDeclaration(
+    imports.map((entry) => {
+      return t2.importSpecifier(t2.identifier(entry.localName), t2.identifier(entry.importedName));
+    }),
+    t2.stringLiteral(source)
+  );
+  const idx = findLastImportIndex(ast);
+  ast.program.body.splice(idx + 1, 0, importDecl);
+}
+function extractChain(node, cssBinding) {
+  const chain = [];
+  let current = node;
+  while (true) {
+    if (t2.isIdentifier(current, { name: cssBinding })) {
+      chain.reverse();
+      return chain;
+    }
+    if (t2.isMemberExpression(current) && !current.computed && t2.isIdentifier(current.property)) {
+      const name = current.property.name;
+      if (name === "else") {
+        chain.push({ type: "else" });
+      } else {
+        chain.push({ type: "getter", name });
+      }
+      current = current.object;
+      continue;
+    }
+    if (t2.isCallExpression(current) && t2.isMemberExpression(current.callee) && !current.callee.computed && t2.isIdentifier(current.callee.property)) {
+      const name = current.callee.property.name;
+      if (name === "if") {
+        chain.push({
+          type: "if",
+          conditionNode: current.arguments[0]
+        });
+        current = current.callee.object;
+        continue;
+      }
+      chain.push({
+        type: "call",
+        name,
+        args: current.arguments
+      });
+      current = current.callee.object;
+      continue;
+    }
+    return null;
+  }
+}
+
 // src/plugin/resolve-chain.ts
 function emptyConditionContext() {
   return {
@@ -1497,9 +1739,10 @@ function applyModifierNodeToConditionContext(context, node, mapping) {
     context.pseudoClass = pseudoSelector(node.name);
   }
 }
-function resolveFullChain(chain, mapping) {
+function resolveFullChain(chain, mapping, cssBindingName, initialContext = emptyConditionContext()) {
   const parts = [];
   const markers = [];
+  const nestedErrors = [];
   const filteredChain = [];
   const scanErrors = [];
   for (let j = 0; j < chain.length; j++) {
@@ -1518,15 +1761,15 @@ function resolveFullChain(chain, mapping) {
   }
   let i = 0;
   let currentNodes = [];
-  let currentContext = emptyConditionContext();
-  let currentNodesStartContext = emptyConditionContext();
+  let currentContext = cloneConditionContext(initialContext);
+  let currentNodesStartContext = cloneConditionContext(initialContext);
   function flushCurrentNodes() {
     if (currentNodes.length === 0) {
       return;
     }
     parts.push({
       type: "unconditional",
-      segments: resolveChain(currentNodes, mapping, currentNodesStartContext)
+      segments: resolveChain(currentNodes, mapping, currentNodesStartContext, cssBindingName)
     });
     currentNodes = [];
     currentNodesStartContext = cloneConditionContext(currentContext);
@@ -1548,13 +1791,22 @@ function resolveFullChain(chain, mapping) {
         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);
-        const elseSegs = resolveChain(elseNodes, mapping, branchContext);
+        const thenSegs = resolveChain(thenNodes, mapping, branchContext, cssBindingName);
+        const elseSegs = resolveChain(elseNodes, mapping, branchContext, cssBindingName);
         parts.push({ type: "unconditional", segments: [...thenSegs, ...elseSegs] });
         i = filteredChain.length;
         break;
       }
     }
+    if (isWhenObjectCall(node)) {
+      flushCurrentNodes();
+      const resolved = resolveWhenObjectSelectors(node, mapping, cssBindingName, currentContext);
+      parts.push(...resolved.parts);
+      markers.push(...resolved.markers);
+      nestedErrors.push(...resolved.errors);
+      i++;
+      continue;
+    }
     if (node.type === "if") {
       if (node.conditionNode.type === "StringLiteral") {
         const mediaQuery = node.conditionNode.value;
@@ -1584,8 +1836,8 @@ function resolveFullChain(chain, mapping) {
         }
         i++;
       }
-      const thenSegs = resolveChain(thenNodes, mapping, branchContext);
-      const elseSegs = resolveChain(elseNodes, mapping, branchContext);
+      const thenSegs = resolveChain(thenNodes, mapping, branchContext, cssBindingName);
+      const elseSegs = resolveChain(elseNodes, mapping, branchContext, cssBindingName);
       parts.push({
         type: "conditional",
         conditionNode: node.conditionNode,
@@ -1607,21 +1859,87 @@ function resolveFullChain(chain, mapping) {
       }
     }
   }
-  return { parts, markers, errors: [...scanErrors, ...segmentErrors] };
+  return { parts, markers, errors: [.../* @__PURE__ */ new Set([...scanErrors, ...nestedErrors, ...segmentErrors])] };
 }
-function getMediaConditionalStartNode(node, mapping) {
-  if (node.type === "if" && node.conditionNode.type === "StringLiteral") {
+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) {
+  if (!cssBindingName) {
     return {
-      inverseMediaQuery: invertMediaQuery(node.conditionNode.value),
-      thenNodes: [makeMediaQueryNode(node.conditionNode.value)]
+      parts: [],
+      markers: [],
+      errors: [new UnsupportedPatternError(`when({ ... }) requires a resolvable Css binding`).message]
     };
   }
-  if (node.type === "getter" && mapping.breakpoints && node.name in mapping.breakpoints) {
-    return { inverseMediaQuery: invertMediaQuery(mapping.breakpoints[node.name]) };
+  const objectArg = node.args[0];
+  if (objectArg.type !== "ObjectExpression") {
+    throw new UnsupportedPatternError(`when({ ... }) requires an object literal argument`);
   }
-  return null;
-}
-function findElseIndex(chain, start) {
+  const parts = [];
+  const markers = [];
+  const errors = [];
+  for (const property of objectArg.properties) {
+    try {
+      if (property.type === "SpreadElement") {
+        throw new UnsupportedPatternError(`when({ ... }) does not support spread properties`);
+      }
+      if (property.type !== "ObjectProperty") {
+        throw new UnsupportedPatternError(`when({ ... }) only supports plain object properties`);
+      }
+      if (property.computed || property.key.type !== "StringLiteral") {
+        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);
+      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);
+      parts.push(...resolved.parts);
+      markers.push(...resolved.markers);
+      errors.push(...resolved.errors);
+    } catch (err) {
+      if (err instanceof UnsupportedPatternError) {
+        errors.push(err.message);
+      } else {
+        throw err;
+      }
+    }
+  }
+  return { parts, markers, errors: [...new Set(errors)] };
+}
+function flattenWhenObjectParts(resolved) {
+  const segments = [];
+  for (const part of resolved.parts) {
+    if (part.type !== "unconditional") {
+      throw new UnsupportedPatternError(`when({ ... }) values cannot use if()/else in this context`);
+    }
+    segments.push(...part.segments);
+  }
+  for (const err of resolved.errors) {
+    segments.push({ abbr: "__error", defs: {}, error: err });
+  }
+  return segments;
+}
+function getMediaConditionalStartNode(node, mapping) {
+  if (node.type === "if" && node.conditionNode.type === "StringLiteral") {
+    return {
+      inverseMediaQuery: invertMediaQuery(node.conditionNode.value),
+      thenNodes: [makeMediaQueryNode(node.conditionNode.value)]
+    };
+  }
+  if (node.type === "getter" && mapping.breakpoints && node.name in mapping.breakpoints) {
+    return { inverseMediaQuery: invertMediaQuery(mapping.breakpoints[node.name]) };
+  }
+  return null;
+}
+function findElseIndex(chain, start) {
   for (let i = start; i < chain.length; i++) {
     if (chain[i].type === "if") {
       return -1;
@@ -1656,7 +1974,7 @@ function invertMediaQuery(query) {
   }
   return query.replace("@media", "@media not");
 }
-function resolveChain(chain, mapping, initialContext = emptyConditionContext()) {
+function resolveChain(chain, mapping, initialContext = emptyConditionContext(), cssBindingName) {
   const segments = [];
   const context = cloneConditionContext(initialContext);
   for (const node of chain) {
@@ -1751,6 +2069,11 @@ function resolveChain(chain, mapping, initialContext = emptyConditionContext())
           continue;
         }
         if (abbr === "when") {
+          if (isWhenObjectCall(node)) {
+            const resolved2 = resolveWhenObjectSelectors(node, mapping, cssBindingName, context);
+            segments.push(...flattenWhenObjectParts(resolved2));
+            continue;
+          }
           const resolved = resolveWhenCall(node);
           if (resolved.kind === "selector") {
             context.pseudoClass = resolved.pseudo;
@@ -2120,399 +2443,167 @@ function resolveWhenCall(node) {
   if (relationshipArg.type !== "StringLiteral") {
     throw new UnsupportedPatternError(`when() relationship argument must be a string literal`);
   }
-  const relationship = relationshipArg.value;
-  if (!WHEN_RELATIONSHIPS.has(relationship)) {
-    throw new UnsupportedPatternError(
-      `when() relationship must be one of: ${[...WHEN_RELATIONSHIPS].join(", ")} -- got "${relationship}"`
-    );
-  }
-  const pseudoArg = node.args[2];
-  if (pseudoArg.type !== "StringLiteral") {
-    throw new UnsupportedPatternError(`when() pseudo selector (3rd argument) must be a string literal`);
-  }
-  return { kind: "relationship", pseudo: pseudoArg.value, markerNode, relationship };
-}
-function resolveWhenMarker(node) {
-  if (isDefaultMarkerNode(node)) {
-    return void 0;
-  }
-  if (node.type === "Identifier") {
-    return node;
-  }
-  throw new UnsupportedPatternError(`when() marker must be a marker variable or marker`);
-}
-function isDefaultMarkerNode(node) {
-  if (node.type === "Identifier" && (node.name === "marker" || node.name === "defaultMarker")) {
-    return true;
-  }
-  return isLegacyDefaultMarkerExpression(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";
-}
-var PSEUDO_METHODS = {
-  onHover: ":hover",
-  onFocus: ":focus",
-  onFocusVisible: ":focus-visible",
-  onFocusWithin: ":focus-within",
-  onActive: ":active",
-  onDisabled: ":disabled",
-  ifFirstOfType: ":first-of-type",
-  ifLastOfType: ":last-of-type"
-};
-function isPseudoMethod(name) {
-  return name in PSEUDO_METHODS;
-}
-function pseudoSelector(name) {
-  return PSEUDO_METHODS[name];
-}
-function tryEvaluateLiteral(node, incremented, increment) {
-  if (node.type === "NumericLiteral") {
-    if (incremented) {
-      return `${node.value * increment}px`;
-    }
-    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) {
-      return `${val * increment}px`;
-    }
-    return String(val);
-  }
-  return null;
-}
-function tryEvaluatePxLiteral(node) {
-  if (node.type === "NumericLiteral") {
-    return `${node.value}px`;
-  }
-  return null;
-}
-function containerSelectorFromCall(node) {
-  if (node.args.length !== 1) {
-    throw new UnsupportedPatternError(`ifContainer() expects exactly 1 argument, got ${node.args.length}`);
-  }
-  const arg = node.args[0];
-  if (!arg || arg.type !== "ObjectExpression") {
-    throw new UnsupportedPatternError("ifContainer() expects an object literal argument");
-  }
-  let lt;
-  let gt;
-  let name;
-  for (const prop of arg.properties) {
-    if (prop.type === "SpreadElement") {
-      throw new UnsupportedPatternError("ifContainer() does not support spread properties");
-    }
-    if (prop.type !== "ObjectProperty" || prop.computed) {
-      throw new UnsupportedPatternError("ifContainer() expects plain object properties");
-    }
-    const key = objectPropertyName(prop.key);
-    if (!key) {
-      throw new UnsupportedPatternError("ifContainer() only supports identifier/string keys");
-    }
-    const valueNode = prop.value;
-    if (key === "lt") {
-      lt = numericLiteralValue(valueNode, "ifContainer().lt must be a numeric literal");
-      continue;
-    }
-    if (key === "gt") {
-      gt = numericLiteralValue(valueNode, "ifContainer().gt must be a numeric literal");
-      continue;
-    }
-    if (key === "name") {
-      name = stringLiteralValue(valueNode, "ifContainer().name must be a string literal");
-      continue;
-    }
-    throw new UnsupportedPatternError(`ifContainer() does not support property "${key}"`);
-  }
-  if (lt === void 0 && gt === void 0) {
-    throw new UnsupportedPatternError('ifContainer() requires at least one of "lt" or "gt"');
-  }
-  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 objectPropertyName(node) {
-  if (node.type === "Identifier") return node.name;
-  if (node.type === "StringLiteral") return node.value;
-  return null;
-}
-function numericLiteralValue(node, errorMessage) {
-  if (node.type === "NumericLiteral") {
-    return node.value;
-  }
-  if (node.type === "UnaryExpression" && node.operator === "-" && node.argument.type === "NumericLiteral") {
-    return -node.argument.value;
-  }
-  throw new UnsupportedPatternError(errorMessage);
-}
-function stringLiteralValue(node, errorMessage) {
-  if (node.type === "StringLiteral") {
-    return node.value;
-  }
-  if (node.type === "TemplateLiteral" && node.expressions.length === 0 && node.quasis.length === 1) {
-    return node.quasis[0].value.cooked ?? "";
-  }
-  throw new UnsupportedPatternError(errorMessage);
-}
-var UnsupportedPatternError = class extends Error {
-  constructor(message) {
-    super(`[truss] Unsupported pattern: ${message}`);
-    this.name = "UnsupportedPatternError";
-  }
-};
-
-// src/plugin/ast-utils.ts
-import * as t2 from "@babel/types";
-function collectTopLevelBindings(ast) {
-  const used = /* @__PURE__ */ new Set();
-  for (const node of ast.program.body) {
-    if (t2.isImportDeclaration(node)) {
-      for (const spec of node.specifiers) {
-        used.add(spec.local.name);
-      }
-      continue;
-    }
-    if (t2.isVariableDeclaration(node)) {
-      for (const decl of node.declarations) {
-        collectPatternBindings(decl.id, used);
-      }
-      continue;
-    }
-    if (t2.isFunctionDeclaration(node) && node.id) {
-      used.add(node.id.name);
-      continue;
-    }
-    if (t2.isClassDeclaration(node) && node.id) {
-      used.add(node.id.name);
-      continue;
-    }
-    if (t2.isExportNamedDeclaration(node) && node.declaration) {
-      const decl = node.declaration;
-      if (t2.isVariableDeclaration(decl)) {
-        for (const varDecl of decl.declarations) {
-          collectPatternBindings(varDecl.id, used);
-        }
-      } else if ((t2.isFunctionDeclaration(decl) || t2.isClassDeclaration(decl)) && decl.id) {
-        used.add(decl.id.name);
-      }
-      continue;
-    }
-    if (t2.isExportDefaultDeclaration(node)) {
-      const decl = node.declaration;
-      if ((t2.isFunctionDeclaration(decl) || t2.isClassDeclaration(decl)) && decl.id) {
-        used.add(decl.id.name);
-      }
-    }
-  }
-  return used;
-}
-function collectPatternBindings(pattern, used) {
-  if (t2.isVoidPattern(pattern)) {
-    return;
-  }
-  if (t2.isIdentifier(pattern)) {
-    used.add(pattern.name);
-    return;
-  }
-  if (t2.isAssignmentPattern(pattern)) {
-    collectPatternBindings(pattern.left, used);
-    return;
-  }
-  if (t2.isRestElement(pattern)) {
-    collectPatternBindings(pattern.argument, used);
-    return;
-  }
-  if (t2.isObjectPattern(pattern)) {
-    for (const prop of pattern.properties) {
-      if (t2.isObjectProperty(prop)) {
-        collectPatternBindings(prop.value, used);
-      } else if (t2.isRestElement(prop)) {
-        collectPatternBindings(prop.argument, used);
-      }
-    }
-    return;
-  }
-  if (t2.isArrayPattern(pattern)) {
-    for (const el of pattern.elements) {
-      if (!el) continue;
-      if (t2.isIdentifier(el) || t2.isAssignmentPattern(el) || t2.isObjectPattern(el) || t2.isArrayPattern(el)) {
-        collectPatternBindings(el, used);
-      } else if (t2.isRestElement(el)) {
-        collectPatternBindings(el.argument, used);
-      }
-    }
-  }
-}
-function reservePreferredName(used, preferred, secondary) {
-  if (!used.has(preferred)) {
-    used.add(preferred);
-    return preferred;
-  }
-  if (secondary && !used.has(secondary)) {
-    used.add(secondary);
-    return secondary;
-  }
-  const base = secondary ?? preferred;
-  let i = 1;
-  let candidate = `${base}_${i}`;
-  while (used.has(candidate)) {
-    i++;
-    candidate = `${base}_${i}`;
-  }
-  used.add(candidate);
-  return candidate;
-}
-function findCssImportBinding(ast) {
-  for (const node of ast.program.body) {
-    if (!t2.isImportDeclaration(node)) continue;
-    for (const spec of node.specifiers) {
-      if (t2.isImportSpecifier(spec) && t2.isIdentifier(spec.imported, { name: "Css" })) {
-        return spec.local.name;
-      }
-    }
+  const relationship = relationshipArg.value;
+  if (!WHEN_RELATIONSHIPS.has(relationship)) {
+    throw new UnsupportedPatternError(
+      `when() relationship must be one of: ${[...WHEN_RELATIONSHIPS].join(", ")} -- got "${relationship}"`
+    );
   }
-  return null;
+  const pseudoArg = node.args[2];
+  if (pseudoArg.type !== "StringLiteral") {
+    throw new UnsupportedPatternError(`when() pseudo selector (3rd argument) must be a string literal`);
+  }
+  return { kind: "relationship", pseudo: pseudoArg.value, markerNode, relationship };
 }
-function findCssBuilderBinding(ast) {
-  for (const node of ast.program.body) {
-    if (!t2.isVariableDeclaration(node)) continue;
-    for (const decl of node.declarations) {
-      if (t2.isIdentifier(decl.id) && decl.init && t2.isNewExpression(decl.init) && t2.isIdentifier(decl.init.callee, { name: "CssBuilder" })) {
-        return decl.id.name;
-      }
-    }
+function resolveWhenMarker(node) {
+  if (isDefaultMarkerNode(node)) {
+    return void 0;
   }
-  return null;
+  if (node.type === "Identifier") {
+    return node;
+  }
+  throw new UnsupportedPatternError(`when() marker must be a marker variable or marker`);
 }
-function removeCssImport(ast, cssBinding) {
-  for (let i = 0; i < ast.program.body.length; i++) {
-    const node = ast.program.body[i];
-    if (!t2.isImportDeclaration(node)) continue;
-    const cssSpecIndex = node.specifiers.findIndex((s) => t2.isImportSpecifier(s) && s.local.name === cssBinding);
-    if (cssSpecIndex === -1) continue;
-    if (node.specifiers.length === 1) {
-      ast.program.body.splice(i, 1);
-    } else {
-      node.specifiers.splice(cssSpecIndex, 1);
-    }
-    return;
+function isDefaultMarkerNode(node) {
+  if (node.type === "Identifier" && (node.name === "marker" || node.name === "defaultMarker")) {
+    return true;
   }
+  return isLegacyDefaultMarkerExpression(node);
 }
-function findLastImportIndex(ast) {
-  let lastImportIndex = -1;
-  for (let i = 0; i < ast.program.body.length; i++) {
-    if (t2.isImportDeclaration(ast.program.body[i])) {
-      lastImportIndex = i;
+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";
+}
+var PSEUDO_METHODS = {
+  onHover: ":hover",
+  onFocus: ":focus",
+  onFocusVisible: ":focus-visible",
+  onFocusWithin: ":focus-within",
+  onActive: ":active",
+  onDisabled: ":disabled",
+  ifFirstOfType: ":first-of-type",
+  ifLastOfType: ":last-of-type"
+};
+function isPseudoMethod(name) {
+  return name in PSEUDO_METHODS;
+}
+function pseudoSelector(name) {
+  return PSEUDO_METHODS[name];
+}
+function tryEvaluateLiteral(node, incremented, increment) {
+  if (node.type === "NumericLiteral") {
+    if (incremented) {
+      return `${node.value * increment}px`;
     }
+    return String(node.value);
   }
-  return lastImportIndex;
-}
-function findNamedImportBinding(ast, source, importedName) {
-  for (const node of ast.program.body) {
-    if (!t2.isImportDeclaration(node) || node.source.value !== source) continue;
-    for (const spec of node.specifiers) {
-      if (t2.isImportSpecifier(spec) && t2.isIdentifier(spec.imported, { name: importedName })) {
-        return spec.local.name;
-      }
+  if (node.type === "StringLiteral") {
+    return node.value;
+  }
+  if (node.type === "UnaryExpression" && node.operator === "-" && node.argument.type === "NumericLiteral") {
+    const val = -node.argument.value;
+    if (incremented) {
+      return `${val * increment}px`;
     }
+    return String(val);
   }
   return null;
 }
-function findImportDeclaration(ast, source) {
-  for (const node of ast.program.body) {
-    if (t2.isImportDeclaration(node) && node.source.value === source) {
-      return node;
-    }
+function tryEvaluatePxLiteral(node) {
+  if (node.type === "NumericLiteral") {
+    return `${node.value}px`;
   }
   return null;
 }
-function replaceCssImportWithNamedImports(ast, cssBinding, source, imports) {
-  for (const node of ast.program.body) {
-    if (!t2.isImportDeclaration(node)) continue;
-    const cssSpecIndex = node.specifiers.findIndex((spec) => {
-      return t2.isImportSpecifier(spec) && spec.local.name === cssBinding;
-    });
-    if (cssSpecIndex === -1 || node.specifiers.length !== 1) continue;
-    node.source = t2.stringLiteral(source);
-    node.specifiers = imports.map((entry) => {
-      return t2.importSpecifier(t2.identifier(entry.localName), t2.identifier(entry.importedName));
-    });
-    return true;
+function containerSelectorFromCall(node) {
+  if (node.args.length !== 1) {
+    throw new UnsupportedPatternError(`ifContainer() expects exactly 1 argument, got ${node.args.length}`);
   }
-  return false;
-}
-function upsertNamedImports(ast, source, imports) {
-  if (imports.length === 0) return;
-  for (const node of ast.program.body) {
-    if (!t2.isImportDeclaration(node) || node.source.value !== source) continue;
-    for (const entry of imports) {
-      const exists = node.specifiers.some((spec) => {
-        return t2.isImportSpecifier(spec) && t2.isIdentifier(spec.imported, { name: entry.importedName });
-      });
-      if (exists) continue;
-      node.specifiers.push(t2.importSpecifier(t2.identifier(entry.localName), t2.identifier(entry.importedName)));
+  const arg = node.args[0];
+  if (!arg || arg.type !== "ObjectExpression") {
+    throw new UnsupportedPatternError("ifContainer() expects an object literal argument");
+  }
+  let lt;
+  let gt;
+  let name;
+  for (const prop of arg.properties) {
+    if (prop.type === "SpreadElement") {
+      throw new UnsupportedPatternError("ifContainer() does not support spread properties");
     }
-    return;
+    if (prop.type !== "ObjectProperty" || prop.computed) {
+      throw new UnsupportedPatternError("ifContainer() expects plain object properties");
+    }
+    const key = objectPropertyName(prop.key);
+    if (!key) {
+      throw new UnsupportedPatternError("ifContainer() only supports identifier/string keys");
+    }
+    const valueNode = prop.value;
+    if (key === "lt") {
+      lt = numericLiteralValue(valueNode, "ifContainer().lt must be a numeric literal");
+      continue;
+    }
+    if (key === "gt") {
+      gt = numericLiteralValue(valueNode, "ifContainer().gt must be a numeric literal");
+      continue;
+    }
+    if (key === "name") {
+      name = stringLiteralValue(valueNode, "ifContainer().name must be a string literal");
+      continue;
+    }
+    throw new UnsupportedPatternError(`ifContainer() does not support property "${key}"`);
   }
-  const importDecl = t2.importDeclaration(
-    imports.map((entry) => {
-      return t2.importSpecifier(t2.identifier(entry.localName), t2.identifier(entry.importedName));
-    }),
-    t2.stringLiteral(source)
-  );
-  const idx = findLastImportIndex(ast);
-  ast.program.body.splice(idx + 1, 0, importDecl);
+  if (lt === void 0 && gt === void 0) {
+    throw new UnsupportedPatternError('ifContainer() requires at least one of "lt" or "gt"');
+  }
+  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 extractChain(node, cssBinding) {
-  const chain = [];
+function objectPropertyName(node) {
+  if (node.type === "Identifier") return node.name;
+  if (node.type === "StringLiteral") return node.value;
+  return null;
+}
+function unwrapExpression(node) {
   let current = node;
   while (true) {
-    if (t2.isIdentifier(current, { name: cssBinding })) {
-      chain.reverse();
-      return chain;
-    }
-    if (t2.isMemberExpression(current) && !current.computed && t2.isIdentifier(current.property)) {
-      const name = current.property.name;
-      if (name === "else") {
-        chain.push({ type: "else" });
-      } else {
-        chain.push({ type: "getter", name });
-      }
-      current = current.object;
-      continue;
-    }
-    if (t2.isCallExpression(current) && t2.isMemberExpression(current.callee) && !current.callee.computed && t2.isIdentifier(current.callee.property)) {
-      const name = current.callee.property.name;
-      if (name === "if") {
-        chain.push({
-          type: "if",
-          conditionNode: current.arguments[0]
-        });
-        current = current.callee.object;
-        continue;
-      }
-      chain.push({
-        type: "call",
-        name,
-        args: current.arguments
-      });
-      current = current.callee.object;
+    if (current.type === "ParenthesizedExpression" || current.type === "TSAsExpression" || current.type === "TSTypeAssertion" || current.type === "TSNonNullExpression" || current.type === "TSSatisfiesExpression") {
+      current = current.expression;
       continue;
     }
-    return null;
+    return current;
+  }
+}
+function numericLiteralValue(node, errorMessage) {
+  if (node.type === "NumericLiteral") {
+    return node.value;
+  }
+  if (node.type === "UnaryExpression" && node.operator === "-" && node.argument.type === "NumericLiteral") {
+    return -node.argument.value;
+  }
+  throw new UnsupportedPatternError(errorMessage);
+}
+function stringLiteralValue(node, errorMessage) {
+  if (node.type === "StringLiteral") {
+    return node.value;
+  }
+  if (node.type === "TemplateLiteral" && node.expressions.length === 0 && node.quasis.length === 1) {
+    return node.quasis[0].value.cooked ?? "";
   }
+  throw new UnsupportedPatternError(errorMessage);
 }
+var UnsupportedPatternError = class extends Error {
+  constructor(message) {
+    super(`[truss] Unsupported pattern: ${message}`);
+    this.name = "UnsupportedPatternError";
+  }
+};
 
 // src/plugin/rewrite-sites.ts
 import _traverse from "@babel/traverse";
@@ -2552,6 +2643,20 @@ function getCssAttributePath(path) {
 function buildStyleHashFromChain(chain, options) {
   const members = [];
   const previousProperties = /* @__PURE__ */ new Map();
+  const pendingUnconditionalSegments = [];
+  function flushPendingUnconditionalSegments() {
+    if (pendingUnconditionalSegments.length === 0) {
+      return;
+    }
+    const partMembers = buildStyleHashMembers(pendingUnconditionalSegments, options);
+    members.push(...partMembers);
+    for (const member of partMembers) {
+      if (t3.isObjectProperty(member)) {
+        previousProperties.set(propertyName(member.key), member);
+      }
+    }
+    pendingUnconditionalSegments.length = 0;
+  }
   if (chain.markers.length > 0) {
     const markerClasses = chain.markers.map((marker) => {
       return markerClassName(marker.markerNode);
@@ -2560,14 +2665,9 @@ function buildStyleHashFromChain(chain, options) {
   }
   for (const part of chain.parts) {
     if (part.type === "unconditional") {
-      const partMembers = buildStyleHashMembers(part.segments, options);
-      members.push(...partMembers);
-      for (const member of partMembers) {
-        if (t3.isObjectProperty(member)) {
-          previousProperties.set(propertyName(member.key), member);
-        }
-      }
+      pendingUnconditionalSegments.push(...part.segments);
     } else {
+      flushPendingUnconditionalSegments();
       const thenMembers = mergeConditionalBranchMembers(
         buildStyleHashMembers(part.thenSegments, options),
         previousProperties,
@@ -2585,6 +2685,7 @@ function buildStyleHashFromChain(chain, options) {
       );
     }
   }
+  flushPendingUnconditionalSegments();
   return t3.objectExpression(members);
 }
 function buildStyleHashMembers(segments, options) {
@@ -2976,11 +3077,14 @@ function transformTruss(code, filename, mapping, options = {}) {
         hasRuntimeStyleCssUsage = true;
         return;
       }
+      if (isInsideWhenObjectValue(path, cssBindingName)) {
+        return;
+      }
       const parentPath = path.parentPath;
       if (parentPath && parentPath.isMemberExpression() && t4.isIdentifier(parentPath.node.property, { name: "$" })) {
         return;
       }
-      const resolvedChain = resolveFullChain(chain, mapping);
+      const resolvedChain = resolveFullChain(chain, mapping, cssBindingName);
       sites.push({ path, resolvedChain });
       const line = path.node.loc?.start.line ?? null;
       for (const err of resolvedChain.errors) {
@@ -3124,6 +3228,19 @@ function isRuntimeStyleCssAttribute2(path) {
   if (!openingElementPath || !openingElementPath.isJSXOpeningElement()) return false;
   return t4.isJSXIdentifier(openingElementPath.node.name, { name: "RuntimeStyle" });
 }
+function isInsideWhenObjectValue(path, cssBindingName) {
+  let current = path.parentPath;
+  while (current) {
+    if (current.isObjectExpression()) {
+      const parent = current.parentPath;
+      if (parent?.isCallExpression() && parent.node.arguments[0] === current.node && t4.isMemberExpression(parent.node.callee) && !parent.node.callee.computed && t4.isIdentifier(parent.node.callee.property, { name: "when" }) && extractChain(parent.node.callee.object, cssBindingName)) {
+        return true;
+      }
+    }
+    current = current.parentPath;
+  }
+  return false;
+}
 function collectRuntimeLookups(chains) {
   const lookups = /* @__PURE__ */ new Map();
   for (const chain of chains) {
@@ -3331,7 +3448,7 @@ function resolveCssExpression(node, cssBindingName, mapping, filename) {
     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" };
   }
-  const resolved = resolveFullChain(chain, mapping);
+  const resolved = resolveFullChain(chain, mapping, cssBindingName);
   if (resolved.errors.length > 0) {
     return { error: resolved.errors[0] };
   }