@homebound/truss 2.15.1 → 2.16.0

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) {
@@ -1118,7 +1115,7 @@ function collectAtomicRules(chains, mapping) {
   const rules = /* @__PURE__ */ new Map();
   let needsMaybeInc = false;
   function collectSegment(seg) {
-    if (seg.error || seg.styleArrayArg || seg.classNameArg) return;
+    if (seg.error || seg.styleArrayArg || seg.classNameArg || seg.styleArg) return;
     if (seg.typographyLookup) {
       for (const segments of Object.values(seg.typographyLookup.segmentsByName)) {
         for (const nestedSeg of segments) {
@@ -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) => {
@@ -1339,7 +1315,7 @@ function buildStyleHashProperties(segments, mapping, maybeIncHelperName) {
     entries.push(entry);
   }
   for (const seg of segments) {
-    if (seg.error || seg.styleArrayArg || seg.typographyLookup || seg.classNameArg) continue;
+    if (seg.error || seg.styleArrayArg || seg.typographyLookup || seg.classNameArg || seg.styleArg) continue;
     const { prefix } = segmentContext(seg, mapping);
     const isConditional = prefix !== "";
     if (seg.variableProps) {
@@ -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,21 @@ 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;
+        }
+        if (abbr === "style") {
+          const seg = resolveStyleCall(
+            node,
+            context.mediaQuery,
+            context.pseudoClass,
+            context.pseudoElement,
+            context.whenPseudo
           );
           segments.push(seg);
           continue;
@@ -1667,9 +1733,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 +1747,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 +1778,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 +1790,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 +1810,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 +1820,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 resolveTypographyCall(node, mapping, mediaQuery, pseudoClass, pseudoElement) {
+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 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 +1863,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 +1871,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 +1951,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) {
@@ -1930,6 +1999,25 @@ function resolveClassNameCall(node, mediaQuery, pseudoClass, pseudoElement, when
     classNameArg: arg
   };
 }
+function resolveStyleCall(node, mediaQuery, pseudoClass, pseudoElement, whenPseudo) {
+  if (node.args.length !== 1) {
+    throw new UnsupportedPatternError(`style() expects exactly 1 argument, got ${node.args.length}`);
+  }
+  const arg = node.args[0];
+  if (arg.type === "SpreadElement") {
+    throw new UnsupportedPatternError(`style() does not support spread arguments`);
+  }
+  if (mediaQuery || pseudoClass || pseudoElement || whenPseudo) {
+    throw new UnsupportedPatternError(
+      `style() cannot be used inside media query, pseudo-class, pseudo-element, or when() contexts`
+    );
+  }
+  return {
+    abbr: "style",
+    defs: {},
+    styleArg: arg
+  };
+}
 function resolveAddCall(node, mapping, mediaQuery, pseudoClass, pseudoElement, whenPseudo) {
   const isAddCss = node.name === "addCss";
   if (isAddCss) {
@@ -1977,34 +2065,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") {
@@ -2509,6 +2591,7 @@ function buildStyleHashMembers(segments, options) {
   const members = [];
   const normalSegs = [];
   const classNameArgs = [];
+  const styleKeyCounts = /* @__PURE__ */ new Map();
   function flushNormal() {
     if (normalSegs.length > 0) {
       members.push(...buildStyleHashProperties(normalSegs, options.mapping, options.maybeIncHelperName));
@@ -2521,6 +2604,11 @@ function buildStyleHashMembers(segments, options) {
       classNameArgs.push(t3.cloneNode(seg.classNameArg, true));
       continue;
     }
+    if (seg.styleArg) {
+      flushNormal();
+      members.push(buildInlineStyleMember(seg.styleArg, styleKeyCounts));
+      continue;
+    }
     if (seg.styleArrayArg) {
       flushNormal();
       if (seg.isAddCss && t3.isObjectExpression(seg.styleArrayArg)) {
@@ -2543,7 +2631,7 @@ function buildStyleHashMembers(segments, options) {
       }
       continue;
     }
-    if (options.debug && !seg.classNameArg && !seg.styleArrayArg && !seg.typographyLookup) {
+    if (options.debug && !seg.classNameArg && !seg.styleArg && !seg.styleArrayArg && !seg.typographyLookup) {
       const isMultiProp = Object.keys(seg.defs).length > 1;
       const hasExtraDefs = seg.variableExtraDefs && Object.keys(seg.variableExtraDefs).length > 0;
       if (isMultiProp || hasExtraDefs) {
@@ -2561,14 +2649,21 @@ function buildStyleHashMembers(segments, options) {
 function buildCustomClassNameMembers(classNameArgs) {
   const counts = /* @__PURE__ */ new Map();
   return classNameArgs.map((arg) => {
-    const baseKey = `className_${sanitizeClassNameKey(arg)}`;
+    const baseKey = `className_${sanitizeMetadataKey(arg)}`;
     const count = (counts.get(baseKey) ?? 0) + 1;
     counts.set(baseKey, count);
     const key = count === 1 ? baseKey : `${baseKey}_${count}`;
     return t3.objectProperty(t3.identifier(key), t3.cloneNode(arg, true));
   });
 }
-function sanitizeClassNameKey(arg) {
+function buildInlineStyleMember(arg, counts) {
+  const baseKey = `style_${sanitizeMetadataKey(arg)}`;
+  const count = (counts.get(baseKey) ?? 0) + 1;
+  counts.set(baseKey, count);
+  const key = count === 1 ? baseKey : `${baseKey}_${count}`;
+  return t3.objectProperty(t3.identifier(key), t3.cloneNode(arg, true));
+}
+function sanitizeMetadataKey(arg) {
   const raw = t3.isStringLiteral(arg) ? arg.value : t3.isTemplateLiteral(arg) && arg.expressions.length === 0 && arg.quasis.length === 1 ? arg.quasis[0].value.cooked ?? "" : generate(arg).code;
   const sanitized = raw.replace(/[^a-zA-Z0-9_$]/g, "_").replace(/_+/g, "_").replace(/^_+|_+$/g, "");
   return sanitized || "value";
@@ -2604,7 +2699,7 @@ function buildAddCssObjectMembers(styleObject) {
 function collectConditionalOnlyProps(segments) {
   const allProps = /* @__PURE__ */ new Map();
   for (const seg of segments) {
-    if (seg.error || seg.styleArrayArg || seg.typographyLookup || seg.classNameArg) continue;
+    if (seg.error || seg.styleArrayArg || seg.typographyLookup || seg.classNameArg || seg.styleArg) continue;
     const hasCondition = !!(seg.pseudoClass || seg.mediaQuery || seg.pseudoElement || seg.whenPseudo);
     const props = seg.variableProps ?? Object.keys(seg.defs);
     for (const prop of props) {
@@ -2698,7 +2793,7 @@ function clonePropertyKey(key) {
 function injectDebugInfo(expr, line, options) {
   if (!options.debug) return;
   const firstProp = expr.properties.find((p) => {
-    return t3.isObjectProperty(p) && !(t3.isIdentifier(p.key) && p.key.name.startsWith("className_") || t3.isStringLiteral(p.key) && p.key.value.startsWith("className_") || t3.isIdentifier(p.key) && p.key.name === "__marker" || t3.isStringLiteral(p.key) && p.key.value === "__marker");
+    return t3.isObjectProperty(p) && !(t3.isIdentifier(p.key) && p.key.name.startsWith("className_") || t3.isStringLiteral(p.key) && p.key.value.startsWith("className_") || t3.isIdentifier(p.key) && p.key.name.startsWith("style_") || t3.isStringLiteral(p.key) && p.key.value.startsWith("style_") || t3.isIdentifier(p.key) && p.key.name === "__marker" || t3.isStringLiteral(p.key) && p.key.value === "__marker");
   });
   if (!firstProp) return;
   options.needsTrussDebugInfo.current = true;
@@ -3261,6 +3356,9 @@ function resolveCssExpression(node, cssBindingName, mapping, filename) {
       if (seg.styleArrayArg) {
         return { error: `add(cssProp) is not supported in .css.ts files` };
       }
+      if (seg.styleArg) {
+        return { error: `style() is not supported in .css.ts files` };
+      }
       if (seg.mediaQuery) {
         return { error: `media query modifiers (ifSm, ifMd, etc.) are not supported in .css.ts files` };
       }