@homebound/truss 2.15.0 → 2.15.2

package/build/plugin/index.js

@@ -544,7 +544,7 @@ var RELATIONSHIP_BASE = {
   siblingAfter: 40
 };
 function computeRulePriority(rule) {
-  let priority = getPropertyPriority(rule.cssProperty);
+  let priority = getPropertyPriority(rule.declarations[0].cssProperty);
   if (rule.pseudoElement) {
     priority += PSEUDO_ELEMENT_PRIORITY;
   }
@@ -565,10 +565,7 @@ function computeRulePriority(rule) {
   return priority;
 }
 function isVariableRule(rule) {
-  if (rule.declarations) {
-    return rule.declarations.some((d) => d.cssVarName !== void 0);
-  }
-  return rule.cssVarName !== void 0;
+  return rule.declarations.some((d) => d.cssVarName !== void 0);
 }
 function sortRulesByPriority(rules) {
   const decorated = rules.map((rule, i) => {
@@ -1013,6 +1010,27 @@ function whenPrefix(whenPseudo) {
   const markerPart = whenPseudo.markerNode?.type === "Identifier" ? `${whenPseudo.markerNode.name}_` : "";
   return `wh_${rel}_${pseudoTag}_${markerPart}`;
 }
+function conditionPrefix(pseudoClass, mediaQuery, pseudoElement, breakpoints) {
+  const parts = [];
+  if (pseudoElement) {
+    parts.push(`${pseudoElement.replace(/^::/, "")}_`);
+  }
+  if (mediaQuery && breakpoints) {
+    const bpKey = Object.entries(breakpoints).find(([, v]) => v === mediaQuery)?.[0];
+    if (bpKey) {
+      const shortName = bpKey.replace(/^if/, "").toLowerCase();
+      parts.push(`${shortName}_`);
+    } else {
+      parts.push("mq_");
+    }
+  } else if (mediaQuery) {
+    parts.push("mq_");
+  }
+  if (pseudoClass) {
+    parts.push(`${pseudoSelectorTag(pseudoClass)}_`);
+  }
+  return parts.join("");
+}
 function pseudoSelectorTag(pseudo) {
   const replaced = pseudo.trim().replace(/::?[a-zA-Z-]+/g, (match) => {
     return `_${pseudoIdentifierTag(match)}_`;
@@ -1036,27 +1054,6 @@ function normalizePseudoIdentifier(pseudo) {
   });
   return `${prefix}${name}`;
 }
-function conditionPrefix(pseudoClass, mediaQuery, pseudoElement, breakpoints) {
-  const parts = [];
-  if (pseudoElement) {
-    parts.push(`${pseudoElement.replace(/^::/, "")}_`);
-  }
-  if (mediaQuery && breakpoints) {
-    const bpKey = Object.entries(breakpoints).find(([, v]) => v === mediaQuery)?.[0];
-    if (bpKey) {
-      const shortName = bpKey.replace(/^if/, "").toLowerCase();
-      parts.push(`${shortName}_`);
-    } else {
-      parts.push("mq_");
-    }
-  } else if (mediaQuery) {
-    parts.push("mq_");
-  }
-  if (pseudoClass) {
-    parts.push(`${pseudoSelectorTag(pseudoClass)}_`);
-  }
-  return parts.join("");
-}
 function camelToKebab(s) {
   return s.replace(/^(Webkit|Moz|Ms|O)/, (m) => `-${m.toLowerCase()}`).replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 }
@@ -1067,6 +1064,9 @@ function cleanValueForClassName(value) {
   }
   return cleaned.replace(/[^a-zA-Z0-9]/g, "_").replace(/_+/g, "_").replace(/^_|_$/g, "");
 }
+function getPropertyAbbreviation(cssProp) {
+  return cssPropertyAbbreviations[cssProp] ?? cssProp;
+}
 function buildLonghandLookup(mapping) {
   const lookup = /* @__PURE__ */ new Map();
   for (const [abbrev, entry] of Object.entries(mapping.abbreviations)) {
@@ -1091,9 +1091,6 @@ function getLonghandLookup(mapping) {
   }
   return cachedLookup;
 }
-function getPropertyAbbreviation(cssProp) {
-  return cssPropertyAbbreviations[cssProp] ?? cssProp;
-}
 function computeStaticBaseName(seg, cssProp, cssValue, isMultiProp, mapping) {
   const abbr = seg.abbr;
   if (seg.argResolved !== void 0) {
@@ -1145,10 +1142,11 @@ function collectAtomicRules(chains, mapping) {
   return { rules, needsMaybeInc };
 }
 function segmentContext(seg, mapping) {
+  const prefix = `${conditionPrefix(seg.pseudoClass, seg.mediaQuery, seg.pseudoElement, mapping.breakpoints)}${seg.whenPseudo ? whenPrefix(seg.whenPseudo) : ""}`;
   if (seg.whenPseudo) {
     const wp = seg.whenPseudo;
     return {
-      prefix: whenPrefix(wp),
+      prefix,
       whenSelector: {
         relationship: wp.relationship ?? "ancestor",
         markerClass: markerClassName(wp.markerNode),
@@ -1156,7 +1154,7 @@ function segmentContext(seg, mapping) {
       }
     };
   }
-  return { prefix: conditionPrefix(seg.pseudoClass, seg.mediaQuery, seg.pseudoElement, mapping.breakpoints) };
+  return { prefix };
 }
 function baseRuleFields(seg) {
   return {
@@ -1175,9 +1173,8 @@ function collectStaticRules(rules, seg, mapping) {
     if (!rules.has(className)) {
       rules.set(className, {
         className,
-        cssProperty: camelToKebab(cssProp),
-        cssValue,
-        ...!whenSelector && baseRuleFields(seg),
+        declarations: [{ cssProperty: camelToKebab(cssProp), cssValue }],
+        ...baseRuleFields(seg),
         whenSelector
       });
     }
@@ -1193,22 +1190,12 @@ function collectVariableRules(rules, seg, mapping) {
     if (!existingRule) {
       rules.set(className, {
         className,
-        cssProperty: declaration.cssProperty,
-        cssValue: declaration.cssValue,
         declarations: [declaration],
-        cssVarName: varName,
-        ...!whenSelector && baseRuleFields(seg),
+        ...baseRuleFields(seg),
         whenSelector
       });
       continue;
     }
-    existingRule.declarations ??= [
-      {
-        cssProperty: existingRule.cssProperty,
-        cssValue: existingRule.cssValue,
-        cssVarName: existingRule.cssVarName
-      }
-    ];
     if (!existingRule.declarations.some((entry) => {
       return entry.cssProperty === declaration.cssProperty;
     })) {
@@ -1225,9 +1212,8 @@ function collectVariableRules(rules, seg, mapping) {
       if (!rules.has(extraName)) {
         rules.set(extraName, {
           className: extraName,
-          cssProperty: camelToKebab(cssProp),
-          cssValue,
-          ...!whenSelector && baseRuleFields(seg),
+          declarations: [{ cssProperty: camelToKebab(cssProp), cssValue }],
+          ...baseRuleFields(seg),
           whenSelector
         });
       }
@@ -1256,61 +1242,51 @@ function generateCssText(rules) {
   return lines.join("\n");
 }
 function formatRule(rule) {
-  if (rule.whenSelector) return formatWhenRule(rule);
-  if (rule.mediaQuery && rule.pseudoClass) return formatMediaPseudoRule(rule);
-  if (rule.mediaQuery && rule.pseudoElement) return formatMediaPseudoElementRule(rule);
-  if (rule.mediaQuery) return formatMediaRule(rule);
-  if (rule.pseudoClass && rule.pseudoElement) return formatPseudoRule(rule);
-  if (rule.pseudoElement) return formatPseudoElementRule(rule);
-  if (rule.pseudoClass) return formatPseudoRule(rule);
-  return formatBaseRule(rule);
-}
-function formatBaseRule(rule) {
-  return formatRuleBlock(`.${rule.className}`, rule);
-}
-function formatPseudoRule(rule) {
-  const pe = rule.pseudoElement ? rule.pseudoElement : "";
-  return formatRuleBlock(`.${rule.className}${rule.pseudoClass}${pe}`, rule);
-}
-function formatPseudoElementRule(rule) {
-  return formatRuleBlock(`.${rule.className}${rule.pseudoElement}`, rule);
-}
-function formatWhenRule(rule) {
   const whenSelector = rule.whenSelector;
-  if (!whenSelector) {
-    return formatBaseRule(rule);
-  }
+  if (whenSelector) return formatWhenRule(rule, whenSelector);
+  const selector = buildTargetSelector(rule, !!rule.mediaQuery);
+  return formatRuleWithOptionalMedia(rule, selector);
+}
+function formatWhenRule(rule, whenSelector) {
   const markerSelector = `.${whenSelector.markerClass}${whenSelector.pseudo}`;
-  const targetSelector = `.${rule.className}`;
+  const duplicateClassName = !!rule.mediaQuery;
   if (whenSelector.relationship === "ancestor") {
-    return formatRuleBlock(`${markerSelector} ${targetSelector}`, rule);
+    return formatRuleWithOptionalMedia(rule, `${markerSelector} ${buildTargetSelector(rule, duplicateClassName)}`);
   }
   if (whenSelector.relationship === "descendant") {
-    return formatRuleBlock(`${targetSelector}:has(${markerSelector})`, rule);
+    return formatRuleWithOptionalMedia(rule, buildTargetSelector(rule, duplicateClassName, `:has(${markerSelector})`));
   }
   if (whenSelector.relationship === "siblingAfter") {
-    return formatRuleBlock(`${targetSelector}:has(~ ${markerSelector})`, rule);
+    return formatRuleWithOptionalMedia(
+      rule,
+      buildTargetSelector(rule, duplicateClassName, `:has(~ ${markerSelector})`)
+    );
   }
   if (whenSelector.relationship === "siblingBefore") {
-    return formatRuleBlock(`${markerSelector} ~ ${targetSelector}`, rule);
+    return formatRuleWithOptionalMedia(rule, `${markerSelector} ~ ${buildTargetSelector(rule, duplicateClassName)}`);
   }
   if (whenSelector.relationship === "anySibling") {
-    return formatRuleBlock(`${targetSelector}:has(~ ${markerSelector}), ${markerSelector} ~ ${targetSelector}`, rule);
+    const afterSelector = buildTargetSelector(rule, duplicateClassName, `:has(~ ${markerSelector})`);
+    const beforeSelector = `${markerSelector} ~ ${buildTargetSelector(rule, duplicateClassName)}`;
+    return formatRuleWithOptionalMedia(rule, `${afterSelector}, ${beforeSelector}`);
   }
-  return formatRuleBlock(`${markerSelector} ${targetSelector}`, rule);
+  return formatRuleWithOptionalMedia(rule, `${markerSelector} ${buildTargetSelector(rule, duplicateClassName)}`);
 }
-function formatMediaRule(rule) {
-  return formatNestedRuleBlock(rule.mediaQuery, `.${rule.className}.${rule.className}`, rule);
+function buildTargetSelector(rule, duplicateClassName, extraPseudoClass) {
+  const classSelector = duplicateClassName ? `.${rule.className}.${rule.className}` : `.${rule.className}`;
+  const pseudoClass = rule.pseudoClass ?? "";
+  const relationshipPseudoClass = extraPseudoClass ?? "";
+  const pseudoElement = rule.pseudoElement ?? "";
+  return `${classSelector}${pseudoClass}${relationshipPseudoClass}${pseudoElement}`;
 }
-function formatMediaPseudoRule(rule) {
-  return formatNestedRuleBlock(rule.mediaQuery, `.${rule.className}.${rule.className}${rule.pseudoClass}`, rule);
-}
-function formatMediaPseudoElementRule(rule) {
-  const pe = rule.pseudoElement ?? "";
-  return formatNestedRuleBlock(rule.mediaQuery, `.${rule.className}.${rule.className}${pe}`, rule);
+function formatRuleWithOptionalMedia(rule, selector) {
+  if (rule.mediaQuery) {
+    return formatNestedRuleBlock(rule.mediaQuery, selector, rule);
+  }
+  return formatRuleBlock(selector, rule);
 }
 function getRuleDeclarations(rule) {
-  return rule.declarations ?? [{ cssProperty: rule.cssProperty, cssValue: rule.cssValue, cssVarName: rule.cssVarName }];
+  return rule.declarations;
 }
 function formatRuleBlock(selector, rule) {
   const body = getRuleDeclarations(rule).map((declaration) => {
@@ -1449,6 +1425,78 @@ import * as t4 from "@babel/types";
 import { basename } from "path";
 
 // src/plugin/resolve-chain.ts
+function emptyConditionContext() {
+  return {
+    mediaQuery: null,
+    pseudoClass: null,
+    pseudoElement: null,
+    whenPseudo: null
+  };
+}
+function cloneConditionContext(context) {
+  return {
+    mediaQuery: context.mediaQuery,
+    pseudoClass: context.pseudoClass,
+    pseudoElement: context.pseudoElement,
+    whenPseudo: context.whenPseudo ? { ...context.whenPseudo } : null
+  };
+}
+function segmentWithConditionContext(segment, context) {
+  return {
+    ...segment,
+    mediaQuery: context.mediaQuery,
+    pseudoClass: context.pseudoClass,
+    pseudoElement: context.pseudoElement,
+    whenPseudo: context.whenPseudo
+  };
+}
+function applyModifierNodeToConditionContext(context, node, mapping) {
+  if (node.type === "__mediaQuery") {
+    context.mediaQuery = node.mediaQuery;
+    return;
+  }
+  if (node.type === "getter") {
+    if (isPseudoMethod(node.name)) {
+      context.pseudoClass = pseudoSelector(node.name);
+      return;
+    }
+    if (mapping.breakpoints && node.name in mapping.breakpoints) {
+      context.mediaQuery = mapping.breakpoints[node.name];
+    }
+    return;
+  }
+  if (node.type !== "call") {
+    return;
+  }
+  if (node.name === "ifContainer") {
+    try {
+      context.mediaQuery = containerSelectorFromCall(node);
+    } catch {
+    }
+    return;
+  }
+  if (node.name === "element") {
+    if (node.args.length === 1 && node.args[0].type === "StringLiteral") {
+      context.pseudoElement = node.args[0].value;
+    }
+    return;
+  }
+  if (node.name === "when") {
+    try {
+      const resolved = resolveWhenCall(node);
+      if (resolved.kind === "selector") {
+        context.pseudoClass = resolved.pseudo;
+      } else {
+        context.whenPseudo = resolved;
+      }
+    } catch {
+    }
+    return;
+  }
+  if (isPseudoMethod(node.name)) {
+    context.pseudoClass = pseudoSelector(node.name);
+  }
+}
 function resolveFullChain(chain, mapping) {
   const parts = [];
   const markers = [];
@@ -1470,20 +1518,38 @@ function resolveFullChain(chain, mapping) {
   }
   let i = 0;
   let currentNodes = [];
+  let currentContext = emptyConditionContext();
+  let currentNodesStartContext = emptyConditionContext();
+  function flushCurrentNodes() {
+    if (currentNodes.length === 0) {
+      return;
+    }
+    parts.push({
+      type: "unconditional",
+      segments: resolveChain(currentNodes, mapping, currentNodesStartContext)
+    });
+    currentNodes = [];
+    currentNodesStartContext = cloneConditionContext(currentContext);
+  }
+  function pushCurrentNode(nodeToPush) {
+    if (currentNodes.length === 0) {
+      currentNodesStartContext = cloneConditionContext(currentContext);
+    }
+    currentNodes.push(nodeToPush);
+    applyModifierNodeToConditionContext(currentContext, nodeToPush, mapping);
+  }
   while (i < filteredChain.length) {
     const node = filteredChain[i];
     const mediaStart = getMediaConditionalStartNode(node, mapping);
     if (mediaStart) {
       const elseIndex = findElseIndex(filteredChain, i + 1);
       if (elseIndex !== -1) {
-        if (currentNodes.length > 0) {
-          parts.push({ type: "unconditional", segments: resolveChain(currentNodes, mapping) });
-          currentNodes = [];
-        }
+        flushCurrentNodes();
+        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);
-        const elseSegs = resolveChain(elseNodes, mapping);
+        const thenSegs = resolveChain(thenNodes, mapping, branchContext);
+        const elseSegs = resolveChain(elseNodes, mapping, branchContext);
         parts.push({ type: "unconditional", segments: [...thenSegs, ...elseSegs] });
         i = filteredChain.length;
         break;
@@ -1492,14 +1558,12 @@ function resolveFullChain(chain, mapping) {
     if (node.type === "if") {
       if (node.conditionNode.type === "StringLiteral") {
         const mediaQuery = node.conditionNode.value;
-        currentNodes.push({ type: "__mediaQuery", mediaQuery });
+        pushCurrentNode({ type: "__mediaQuery", mediaQuery });
         i++;
         continue;
       }
-      if (currentNodes.length > 0) {
-        parts.push({ type: "unconditional", segments: resolveChain(currentNodes, mapping) });
-        currentNodes = [];
-      }
+      flushCurrentNodes();
+      const branchContext = cloneConditionContext(currentContext);
       const thenNodes = [];
       const elseNodes = [];
       i++;
@@ -1520,8 +1584,8 @@ function resolveFullChain(chain, mapping) {
         }
         i++;
       }
-      const thenSegs = resolveChain(thenNodes, mapping);
-      const elseSegs = resolveChain(elseNodes, mapping);
+      const thenSegs = resolveChain(thenNodes, mapping, branchContext);
+      const elseSegs = resolveChain(elseNodes, mapping, branchContext);
       parts.push({
         type: "conditional",
         conditionNode: node.conditionNode,
@@ -1529,13 +1593,11 @@ function resolveFullChain(chain, mapping) {
         elseSegments: elseSegs
       });
     } else {
-      currentNodes.push(node);
+      pushCurrentNode(node);
       i++;
     }
   }
-  if (currentNodes.length > 0) {
-    parts.push({ type: "unconditional", segments: resolveChain(currentNodes, mapping) });
-  }
+  flushCurrentNodes();
   const segmentErrors = [];
   for (const part of parts) {
     const segs = part.type === "unconditional" ? part.segments : [...part.thenSegments, ...part.elseSegments];
@@ -1594,29 +1656,23 @@ function invertMediaQuery(query) {
   }
   return query.replace("@media", "@media not");
 }
-function resolveChain(chain, mapping) {
+function resolveChain(chain, mapping, initialContext = emptyConditionContext()) {
   const segments = [];
-  let currentMediaQuery = null;
-  let currentPseudoClass = null;
-  let currentPseudoElement = null;
-  let currentWhenPseudo = null;
+  const context = cloneConditionContext(initialContext);
   for (const node of chain) {
     try {
       if (node.type === "__mediaQuery") {
-        currentMediaQuery = node.mediaQuery;
-        currentWhenPseudo = null;
+        context.mediaQuery = node.mediaQuery;
         continue;
       }
       if (node.type === "getter") {
         const abbr = node.name;
         if (isPseudoMethod(abbr)) {
-          currentPseudoClass = pseudoSelector(abbr);
-          currentWhenPseudo = null;
+          context.pseudoClass = pseudoSelector(abbr);
           continue;
         }
         if (mapping.breakpoints && abbr in mapping.breakpoints) {
-          currentMediaQuery = mapping.breakpoints[abbr];
-          currentWhenPseudo = null;
+          context.mediaQuery = mapping.breakpoints[abbr];
           continue;
         }
         const entry = mapping.abbreviations[abbr];
@@ -1627,27 +1683,26 @@ function resolveChain(chain, mapping) {
           abbr,
           entry,
           mapping,
-          currentMediaQuery,
-          currentPseudoClass,
-          currentPseudoElement,
-          currentWhenPseudo
+          context.mediaQuery,
+          context.pseudoClass,
+          context.pseudoElement,
+          context.whenPseudo
         );
         segments.push(...resolved);
       } else if (node.type === "call") {
         const abbr = node.name;
         if (abbr === "ifContainer") {
-          currentMediaQuery = containerSelectorFromCall(node);
-          currentWhenPseudo = null;
+          context.mediaQuery = containerSelectorFromCall(node);
           continue;
         }
         if (abbr === "add" || abbr === "addCss") {
           const seg = resolveAddCall(
             node,
             mapping,
-            currentMediaQuery,
-            currentPseudoClass,
-            currentPseudoElement,
-            currentWhenPseudo
+            context.mediaQuery,
+            context.pseudoClass,
+            context.pseudoElement,
+            context.whenPseudo
           );
           segments.push(seg);
           continue;
@@ -1655,10 +1710,10 @@ function resolveChain(chain, mapping) {
         if (abbr === "className") {
           const seg = resolveClassNameCall(
             node,
-            currentMediaQuery,
-            currentPseudoClass,
-            currentPseudoElement,
-            currentWhenPseudo
+            context.mediaQuery,
+            context.pseudoClass,
+            context.pseudoElement,
+            context.whenPseudo
           );
           segments.push(seg);
           continue;
@@ -1667,9 +1722,10 @@ function resolveChain(chain, mapping) {
           const resolved = resolveTypographyCall(
             node,
             mapping,
-            currentMediaQuery,
-            currentPseudoClass,
-            currentPseudoElement
+            context.mediaQuery,
+            context.pseudoClass,
+            context.pseudoElement,
+            context.whenPseudo
           );
           segments.push(...resolved);
           continue;
@@ -1680,24 +1736,20 @@ function resolveChain(chain, mapping) {
               `element() requires exactly one string literal argument (e.g. "::placeholder")`
             );
           }
-          currentPseudoElement = node.args[0].value;
+          context.pseudoElement = node.args[0].value;
           continue;
         }
         if (abbr === "when") {
           const resolved = resolveWhenCall(node);
           if (resolved.kind === "selector") {
-            currentPseudoClass = resolved.pseudo;
-            currentWhenPseudo = null;
+            context.pseudoClass = resolved.pseudo;
           } else {
-            currentPseudoClass = null;
-            currentMediaQuery = null;
-            currentWhenPseudo = resolved;
+            context.whenPseudo = resolved;
           }
           continue;
         }
         if (isPseudoMethod(abbr)) {
-          currentPseudoClass = pseudoSelector(abbr);
-          currentWhenPseudo = null;
+          context.pseudoClass = pseudoSelector(abbr);
           if (node.args.length > 0) {
             throw new UnsupportedPatternError(
               `${abbr}() does not take arguments -- use when(marker, "ancestor", ":hover") for relationship selectors`
@@ -1715,10 +1767,10 @@ function resolveChain(chain, mapping) {
             entry,
             node,
             mapping,
-            currentMediaQuery,
-            currentPseudoClass,
-            currentPseudoElement,
-            currentWhenPseudo
+            context.mediaQuery,
+            context.pseudoClass,
+            context.pseudoElement,
+            context.whenPseudo
           );
           segments.push(seg);
         } else if (entry.kind === "delegate") {
@@ -1727,10 +1779,10 @@ function resolveChain(chain, mapping) {
             entry,
             node,
             mapping,
-            currentMediaQuery,
-            currentPseudoClass,
-            currentPseudoElement,
-            currentWhenPseudo
+            context.mediaQuery,
+            context.pseudoClass,
+            context.pseudoElement,
+            context.whenPseudo
           );
           segments.push(seg);
         } else {
@@ -1747,7 +1799,7 @@ function resolveChain(chain, mapping) {
   }
   return segments;
 }
-function typographyLookupKeySuffix(mediaQuery, pseudoClass, pseudoElement, breakpoints) {
+function typographyLookupKeySuffix(mediaQuery, pseudoClass, pseudoElement, whenPseudo, breakpoints) {
   const parts = [];
   if (pseudoElement) parts.push(pseudoElement.replace(/^::/, ""));
   if (mediaQuery && breakpoints) {
@@ -1757,25 +1809,36 @@ function typographyLookupKeySuffix(mediaQuery, pseudoClass, pseudoElement, break
     parts.push("mq");
   }
   if (pseudoClass) parts.push(pseudoClass.replace(/^:+/, "").replace(/-/g, "_"));
+  if (whenPseudo) parts.push(whenLookupKeyPart(whenPseudo));
+  return parts.join("_");
+}
+function whenLookupKeyPart(whenPseudo) {
+  const parts = ["when", whenPseudo.relationship ?? "ancestor", sanitizeLookupToken(whenPseudo.pseudo)];
+  if (whenPseudo.markerNode?.type === "Identifier" && whenPseudo.markerNode.name) {
+    parts.push(whenPseudo.markerNode.name);
+  }
   return parts.join("_");
 }
-function resolveTypographyCall(node, mapping, mediaQuery, pseudoClass, pseudoElement) {
+function sanitizeLookupToken(value) {
+  return value.replace(/[^a-zA-Z0-9]+/g, "_").replace(/_+/g, "_").replace(/^_|_$/g, "") || "value";
+}
+function resolveTypographyCall(node, mapping, mediaQuery, pseudoClass, pseudoElement, whenPseudo) {
   if (node.args.length !== 1) {
     throw new UnsupportedPatternError(`typography() expects exactly 1 argument, got ${node.args.length}`);
   }
   const argAst = node.args[0];
   if (argAst.type === "StringLiteral") {
-    return resolveTypographyEntry(argAst.value, mapping, mediaQuery, pseudoClass, pseudoElement);
+    return resolveTypographyEntry(argAst.value, mapping, mediaQuery, pseudoClass, pseudoElement, whenPseudo);
   }
   const typography = mapping.typography ?? [];
   if (typography.length === 0) {
     throw new UnsupportedPatternError(`typography() is unavailable because no typography abbreviations were generated`);
   }
-  const suffix = typographyLookupKeySuffix(mediaQuery, pseudoClass, pseudoElement, mapping.breakpoints);
+  const suffix = typographyLookupKeySuffix(mediaQuery, pseudoClass, pseudoElement, whenPseudo, mapping.breakpoints);
   const lookupKey = suffix ? `typography__${suffix}` : "typography";
   const segmentsByName = {};
   for (const name of typography) {
-    segmentsByName[name] = resolveTypographyEntry(name, mapping, mediaQuery, pseudoClass, pseudoElement);
+    segmentsByName[name] = resolveTypographyEntry(name, mapping, mediaQuery, pseudoClass, pseudoElement, whenPseudo);
   }
   return [
     {
@@ -1789,7 +1852,7 @@ function resolveTypographyCall(node, mapping, mediaQuery, pseudoClass, pseudoEle
     }
   ];
 }
-function resolveTypographyEntry(name, mapping, mediaQuery, pseudoClass, pseudoElement) {
+function resolveTypographyEntry(name, mapping, mediaQuery, pseudoClass, pseudoElement, whenPseudo) {
   if (!(mapping.typography ?? []).includes(name)) {
     throw new UnsupportedPatternError(`Unknown typography abbreviation "${name}"`);
   }
@@ -1797,21 +1860,24 @@ function resolveTypographyEntry(name, mapping, mediaQuery, pseudoClass, pseudoEl
   if (!entry) {
     throw new UnsupportedPatternError(`Unknown typography abbreviation "${name}"`);
   }
-  const resolved = resolveEntry(name, entry, mapping, mediaQuery, pseudoClass, pseudoElement, null);
+  const resolved = resolveEntry(name, entry, mapping, mediaQuery, pseudoClass, pseudoElement, whenPseudo);
   for (const segment of resolved) {
-    if (segment.variableProps || segment.whenPseudo) {
+    if (segment.variableProps) {
       throw new UnsupportedPatternError(`Typography abbreviation "${name}" cannot require runtime arguments`);
     }
   }
   return resolved;
 }
 function resolveEntry(abbr, entry, mapping, mediaQuery, pseudoClass, pseudoElement, whenPseudo) {
+  const context = {
+    mediaQuery,
+    pseudoClass,
+    pseudoElement,
+    whenPseudo
+  };
   switch (entry.kind) {
     case "static": {
-      if (whenPseudo) {
-        return [{ abbr, defs: entry.defs, whenPseudo }];
-      }
-      return [{ abbr, defs: entry.defs, mediaQuery, pseudoClass, pseudoElement }];
+      return [segmentWithConditionContext({ abbr, defs: entry.defs }, context)];
     }
     case "alias": {
       const result = [];
@@ -1874,40 +1940,32 @@ function resolveDelegateCall(abbr, entry, node, mapping, mediaQuery, pseudoClass
 }
 function buildParameterizedSegment(params) {
   const { abbr, props, incremented, appendPx, extraDefs, argAst, literalValue, whenPseudo } = params;
+  const context = {
+    mediaQuery: params.mediaQuery,
+    pseudoClass: params.pseudoClass,
+    pseudoElement: params.pseudoElement,
+    whenPseudo
+  };
   if (literalValue !== null) {
     const defs = {};
     for (const prop of props) {
       defs[prop] = literalValue;
     }
     if (extraDefs) Object.assign(defs, extraDefs);
-    if (whenPseudo) {
-      return { abbr, defs, whenPseudo, argResolved: literalValue };
-    }
-    return {
-      abbr,
-      defs,
-      mediaQuery: params.mediaQuery,
-      pseudoClass: params.pseudoClass,
-      pseudoElement: params.pseudoElement,
-      argResolved: literalValue
-    };
+    return segmentWithConditionContext({ abbr, defs, argResolved: literalValue }, context);
   }
-  const base = {
-    abbr,
-    defs: {},
-    variableProps: props,
-    incremented,
-    variableExtraDefs: extraDefs,
-    argNode: argAst
-  };
+  const base = segmentWithConditionContext(
+    {
+      abbr,
+      defs: {},
+      variableProps: props,
+      incremented,
+      variableExtraDefs: extraDefs,
+      argNode: argAst
+    },
+    context
+  );
   if (appendPx) base.appendPx = true;
-  if (whenPseudo) {
-    base.whenPseudo = whenPseudo;
-  } else {
-    base.mediaQuery = params.mediaQuery;
-    base.pseudoClass = params.pseudoClass;
-    base.pseudoElement = params.pseudoElement;
-  }
   return base;
 }
 function resolveClassNameCall(node, mediaQuery, pseudoClass, pseudoElement, whenPseudo) {
@@ -1977,34 +2035,28 @@ function resolveAddCall(node, mapping, mediaQuery, pseudoClass, pseudoElement, w
   const propName = propArg.value;
   const valueArg = node.args[1];
   const literalValue = tryEvaluateAddLiteral(valueArg);
-  if (whenPseudo) {
-    if (literalValue !== null) {
-      return { abbr: propName, defs: { [propName]: literalValue }, whenPseudo, argResolved: literalValue };
-    } else {
-      return { abbr: propName, defs: {}, whenPseudo, variableProps: [propName], incremented: false, argNode: valueArg };
-    }
-  }
+  const context = {
+    mediaQuery,
+    pseudoClass,
+    pseudoElement,
+    whenPseudo
+  };
   if (literalValue !== null) {
-    return {
-      abbr: propName,
-      defs: { [propName]: literalValue },
-      mediaQuery,
-      pseudoClass,
-      pseudoElement,
-      argResolved: literalValue
-    };
-  } else {
-    return {
+    return segmentWithConditionContext(
+      { abbr: propName, defs: { [propName]: literalValue }, argResolved: literalValue },
+      context
+    );
+  }
+  return segmentWithConditionContext(
+    {
       abbr: propName,
       defs: {},
-      mediaQuery,
-      pseudoClass,
-      pseudoElement,
       variableProps: [propName],
       incremented: false,
       argNode: valueArg
-    };
-  }
+    },
+    context
+  );
 }
 function tryEvaluateAddLiteral(node) {
   if (node.type === "StringLiteral") {
@@ -3358,11 +3410,14 @@ function toVirtualCssSpecifier(source) {
 import { readFileSync } from "fs";
 var RULE_ANNOTATION_RE = /^\/\* @truss p:([\d.]+) c:(\S+) \*\/$/;
 var PROPERTY_ANNOTATION_RE = /^\/\* @truss @property \*\/$/;
+var ARBITRARY_START_RE = /^\/\* @truss arbitrary:start \*\/$/;
+var ARBITRARY_END_RE = /^\/\* @truss arbitrary:end \*\/$/;
 var PROPERTY_VAR_RE = /^@property\s+(--\S+)/;
 function parseTrussCss(cssText) {
   const lines = cssText.split("\n");
   const rules = [];
   const properties = [];
+  const arbitraryCssBlocks = [];
   let i = 0;
   while (i < lines.length) {
     const line = lines[i].trim();
@@ -3391,19 +3446,43 @@ function parseTrussCss(cssText) {
       i++;
       continue;
     }
+    if (ARBITRARY_START_RE.test(line)) {
+      i++;
+      const blockLines = [];
+      while (i < lines.length && !ARBITRARY_END_RE.test(lines[i].trim())) {
+        blockLines.push(lines[i]);
+        i++;
+      }
+      const blockText = blockLines.join("\n").trim();
+      if (blockText.length > 0) {
+        arbitraryCssBlocks.push({ cssText: blockText });
+      }
+      if (i < lines.length && ARBITRARY_END_RE.test(lines[i].trim())) {
+        i++;
+      }
+      continue;
+    }
     i++;
   }
-  return { rules, properties };
+  return { rules, properties, arbitraryCssBlocks };
 }
 function readTrussCss(filePath) {
   const content = readFileSync(filePath, "utf8");
   return parseTrussCss(content);
 }
+function annotateArbitraryCssBlock(cssText) {
+  const trimmed = cssText.trim();
+  if (trimmed.length === 0) {
+    return "";
+  }
+  return ["/* @truss arbitrary:start */", trimmed, "/* @truss arbitrary:end */"].join("\n");
+}
 function mergeTrussCss(sources) {
   const seenClasses = /* @__PURE__ */ new Set();
   const allRules = [];
   const seenProperties = /* @__PURE__ */ new Set();
   const allProperties = [];
+  const allArbitraryCssBlocks = [];
   for (const source of sources) {
     for (const rule of source.rules) {
       if (!seenClasses.has(rule.className)) {
@@ -3417,6 +3496,7 @@ function mergeTrussCss(sources) {
         allProperties.push(prop);
       }
     }
+    allArbitraryCssBlocks.push(...source.arbitraryCssBlocks ?? []);
   }
   allRules.sort((a, b) => {
     const diff = a.priority - b.priority;
@@ -3432,6 +3512,9 @@ function mergeTrussCss(sources) {
     lines.push(`/* @truss @property */`);
     lines.push(prop.cssText);
   }
+  for (const block of allArbitraryCssBlocks) {
+    lines.push(annotateArbitraryCssBlock(block.cssText));
+  }
   return lines.join("\n");
 }
 
@@ -3440,6 +3523,7 @@ import { readFileSync as readFileSync2, writeFileSync, mkdirSync } from "fs";
 import { resolve, join } from "path";
 function trussEsbuildPlugin(opts) {
   const cssRegistry = /* @__PURE__ */ new Map();
+  const arbitraryCssRegistry = /* @__PURE__ */ new Map();
   let mapping = null;
   let outDir;
   return {
@@ -3448,6 +3532,18 @@ function trussEsbuildPlugin(opts) {
       outDir = build.initialOptions.outdir ?? build.initialOptions.outdir;
       build.onLoad({ filter: /\.[cm]?[jt]sx?$/ }, (args) => {
         const code = readFileSync2(args.path, "utf8");
+        if (args.path.endsWith(".css.ts")) {
+          if (!mapping) {
+            mapping = loadMapping(resolve(process.cwd(), opts.mapping));
+          }
+          const css = annotateArbitraryCssBlock(transformCssTs(code, args.path, mapping));
+          if (css.length > 0) {
+            arbitraryCssRegistry.set(args.path, css);
+          } else {
+            arbitraryCssRegistry.delete(args.path);
+          }
+          return { contents: code, loader: loaderForPath(args.path) };
+        }
         if (!code.includes("Css") && !code.includes("css=")) return void 0;
         if (!mapping) {
           mapping = loadMapping(resolve(process.cwd(), opts.mapping));
@@ -3464,8 +3560,11 @@ function trussEsbuildPlugin(opts) {
         return { contents: result.code, loader: loaderForPath(args.path) };
       });
       build.onEnd(() => {
-        if (cssRegistry.size === 0) return;
-        const css = generateCssText(cssRegistry);
+        if (cssRegistry.size === 0 && arbitraryCssRegistry.size === 0) return;
+        const cssParts = [generateCssText(cssRegistry), ...arbitraryCssRegistry.values()].filter(
+          (part) => part.length > 0
+        );
+        const css = cssParts.join("\n");
         const cssFileName = opts.outputCss ?? "truss.css";
         const cssPath = resolve(outDir ?? join(process.cwd(), "dist"), cssFileName);
         mkdirSync(resolve(cssPath, ".."), { recursive: true });
@@ -3565,7 +3664,7 @@ function trussPlugin(opts) {
     },
     transformIndexHtml(html) {
       if (isBuild) {
-        const stripped = html.replace(/\s*<link[^>]*href=["'][^"']*virtual:truss\.css["'][^>]*\/?>/, "");
+        const stripped = html.replace(/\s*<link[^>]*href=["'][^"']*virtual:truss\.css["'][^>]*\/?>/g, "").replace(/\s*<link[^>]*href=["'][^"']*__TRUSS_CSS_HASH__["'][^>]*\/?>/g, "").replace(/\s*<link[^>]*href=["'][^"']*\/assets\/truss-[0-9a-f]+\.css["'][^>]*\/?>/g, "");
         const link = `<link rel="stylesheet" href="${TRUSS_CSS_PLACEHOLDER}">`;
         return stripped.replace("</head>", `    ${link}
   </head>`);