@homebound/truss 2.0.13 → 2.1.0-next.1

package/build/plugin/index.js

@@ -1,6 +1,546 @@
 // src/plugin/index.ts
-import { readFileSync, existsSync } from "fs";
-import { resolve, dirname, isAbsolute } from "path";
+import { readFileSync, writeFileSync, existsSync } from "fs";
+import { resolve, dirname, isAbsolute, join } from "path";
+
+// src/plugin/emit-truss.ts
+import * as t from "@babel/types";
+var PSEUDO_SUFFIX = {
+  ":hover": "_h",
+  ":focus": "_f",
+  ":focus-visible": "_fv",
+  ":active": "_a",
+  ":disabled": "_d"
+};
+var PSEUDO_ORDER = [":hover", ":focus", ":focus-visible", ":active", ":disabled"];
+var RELATIONSHIP_SHORT = {
+  ancestor: "anc",
+  descendant: "desc",
+  siblingAfter: "sibA",
+  siblingBefore: "sibB",
+  anySibling: "anyS"
+};
+var DEFAULT_MARKER_CLASS = "__truss_m";
+function markerClassName(markerNode) {
+  if (!markerNode) return DEFAULT_MARKER_CLASS;
+  if (markerNode.type === "Identifier" && markerNode.name) {
+    return `__truss_m_${markerNode.name}`;
+  }
+  return `${DEFAULT_MARKER_CLASS}_marker`;
+}
+function whenPrefix(whenPseudo) {
+  const rel = RELATIONSHIP_SHORT[whenPseudo.relationship ?? "ancestor"] ?? "anc";
+  const pseudoTag = PSEUDO_SUFFIX[whenPseudo.pseudo]?.replace(/^_/, "") ?? whenPseudo.pseudo.replace(/^:/, "");
+  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) {
+    const tag = PSEUDO_SUFFIX[pseudoClass];
+    if (tag) parts.push(`${tag.replace(/^_/, "")}_`);
+    else parts.push(`${pseudoClass.replace(/^:/, "")}_`);
+  }
+  return parts.join("");
+}
+function camelToKebab(s) {
+  return s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).replace(/^(webkit|moz|ms)-/, "-$1-");
+}
+function cleanValueForClassName(value) {
+  let cleaned = value;
+  if (cleaned.startsWith("-")) {
+    cleaned = "neg" + cleaned.slice(1);
+  }
+  return cleaned.replace(/[^a-zA-Z0-9]/g, "_").replace(/_+/g, "_").replace(/^_|_$/g, "");
+}
+function buildLonghandLookup(mapping) {
+  const lookup = /* @__PURE__ */ new Map();
+  for (const [abbrev, entry] of Object.entries(mapping.abbreviations)) {
+    if (entry.kind !== "static") continue;
+    const props = Object.keys(entry.defs);
+    if (props.length !== 1) continue;
+    const prop = props[0];
+    const value = String(entry.defs[prop]);
+    const key = `${prop}\0${value}`;
+    if (!lookup.has(key)) {
+      lookup.set(key, abbrev);
+    }
+  }
+  return lookup;
+}
+var cachedMapping = null;
+var cachedLookup = null;
+function getLonghandLookup(mapping) {
+  if (cachedMapping !== mapping) {
+    cachedMapping = mapping;
+    cachedLookup = buildLonghandLookup(mapping);
+  }
+  return cachedLookup;
+}
+function computeStaticBaseName(seg, cssProp, cssValue, isMultiProp, mapping) {
+  const abbrev = seg.key.split("__")[0];
+  if (seg.argResolved !== void 0) {
+    const valuePart = cleanValueForClassName(seg.argResolved);
+    if (isMultiProp) {
+      const lookup = getLonghandLookup(mapping);
+      const canonical = lookup.get(`${cssProp}\0${cssValue}`);
+      if (canonical) return canonical;
+      return `${abbrev}_${valuePart}_${cssProp}`;
+    }
+    return `${abbrev}_${valuePart}`;
+  }
+  if (isMultiProp) {
+    const lookup = getLonghandLookup(mapping);
+    const canonical = lookup.get(`${cssProp}\0${cssValue}`);
+    if (canonical) return canonical;
+    return `${abbrev}_${cssProp}`;
+  }
+  return abbrev;
+}
+function collectAtomicRules(chains, mapping) {
+  const rules = /* @__PURE__ */ new Map();
+  let needsMaybeInc = false;
+  for (const chain of chains) {
+    for (const part of chain.parts) {
+      const segs = part.type === "unconditional" ? part.segments : [...part.thenSegments, ...part.elseSegments];
+      for (const seg of segs) {
+        if (seg.error || seg.styleArrayArg || seg.typographyLookup) continue;
+        if (seg.whenPseudo) {
+          if (seg.variableProps) {
+            if (seg.incremented) needsMaybeInc = true;
+            collectWhenVariableRules(rules, seg, mapping);
+          } else {
+            collectWhenStaticRules(rules, seg, mapping);
+          }
+          continue;
+        }
+        if (seg.variableProps) {
+          if (seg.incremented) needsMaybeInc = true;
+          collectVariableRules(rules, seg, mapping);
+        } else {
+          collectStaticRules(rules, seg, mapping);
+        }
+      }
+    }
+  }
+  return { rules, needsMaybeInc };
+}
+function collectStaticRules(rules, seg, mapping) {
+  const rawDefs = unwrapDefs(seg.defs, seg.pseudoElement);
+  const prefix = conditionPrefix(seg.pseudoClass, seg.mediaQuery, seg.pseudoElement, mapping.breakpoints);
+  const isMultiProp = Object.keys(rawDefs).length > 1;
+  for (const [cssProp, value] of Object.entries(rawDefs)) {
+    const cssValue = extractLeafValue(value);
+    if (cssValue === null) continue;
+    const baseName = computeStaticBaseName(seg, cssProp, String(cssValue), isMultiProp, mapping);
+    const className = prefix ? `${prefix}${baseName}` : baseName;
+    if (!rules.has(className)) {
+      rules.set(className, {
+        className,
+        cssProperty: camelToKebab(cssProp),
+        cssValue: String(cssValue),
+        pseudoClass: seg.pseudoClass ?? void 0,
+        mediaQuery: seg.mediaQuery ?? void 0,
+        pseudoElement: seg.pseudoElement ?? void 0
+      });
+    }
+  }
+}
+function collectVariableRules(rules, seg, mapping) {
+  const prefix = conditionPrefix(seg.pseudoClass, seg.mediaQuery, seg.pseudoElement, mapping.breakpoints);
+  const baseKey = seg.key.split("__")[0];
+  for (const prop of seg.variableProps) {
+    const className = prefix ? `${prefix}${baseKey}_var` : `${baseKey}_var`;
+    const varName = toCssVariableName(className, baseKey, prop);
+    if (!rules.has(className)) {
+      rules.set(className, {
+        className,
+        cssProperty: camelToKebab(prop),
+        cssValue: `var(${varName})`,
+        pseudoClass: seg.pseudoClass ?? void 0,
+        mediaQuery: seg.mediaQuery ?? void 0,
+        pseudoElement: seg.pseudoElement ?? void 0,
+        cssVarName: varName
+      });
+    }
+  }
+  if (seg.variableExtraDefs) {
+    for (const [cssProp, value] of Object.entries(seg.variableExtraDefs)) {
+      const extraBase = `${baseKey}_${cssProp}`;
+      const extraName = prefix ? `${prefix}${extraBase}` : extraBase;
+      if (!rules.has(extraName)) {
+        rules.set(extraName, {
+          className: extraName,
+          cssProperty: camelToKebab(cssProp),
+          cssValue: String(value),
+          pseudoClass: seg.pseudoClass ?? void 0,
+          mediaQuery: seg.mediaQuery ?? void 0,
+          pseudoElement: seg.pseudoElement ?? void 0
+        });
+      }
+    }
+  }
+}
+function collectWhenStaticRules(rules, seg, mapping) {
+  const wp = seg.whenPseudo;
+  const prefix = whenPrefix(wp);
+  const rawDefs = seg.defs;
+  const isMultiProp = Object.keys(rawDefs).length > 1;
+  const mClass = markerClassName(wp.markerNode);
+  for (const [cssProp, value] of Object.entries(rawDefs)) {
+    const cssValue = typeof value === "string" || typeof value === "number" ? value : extractLeafValue(value);
+    if (cssValue === null) continue;
+    const baseName = computeStaticBaseName(seg, cssProp, String(cssValue), isMultiProp, mapping);
+    const className = `${prefix}${baseName}`;
+    if (!rules.has(className)) {
+      rules.set(className, {
+        className,
+        cssProperty: camelToKebab(cssProp),
+        cssValue: String(cssValue),
+        whenSelector: {
+          relationship: wp.relationship ?? "ancestor",
+          markerClass: mClass,
+          pseudo: wp.pseudo
+        }
+      });
+    }
+  }
+}
+function collectWhenVariableRules(rules, seg, mapping) {
+  const wp = seg.whenPseudo;
+  const prefix = whenPrefix(wp);
+  const baseKey = seg.key.split("__")[0];
+  const mClass = markerClassName(wp.markerNode);
+  for (const prop of seg.variableProps) {
+    const className = `${prefix}${baseKey}_var`;
+    const varName = toCssVariableName(className, baseKey, prop);
+    if (!rules.has(className)) {
+      rules.set(className, {
+        className,
+        cssProperty: camelToKebab(prop),
+        cssValue: `var(${varName})`,
+        cssVarName: varName,
+        whenSelector: {
+          relationship: wp.relationship ?? "ancestor",
+          markerClass: mClass,
+          pseudo: wp.pseudo
+        }
+      });
+    }
+  }
+  if (seg.variableExtraDefs) {
+    for (const [cssProp, value] of Object.entries(seg.variableExtraDefs)) {
+      const extraName = `${prefix}${baseKey}_${cssProp}`;
+      if (!rules.has(extraName)) {
+        rules.set(extraName, {
+          className: extraName,
+          cssProperty: camelToKebab(cssProp),
+          cssValue: String(value),
+          whenSelector: {
+            relationship: wp.relationship ?? "ancestor",
+            markerClass: mClass,
+            pseudo: wp.pseudo
+          }
+        });
+      }
+    }
+  }
+}
+function unwrapDefs(defs, pseudoElement) {
+  let result = defs;
+  if (pseudoElement && result[pseudoElement] && typeof result[pseudoElement] === "object") {
+    result = result[pseudoElement];
+  }
+  const unwrapped = {};
+  for (const [prop, val] of Object.entries(result)) {
+    unwrapped[prop] = extractLeafValue(val) ?? val;
+  }
+  return unwrapped;
+}
+function extractLeafValue(value) {
+  if (typeof value === "string" || typeof value === "number") return value;
+  if (value === null) return null;
+  if (typeof value === "object") {
+    const obj = value;
+    for (const [k, v] of Object.entries(obj)) {
+      if (k === "default") continue;
+      if (typeof v === "string" || typeof v === "number") return v;
+      if (typeof v === "object" && v !== null) return extractLeafValue(v);
+    }
+    if ("default" in obj && obj.default !== null) {
+      return extractLeafValue(obj.default);
+    }
+  }
+  return null;
+}
+function generateCssText(rules) {
+  const allRules = Array.from(rules.values());
+  const base = [];
+  const pseudo = /* @__PURE__ */ new Map();
+  const pseudoElement = [];
+  const whenRules = [];
+  const media = [];
+  const mediaPseudo = [];
+  const mediaPseudoElement = [];
+  for (const rule of allRules) {
+    if (rule.whenSelector) {
+      whenRules.push(rule);
+    } else if (rule.mediaQuery && rule.pseudoClass) {
+      mediaPseudo.push(rule);
+    } else if (rule.mediaQuery && rule.pseudoElement) {
+      mediaPseudoElement.push(rule);
+    } else if (rule.mediaQuery) {
+      media.push(rule);
+    } else if (rule.pseudoClass && rule.pseudoElement) {
+      const tier = pseudo.get(rule.pseudoClass) ?? [];
+      tier.push(rule);
+      pseudo.set(rule.pseudoClass, tier);
+    } else if (rule.pseudoElement) {
+      pseudoElement.push(rule);
+    } else if (rule.pseudoClass) {
+      const tier = pseudo.get(rule.pseudoClass) ?? [];
+      tier.push(rule);
+      pseudo.set(rule.pseudoClass, tier);
+    } else {
+      base.push(rule);
+    }
+  }
+  const lines = [];
+  for (const rule of base) {
+    lines.push(formatBaseRule(rule));
+  }
+  for (const pc of PSEUDO_ORDER) {
+    const tier = pseudo.get(pc);
+    if (!tier) continue;
+    for (const rule of tier) {
+      lines.push(formatPseudoRule(rule));
+    }
+  }
+  for (const [pc, tier] of Array.from(pseudo.entries())) {
+    if (PSEUDO_ORDER.includes(pc)) continue;
+    for (const rule of tier) {
+      lines.push(formatPseudoRule(rule));
+    }
+  }
+  for (const rule of pseudoElement) {
+    lines.push(formatPseudoElementRule(rule));
+  }
+  for (const rule of whenRules) {
+    lines.push(formatWhenRule(rule));
+  }
+  for (const rule of media) {
+    lines.push(formatMediaRule(rule));
+  }
+  for (const rule of mediaPseudo) {
+    lines.push(formatMediaPseudoRule(rule));
+  }
+  for (const rule of mediaPseudoElement) {
+    lines.push(formatMediaPseudoElementRule(rule));
+  }
+  for (const rule of allRules) {
+    if (rule.cssVarName) {
+      lines.push(`@property ${rule.cssVarName} {
+  syntax: "*";
+  inherits: false;
+}`);
+    }
+  }
+  return lines.join("\n");
+}
+function formatBaseRule(rule) {
+  return `.${rule.className} {
+  ${rule.cssProperty}: ${rule.cssValue};
+}`;
+}
+function formatPseudoRule(rule) {
+  const pe = rule.pseudoElement ? rule.pseudoElement : "";
+  return `.${rule.className}${rule.pseudoClass}${pe} {
+  ${rule.cssProperty}: ${rule.cssValue};
+}`;
+}
+function formatPseudoElementRule(rule) {
+  return `.${rule.className}${rule.pseudoElement} {
+  ${rule.cssProperty}: ${rule.cssValue};
+}`;
+}
+function formatWhenRule(rule) {
+  const whenSelector = rule.whenSelector;
+  if (!whenSelector) {
+    return formatBaseRule(rule);
+  }
+  const markerSelector = `.${whenSelector.markerClass}${whenSelector.pseudo}`;
+  const targetSelector = `.${rule.className}`;
+  if (whenSelector.relationship === "ancestor") {
+    return `${markerSelector} ${targetSelector} {
+  ${rule.cssProperty}: ${rule.cssValue};
+}`;
+  }
+  if (whenSelector.relationship === "descendant") {
+    return `${targetSelector}:has(${markerSelector}) {
+  ${rule.cssProperty}: ${rule.cssValue};
+}`;
+  }
+  if (whenSelector.relationship === "siblingAfter") {
+    return `${targetSelector}:has(~ ${markerSelector}) {
+  ${rule.cssProperty}: ${rule.cssValue};
+}`;
+  }
+  if (whenSelector.relationship === "siblingBefore") {
+    return `${markerSelector} ~ ${targetSelector} {
+  ${rule.cssProperty}: ${rule.cssValue};
+}`;
+  }
+  if (whenSelector.relationship === "anySibling") {
+    return `${targetSelector}:has(~ ${markerSelector}), ${markerSelector} ~ ${targetSelector} {
+  ${rule.cssProperty}: ${rule.cssValue};
+}`;
+  }
+  return `${markerSelector} ${targetSelector} {
+  ${rule.cssProperty}: ${rule.cssValue};
+}`;
+}
+function formatMediaRule(rule) {
+  return `${rule.mediaQuery} {
+  .${rule.className}.${rule.className} {
+    ${rule.cssProperty}: ${rule.cssValue};
+  }
+}`;
+}
+function formatMediaPseudoRule(rule) {
+  return `${rule.mediaQuery} {
+  .${rule.className}.${rule.className}${rule.pseudoClass} {
+    ${rule.cssProperty}: ${rule.cssValue};
+  }
+}`;
+}
+function formatMediaPseudoElementRule(rule) {
+  const pe = rule.pseudoElement ?? "";
+  return `${rule.mediaQuery} {
+  .${rule.className}.${rule.className}${pe} {
+    ${rule.cssProperty}: ${rule.cssValue};
+  }
+}`;
+}
+function buildStyleHashProperties(segments, mapping, maybeIncHelperName) {
+  const propGroups = /* @__PURE__ */ new Map();
+  for (const seg of segments) {
+    if (seg.error || seg.styleArrayArg || seg.typographyLookup) continue;
+    if (seg.variableProps) {
+      const prefix = seg.whenPseudo ? whenPrefix(seg.whenPseudo) : conditionPrefix(seg.pseudoClass, seg.mediaQuery, seg.pseudoElement, mapping.breakpoints);
+      const baseKey = seg.key.split("__")[0];
+      for (const prop of seg.variableProps) {
+        const className = prefix ? `${prefix}${baseKey}_var` : `${baseKey}_var`;
+        const varName = toCssVariableName(className, baseKey, prop);
+        if (!propGroups.has(prop)) propGroups.set(prop, []);
+        propGroups.get(prop).push({
+          className,
+          isVariable: true,
+          varName,
+          argNode: seg.argNode,
+          incremented: seg.incremented,
+          appendPx: seg.appendPx
+        });
+      }
+      if (seg.variableExtraDefs) {
+        for (const [cssProp, value] of Object.entries(seg.variableExtraDefs)) {
+          const extraBase = `${baseKey}_${cssProp}`;
+          const extraName = prefix ? `${prefix}${extraBase}` : extraBase;
+          if (!propGroups.has(cssProp)) propGroups.set(cssProp, []);
+          propGroups.get(cssProp).push({ className: extraName, isVariable: false });
+        }
+      }
+    } else {
+      const rawDefs = seg.whenPseudo ? seg.defs : unwrapDefs(seg.defs, seg.pseudoElement);
+      const prefix = seg.whenPseudo ? whenPrefix(seg.whenPseudo) : conditionPrefix(seg.pseudoClass, seg.mediaQuery, seg.pseudoElement, mapping.breakpoints);
+      const isMultiProp = Object.keys(rawDefs).length > 1;
+      for (const cssProp of Object.keys(rawDefs)) {
+        const val = extractLeafValue(rawDefs[cssProp]);
+        if (val === null) continue;
+        const baseName = computeStaticBaseName(seg, cssProp, String(val), isMultiProp, mapping);
+        const className = prefix ? `${prefix}${baseName}` : baseName;
+        if (!propGroups.has(cssProp)) propGroups.set(cssProp, []);
+        propGroups.get(cssProp).push({ className, isVariable: false });
+      }
+    }
+  }
+  const properties = [];
+  for (const [cssProp, entries] of Array.from(propGroups.entries())) {
+    const classNames = entries.map((e) => e.className).join(" ");
+    const variableEntries = entries.filter((e) => e.isVariable);
+    if (variableEntries.length > 0) {
+      const varsProps = [];
+      for (const dyn of variableEntries) {
+        let valueExpr = dyn.argNode;
+        if (dyn.incremented) {
+          valueExpr = t.callExpression(t.identifier(maybeIncHelperName ?? "__maybeInc"), [valueExpr]);
+        } else if (dyn.appendPx) {
+          valueExpr = t.templateLiteral(
+            [t.templateElement({ raw: "", cooked: "" }, false), t.templateElement({ raw: "px", cooked: "px" }, true)],
+            [valueExpr]
+          );
+        }
+        varsProps.push(t.objectProperty(t.stringLiteral(dyn.varName), valueExpr));
+      }
+      const tuple = t.arrayExpression([t.stringLiteral(classNames), t.objectExpression(varsProps)]);
+      properties.push(t.objectProperty(toPropertyKey(cssProp), tuple));
+    } else {
+      properties.push(t.objectProperty(toPropertyKey(cssProp), t.stringLiteral(classNames)));
+    }
+  }
+  return properties;
+}
+function toCssVariableName(className, baseKey, cssProp) {
+  const baseClassName = `${baseKey}_var`;
+  const conditionPrefix2 = className.endsWith(baseClassName) ? className.slice(0, -baseClassName.length) : "";
+  return `--${conditionPrefix2}${cssProp}`;
+}
+function buildMaybeIncDeclaration(helperName, increment) {
+  const incParam = t.identifier("inc");
+  const body = t.blockStatement([
+    t.returnStatement(
+      t.conditionalExpression(
+        t.binaryExpression("===", t.unaryExpression("typeof", incParam), t.stringLiteral("string")),
+        incParam,
+        t.templateLiteral(
+          [t.templateElement({ raw: "", cooked: "" }, false), t.templateElement({ raw: "px", cooked: "px" }, true)],
+          [t.binaryExpression("*", incParam, t.numericLiteral(increment))]
+        )
+      )
+    )
+  ]);
+  return t.variableDeclaration("const", [
+    t.variableDeclarator(t.identifier(helperName), t.arrowFunctionExpression([incParam], body))
+  ]);
+}
+function toPropertyKey(key) {
+  return isValidIdentifier(key) ? t.identifier(key) : t.stringLiteral(key);
+}
+function isValidIdentifier(s) {
+  return /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(s);
+}
+function buildRuntimeLookupDeclaration(lookupName, segmentsByName, mapping) {
+  const properties = [];
+  for (const [name, segs] of Object.entries(segmentsByName)) {
+    const hashProps = buildStyleHashProperties(segs, mapping);
+    properties.push(t.objectProperty(t.identifier(name), t.objectExpression(hashProps)));
+  }
+  return t.variableDeclaration("const", [
+    t.variableDeclarator(t.identifier(lookupName), t.objectExpression(properties))
+  ]);
+}
 
 // src/plugin/transform.ts
 import { parse } from "@babel/parser";
@@ -10,7 +550,7 @@ import * as t4 from "@babel/types";
 import { basename } from "path";
 
 // src/plugin/resolve-chain.ts
-function resolveFullChain(chain, mapping) {
+function resolveFullChain(chain, mapping, options) {
   const parts = [];
   const markers = [];
   const filteredChain = [];
@@ -41,9 +581,10 @@ function resolveFullChain(chain, mapping) {
         continue;
       }
       if (currentNodes.length > 0) {
+        const unconditionalSegs = resolveChain(currentNodes, mapping);
         parts.push({
           type: "unconditional",
-          segments: mergeOverlappingConditions(resolveChain(currentNodes, mapping))
+          segments: options?.skipMerge ? unconditionalSegs : mergeOverlappingConditions(unconditionalSegs)
         });
         currentNodes = [];
       }
@@ -67,11 +608,13 @@ function resolveFullChain(chain, mapping) {
         }
         i++;
       }
+      const thenSegs = resolveChain(thenNodes, mapping);
+      const elseSegs = resolveChain(elseNodes, mapping);
       parts.push({
         type: "conditional",
         conditionNode: node.conditionNode,
-        thenSegments: mergeOverlappingConditions(resolveChain(thenNodes, mapping)),
-        elseSegments: mergeOverlappingConditions(resolveChain(elseNodes, mapping))
+        thenSegments: options?.skipMerge ? thenSegs : mergeOverlappingConditions(thenSegs),
+        elseSegments: options?.skipMerge ? elseSegs : mergeOverlappingConditions(elseSegs)
       });
     } else {
       currentNodes.push(node);
@@ -79,7 +622,11 @@ function resolveFullChain(chain, mapping) {
     }
   }
   if (currentNodes.length > 0) {
-    parts.push({ type: "unconditional", segments: mergeOverlappingConditions(resolveChain(currentNodes, mapping)) });
+    const remainingSegs = resolveChain(currentNodes, mapping);
+    parts.push({
+      type: "unconditional",
+      segments: options?.skipMerge ? remainingSegs : mergeOverlappingConditions(remainingSegs)
+    });
   }
   const segmentErrors = [];
   for (const part of parts) {
@@ -139,7 +686,14 @@ function resolveChain(chain, mapping) {
           continue;
         }
         if (abbr === "add") {
-          const seg = resolveAddCall(node, mapping, currentMediaQuery, currentPseudoClass, currentPseudoElement);
+          const seg = resolveAddCall(
+            node,
+            mapping,
+            currentMediaQuery,
+            currentPseudoClass,
+            currentPseudoElement,
+            currentWhenPseudo
+          );
           segments.push(seg);
           continue;
         }
@@ -184,15 +738,16 @@ function resolveChain(chain, mapping) {
         if (!entry) {
           throw new UnsupportedPatternError(`Unknown abbreviation "${abbr}"`);
         }
-        if (entry.kind === "dynamic") {
-          const seg = resolveDynamicCall(
+        if (entry.kind === "variable") {
+          const seg = resolveVariableCall(
             abbr,
             entry,
             node,
             mapping,
             currentMediaQuery,
             currentPseudoClass,
-            currentPseudoElement
+            currentPseudoElement,
+            currentWhenPseudo
           );
           segments.push(seg);
         } else if (entry.kind === "delegate") {
@@ -203,7 +758,8 @@ function resolveChain(chain, mapping) {
             mapping,
             currentMediaQuery,
             currentPseudoClass,
-            currentPseudoElement
+            currentPseudoElement,
+            currentWhenPseudo
           );
           segments.push(seg);
         } else {
@@ -267,7 +823,7 @@ function resolveTypographyEntry(name, mapping, mediaQuery, pseudoClass, pseudoEl
   }
   const resolved = resolveEntry(name, entry, mapping, mediaQuery, pseudoClass, pseudoElement, null);
   for (const segment of resolved) {
-    if (segment.dynamicProps || segment.whenPseudo) {
+    if (segment.variableProps || segment.whenPseudo) {
       throw new UnsupportedPatternError(`Typography abbreviation "${name}" cannot require runtime arguments`);
     }
   }
@@ -311,19 +867,43 @@ function resolveEntry(abbr, entry, mapping, mediaQuery, pseudoClass, pseudoEleme
       }
       return result;
     }
-    case "dynamic":
+    case "variable":
     case "delegate":
       throw new UnsupportedPatternError(`Abbreviation "${abbr}" requires arguments \u2014 use ${abbr}() not .${abbr}`);
     default:
       throw new UnsupportedPatternError(`Unhandled entry kind for "${abbr}"`);
   }
 }
-function resolveDynamicCall(abbr, entry, node, mapping, mediaQuery, pseudoClass, pseudoElement) {
+function resolveVariableCall(abbr, entry, node, mapping, mediaQuery, pseudoClass, pseudoElement, whenPseudo) {
   if (node.args.length !== 1) {
     throw new UnsupportedPatternError(`${abbr}() expects exactly 1 argument, got ${node.args.length}`);
   }
   const argAst = node.args[0];
   const literalValue = tryEvaluateLiteral(argAst, entry.incremented, mapping.increment);
+  if (whenPseudo) {
+    const wpSuffix = whenPseudoKeyName(whenPseudo);
+    if (literalValue !== null) {
+      const keySuffix = literalValue.replace(/[^a-zA-Z0-9]/g, "_");
+      const key = `${abbr}__${keySuffix}__${wpSuffix}`;
+      const defs = {};
+      for (const prop of entry.props) {
+        defs[prop] = literalValue;
+      }
+      if (entry.extraDefs) Object.assign(defs, entry.extraDefs);
+      return { key, defs, whenPseudo, argResolved: literalValue };
+    } else {
+      const key = `${abbr}__${wpSuffix}`;
+      return {
+        key,
+        defs: {},
+        whenPseudo,
+        variableProps: entry.props,
+        incremented: entry.incremented,
+        variableExtraDefs: entry.extraDefs,
+        argNode: argAst
+      };
+    }
+  }
   const suffix = conditionKeySuffix(mediaQuery, pseudoClass, pseudoElement, mapping.breakpoints);
   if (literalValue !== null) {
     const keySuffix = literalValue.replace(/[^a-zA-Z0-9]/g, "_");
@@ -351,23 +931,48 @@ function resolveDynamicCall(abbr, entry, node, mapping, mediaQuery, pseudoClass,
       defs: {},
       mediaQuery,
       pseudoClass,
-      dynamicProps: entry.props,
+      variableProps: entry.props,
       incremented: entry.incremented,
-      dynamicExtraDefs: entry.extraDefs,
+      variableExtraDefs: entry.extraDefs,
       argNode: argAst
     };
   }
 }
-function resolveDelegateCall(abbr, entry, node, mapping, mediaQuery, pseudoClass, pseudoElement) {
+function resolveDelegateCall(abbr, entry, node, mapping, mediaQuery, pseudoClass, pseudoElement, whenPseudo) {
   const targetEntry = mapping.abbreviations[entry.target];
-  if (!targetEntry || targetEntry.kind !== "dynamic") {
-    throw new UnsupportedPatternError(`Delegate "${abbr}" targets "${entry.target}" which is not a dynamic entry`);
+  if (!targetEntry || targetEntry.kind !== "variable") {
+    throw new UnsupportedPatternError(`Delegate "${abbr}" targets "${entry.target}" which is not a variable entry`);
   }
   if (node.args.length !== 1) {
     throw new UnsupportedPatternError(`${abbr}() expects exactly 1 argument, got ${node.args.length}`);
   }
   const argAst = node.args[0];
   const literalValue = tryEvaluatePxLiteral(argAst);
+  if (whenPseudo) {
+    const wpSuffix = whenPseudoKeyName(whenPseudo);
+    if (literalValue !== null) {
+      const keySuffix = literalValue.replace(/[^a-zA-Z0-9]/g, "_");
+      const key = `${entry.target}__${keySuffix}__${wpSuffix}`;
+      const defs = {};
+      for (const prop of targetEntry.props) {
+        defs[prop] = literalValue;
+      }
+      if (targetEntry.extraDefs) Object.assign(defs, targetEntry.extraDefs);
+      return { key, defs, whenPseudo, argResolved: literalValue };
+    } else {
+      const key = `${entry.target}__${wpSuffix}`;
+      return {
+        key,
+        defs: {},
+        whenPseudo,
+        variableProps: targetEntry.props,
+        incremented: false,
+        appendPx: true,
+        variableExtraDefs: targetEntry.extraDefs,
+        argNode: argAst
+      };
+    }
+  }
   const suffix = conditionKeySuffix(mediaQuery, pseudoClass, pseudoElement, mapping.breakpoints);
   if (literalValue !== null) {
     const keySuffix = literalValue.replace(/[^a-zA-Z0-9]/g, "_");
@@ -396,15 +1001,15 @@ function resolveDelegateCall(abbr, entry, node, mapping, mediaQuery, pseudoClass
       mediaQuery,
       pseudoClass,
       pseudoElement,
-      dynamicProps: targetEntry.props,
+      variableProps: targetEntry.props,
       incremented: false,
       appendPx: true,
-      dynamicExtraDefs: targetEntry.extraDefs,
+      variableExtraDefs: targetEntry.extraDefs,
       argNode: argAst
     };
   }
 }
-function resolveAddCall(node, mapping, mediaQuery, pseudoClass, pseudoElement) {
+function resolveAddCall(node, mapping, mediaQuery, pseudoClass, pseudoElement, whenPseudo) {
   if (node.args.length === 1) {
     const styleArg = node.args[0];
     if (styleArg.type === "SpreadElement") {
@@ -433,6 +1038,17 @@ function resolveAddCall(node, mapping, mediaQuery, pseudoClass, pseudoElement) {
   const propName = propArg.value;
   const valueArg = node.args[1];
   const literalValue = tryEvaluateAddLiteral(valueArg);
+  if (whenPseudo) {
+    const wpSuffix = whenPseudoKeyName(whenPseudo);
+    if (literalValue !== null) {
+      const keySuffix = literalValue.replace(/[^a-zA-Z0-9]/g, "_").replace(/_+/g, "_").replace(/^_|_$/g, "");
+      const key = `add_${propName}__${keySuffix}__${wpSuffix}`;
+      return { key, defs: { [propName]: literalValue }, whenPseudo, argResolved: literalValue };
+    } else {
+      const key = `add_${propName}__${wpSuffix}`;
+      return { key, defs: {}, whenPseudo, variableProps: [propName], incremented: false, argNode: valueArg };
+    }
+  }
   const suffix = conditionKeySuffix(mediaQuery, pseudoClass, pseudoElement, mapping.breakpoints);
   if (literalValue !== null) {
     const keySuffix = literalValue.replace(/[^a-zA-Z0-9]/g, "_").replace(/_+/g, "_").replace(/^_|_$/g, "");
@@ -455,7 +1071,7 @@ function resolveAddCall(node, mapping, mediaQuery, pseudoClass, pseudoElement) {
       mediaQuery,
       pseudoClass,
       pseudoElement,
-      dynamicProps: [propName],
+      variableProps: [propName],
       incremented: false,
       argNode: valueArg
     };
@@ -530,7 +1146,7 @@ function mergeOverlappingConditions(segments) {
   const propToIndices = /* @__PURE__ */ new Map();
   for (let i = 0; i < segments.length; i++) {
     const seg = segments[i];
-    if (seg.dynamicProps || seg.styleArrayArg || seg.whenPseudo || seg.error) continue;
+    if (seg.variableProps || seg.styleArrayArg || seg.whenPseudo || seg.error) continue;
     for (const prop of Object.keys(seg.defs)) {
       if (!propToIndices.has(prop)) propToIndices.set(prop, []);
       propToIndices.get(prop).push(i);
@@ -746,44 +1362,44 @@ var UnsupportedPatternError = class extends Error {
 };
 
 // src/plugin/ast-utils.ts
-import * as t from "@babel/types";
+import * as t2 from "@babel/types";
 function collectTopLevelBindings(ast) {
   const used = /* @__PURE__ */ new Set();
   for (const node of ast.program.body) {
-    if (t.isImportDeclaration(node)) {
+    if (t2.isImportDeclaration(node)) {
       for (const spec of node.specifiers) {
         used.add(spec.local.name);
       }
       continue;
     }
-    if (t.isVariableDeclaration(node)) {
+    if (t2.isVariableDeclaration(node)) {
       for (const decl of node.declarations) {
         collectPatternBindings(decl.id, used);
       }
       continue;
     }
-    if (t.isFunctionDeclaration(node) && node.id) {
+    if (t2.isFunctionDeclaration(node) && node.id) {
       used.add(node.id.name);
       continue;
     }
-    if (t.isClassDeclaration(node) && node.id) {
+    if (t2.isClassDeclaration(node) && node.id) {
       used.add(node.id.name);
       continue;
     }
-    if (t.isExportNamedDeclaration(node) && node.declaration) {
+    if (t2.isExportNamedDeclaration(node) && node.declaration) {
       const decl = node.declaration;
-      if (t.isVariableDeclaration(decl)) {
+      if (t2.isVariableDeclaration(decl)) {
         for (const varDecl of decl.declarations) {
           collectPatternBindings(varDecl.id, used);
         }
-      } else if ((t.isFunctionDeclaration(decl) || t.isClassDeclaration(decl)) && decl.id) {
+      } else if ((t2.isFunctionDeclaration(decl) || t2.isClassDeclaration(decl)) && decl.id) {
         used.add(decl.id.name);
       }
       continue;
     }
-    if (t.isExportDefaultDeclaration(node)) {
+    if (t2.isExportDefaultDeclaration(node)) {
       const decl = node.declaration;
-      if ((t.isFunctionDeclaration(decl) || t.isClassDeclaration(decl)) && decl.id) {
+      if ((t2.isFunctionDeclaration(decl) || t2.isClassDeclaration(decl)) && decl.id) {
         used.add(decl.id.name);
       }
     }
@@ -791,37 +1407,37 @@ function collectTopLevelBindings(ast) {
   return used;
 }
 function collectPatternBindings(pattern, used) {
-  if (t.isVoidPattern(pattern)) {
+  if (t2.isVoidPattern(pattern)) {
     return;
   }
-  if (t.isIdentifier(pattern)) {
+  if (t2.isIdentifier(pattern)) {
     used.add(pattern.name);
     return;
   }
-  if (t.isAssignmentPattern(pattern)) {
+  if (t2.isAssignmentPattern(pattern)) {
     collectPatternBindings(pattern.left, used);
     return;
   }
-  if (t.isRestElement(pattern)) {
+  if (t2.isRestElement(pattern)) {
     collectPatternBindings(pattern.argument, used);
     return;
   }
-  if (t.isObjectPattern(pattern)) {
+  if (t2.isObjectPattern(pattern)) {
     for (const prop of pattern.properties) {
-      if (t.isObjectProperty(prop)) {
+      if (t2.isObjectProperty(prop)) {
         collectPatternBindings(prop.value, used);
-      } else if (t.isRestElement(prop)) {
+      } else if (t2.isRestElement(prop)) {
         collectPatternBindings(prop.argument, used);
       }
     }
     return;
   }
-  if (t.isArrayPattern(pattern)) {
+  if (t2.isArrayPattern(pattern)) {
     for (const el of pattern.elements) {
       if (!el) continue;
-      if (t.isIdentifier(el) || t.isAssignmentPattern(el) || t.isObjectPattern(el) || t.isArrayPattern(el)) {
+      if (t2.isIdentifier(el) || t2.isAssignmentPattern(el) || t2.isObjectPattern(el) || t2.isArrayPattern(el)) {
         collectPatternBindings(el, used);
-      } else if (t.isRestElement(el)) {
+      } else if (t2.isRestElement(el)) {
         collectPatternBindings(el.argument, used);
       }
     }
@@ -848,9 +1464,9 @@ function reservePreferredName(used, preferred, secondary) {
 }
 function findCssImportBinding(ast) {
   for (const node of ast.program.body) {
-    if (!t.isImportDeclaration(node)) continue;
+    if (!t2.isImportDeclaration(node)) continue;
     for (const spec of node.specifiers) {
-      if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported, { name: "Css" })) {
+      if (t2.isImportSpecifier(spec) && t2.isIdentifier(spec.imported, { name: "Css" })) {
         return spec.local.name;
       }
     }
@@ -859,9 +1475,9 @@ function findCssImportBinding(ast) {
 }
 function hasCssMethodCall(ast, binding, method) {
   let found = false;
-  t.traverseFast(ast, (node) => {
+  t2.traverseFast(ast, (node) => {
     if (found) return;
-    if (t.isCallExpression(node) && t.isMemberExpression(node.callee) && !node.callee.computed && t.isIdentifier(node.callee.object, { name: binding }) && t.isIdentifier(node.callee.property, { name: method })) {
+    if (t2.isCallExpression(node) && t2.isMemberExpression(node.callee) && !node.callee.computed && t2.isIdentifier(node.callee.object, { name: binding }) && t2.isIdentifier(node.callee.property, { name: method })) {
       found = true;
     }
   });
@@ -870,8 +1486,8 @@ function hasCssMethodCall(ast, binding, method) {
 function removeCssImport(ast, cssBinding) {
   for (let i = 0; i < ast.program.body.length; i++) {
     const node = ast.program.body[i];
-    if (!t.isImportDeclaration(node)) continue;
-    const cssSpecIndex = node.specifiers.findIndex((s) => t.isImportSpecifier(s) && s.local.name === cssBinding);
+    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);
@@ -881,40 +1497,20 @@ function removeCssImport(ast, cssBinding) {
     return;
   }
 }
-function findStylexNamespaceImport(ast) {
-  for (const node of ast.program.body) {
-    if (!t.isImportDeclaration(node)) continue;
-    if (node.source.value !== "@stylexjs/stylex") continue;
-    for (const spec of node.specifiers) {
-      if (t.isImportNamespaceSpecifier(spec)) {
-        return spec.local.name;
-      }
-    }
-  }
-  return null;
-}
 function findLastImportIndex(ast) {
   let lastImportIndex = -1;
   for (let i = 0; i < ast.program.body.length; i++) {
-    if (t.isImportDeclaration(ast.program.body[i])) {
+    if (t2.isImportDeclaration(ast.program.body[i])) {
       lastImportIndex = i;
     }
   }
   return lastImportIndex;
 }
-function insertStylexNamespaceImport(ast, localName) {
-  const stylexImport = t.importDeclaration(
-    [t.importNamespaceSpecifier(t.identifier(localName))],
-    t.stringLiteral("@stylexjs/stylex")
-  );
-  const idx = findLastImportIndex(ast);
-  ast.program.body.splice(idx + 1, 0, stylexImport);
-}
 function findNamedImportBinding(ast, source, importedName) {
   for (const node of ast.program.body) {
-    if (!t.isImportDeclaration(node) || node.source.value !== source) continue;
+    if (!t2.isImportDeclaration(node) || node.source.value !== source) continue;
     for (const spec of node.specifiers) {
-      if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported, { name: importedName })) {
+      if (t2.isImportSpecifier(spec) && t2.isIdentifier(spec.imported, { name: importedName })) {
         return spec.local.name;
       }
     }
@@ -924,21 +1520,21 @@ function findNamedImportBinding(ast, source, importedName) {
 function upsertNamedImports(ast, source, imports) {
   if (imports.length === 0) return;
   for (const node of ast.program.body) {
-    if (!t.isImportDeclaration(node) || node.source.value !== source) continue;
+    if (!t2.isImportDeclaration(node) || node.source.value !== source) continue;
     for (const entry of imports) {
       const exists = node.specifiers.some(function(spec) {
-        return t.isImportSpecifier(spec) && t.isIdentifier(spec.imported, { name: entry.importedName });
+        return t2.isImportSpecifier(spec) && t2.isIdentifier(spec.imported, { name: entry.importedName });
       });
       if (exists) continue;
-      node.specifiers.push(t.importSpecifier(t.identifier(entry.localName), t.identifier(entry.importedName)));
+      node.specifiers.push(t2.importSpecifier(t2.identifier(entry.localName), t2.identifier(entry.importedName)));
     }
     return;
   }
-  const importDecl = t.importDeclaration(
+  const importDecl = t2.importDeclaration(
     imports.map(function(entry) {
-      return t.importSpecifier(t.identifier(entry.localName), t.identifier(entry.importedName));
+      return t2.importSpecifier(t2.identifier(entry.localName), t2.identifier(entry.importedName));
     }),
-    t.stringLiteral(source)
+    t2.stringLiteral(source)
   );
   const idx = findLastImportIndex(ast);
   ast.program.body.splice(idx + 1, 0, importDecl);
@@ -947,11 +1543,11 @@ function extractChain(node, cssBinding) {
   const chain = [];
   let current = node;
   while (true) {
-    if (t.isIdentifier(current, { name: cssBinding })) {
+    if (t2.isIdentifier(current, { name: cssBinding })) {
       chain.reverse();
       return chain;
     }
-    if (t.isMemberExpression(current) && !current.computed && t.isIdentifier(current.property)) {
+    if (t2.isMemberExpression(current) && !current.computed && t2.isIdentifier(current.property)) {
       const name = current.property.name;
       if (name === "else") {
         chain.push({ type: "else" });
@@ -961,7 +1557,7 @@ function extractChain(node, cssBinding) {
       current = current.object;
       continue;
     }
-    if (t.isCallExpression(current) && t.isMemberExpression(current.callee) && !current.callee.computed && t.isIdentifier(current.callee.property)) {
+    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({
@@ -983,328 +1579,28 @@ function extractChain(node, cssBinding) {
   }
 }
 
-// src/plugin/emit-stylex.ts
-import * as t2 from "@babel/types";
-function collectCreateData(chains) {
-  const createEntries = /* @__PURE__ */ new Map();
-  const runtimeLookups = /* @__PURE__ */ new Map();
-  let needsMaybeInc = false;
-  for (const chain of chains) {
-    for (const part of chain.parts) {
-      const segs = part.type === "unconditional" ? part.segments : [...part.thenSegments, ...part.elseSegments];
-      for (const seg of segs) {
-        if (seg.error) continue;
-        if (seg.typographyLookup) {
-          collectTypographyLookup(createEntries, runtimeLookups, seg);
-          continue;
-        }
-        if (seg.styleArrayArg) {
-          continue;
-        }
-        if (seg.dynamicProps) {
-          if (!createEntries.has(seg.key)) {
-            createEntries.set(seg.key, {
-              key: seg.key,
-              dynamic: {
-                props: seg.dynamicProps,
-                extraDefs: seg.dynamicExtraDefs,
-                mediaQuery: seg.mediaQuery,
-                pseudoClass: seg.pseudoClass,
-                pseudoElement: seg.pseudoElement
-              }
-            });
-          }
-        } else {
-          if (!createEntries.has(seg.key)) {
-            createEntries.set(seg.key, {
-              key: seg.key,
-              defs: seg.defs,
-              whenPseudo: seg.whenPseudo
-            });
-          }
-        }
-        if (seg.incremented && seg.dynamicProps) {
-          needsMaybeInc = true;
-        }
-      }
-    }
-  }
-  return { createEntries, runtimeLookups, needsMaybeInc };
-}
-function collectTypographyLookup(createEntries, runtimeLookups, seg) {
-  const lookup = seg.typographyLookup;
-  if (!lookup) return;
-  if (!runtimeLookups.has(lookup.lookupKey)) {
-    runtimeLookups.set(lookup.lookupKey, {
-      lookupKey: lookup.lookupKey,
-      refsByName: Object.fromEntries(
-        Object.entries(lookup.segmentsByName).map(function([name, segments]) {
-          return [
-            name,
-            segments.map(function(segment) {
-              return segment.key;
-            })
-          ];
-        })
-      )
-    });
-  }
-  for (const segments of Object.values(lookup.segmentsByName)) {
-    for (const segment of segments) {
-      if (createEntries.has(segment.key)) continue;
-      createEntries.set(segment.key, {
-        key: segment.key,
-        defs: segment.defs,
-        whenPseudo: segment.whenPseudo
-      });
-    }
-  }
-}
-function buildCreateProperties(createEntries, stylexNamespaceName) {
-  const createProperties = [];
-  for (const [, entry] of createEntries) {
-    if (entry.dynamic) {
-      const paramId = t2.identifier("v");
-      const bodyProps = [];
-      const { mediaQuery, pseudoClass } = entry.dynamic;
-      for (const prop of entry.dynamic.props) {
-        if (pseudoClass && mediaQuery) {
-          bodyProps.push(
-            t2.objectProperty(
-              toPropertyKey(prop),
-              t2.objectExpression([
-                t2.objectProperty(t2.identifier("default"), t2.nullLiteral()),
-                t2.objectProperty(
-                  t2.stringLiteral(pseudoClass),
-                  t2.objectExpression([
-                    t2.objectProperty(t2.identifier("default"), t2.nullLiteral()),
-                    t2.objectProperty(t2.stringLiteral(mediaQuery), paramId)
-                  ])
-                )
-              ])
-            )
-          );
-        } else if (pseudoClass || mediaQuery) {
-          const condition = pseudoClass || mediaQuery;
-          bodyProps.push(
-            t2.objectProperty(
-              toPropertyKey(prop),
-              t2.objectExpression([
-                t2.objectProperty(t2.identifier("default"), t2.nullLiteral()),
-                t2.objectProperty(t2.stringLiteral(condition), paramId)
-              ])
-            )
-          );
-        } else {
-          bodyProps.push(t2.objectProperty(toPropertyKey(prop), paramId));
-        }
-      }
-      if (entry.dynamic.extraDefs) {
-        for (const [prop, value] of Object.entries(entry.dynamic.extraDefs)) {
-          if (pseudoClass && mediaQuery) {
-            bodyProps.push(
-              t2.objectProperty(
-                toPropertyKey(prop),
-                t2.objectExpression([
-                  t2.objectProperty(t2.identifier("default"), t2.nullLiteral()),
-                  t2.objectProperty(
-                    t2.stringLiteral(pseudoClass),
-                    t2.objectExpression([
-                      t2.objectProperty(t2.identifier("default"), t2.nullLiteral()),
-                      t2.objectProperty(t2.stringLiteral(mediaQuery), valueToAst(value))
-                    ])
-                  )
-                ])
-              )
-            );
-          } else if (pseudoClass || mediaQuery) {
-            const condition = pseudoClass || mediaQuery;
-            bodyProps.push(
-              t2.objectProperty(
-                toPropertyKey(prop),
-                t2.objectExpression([
-                  t2.objectProperty(t2.identifier("default"), t2.nullLiteral()),
-                  t2.objectProperty(t2.stringLiteral(condition), valueToAst(value))
-                ])
-              )
-            );
-          } else {
-            bodyProps.push(t2.objectProperty(toPropertyKey(prop), valueToAst(value)));
-          }
-        }
-      }
-      let bodyExpr = t2.objectExpression(bodyProps);
-      if (entry.dynamic.pseudoElement) {
-        bodyExpr = t2.objectExpression([t2.objectProperty(t2.stringLiteral(entry.dynamic.pseudoElement), bodyExpr)]);
-      }
-      const arrowFn = t2.arrowFunctionExpression([paramId], bodyExpr);
-      createProperties.push(t2.objectProperty(toPropertyKey(entry.key), arrowFn));
-      continue;
-    }
-    if (entry.whenPseudo && entry.defs) {
-      const ap = entry.whenPseudo;
-      const props = [];
-      for (const [prop, value] of Object.entries(entry.defs)) {
-        const whenCallArgs = [t2.stringLiteral(ap.pseudo)];
-        if (ap.markerNode) {
-          whenCallArgs.push(ap.markerNode);
-        }
-        const relationship = ap.relationship ?? "ancestor";
-        const whenCall = t2.callExpression(
-          t2.memberExpression(
-            t2.memberExpression(t2.identifier(stylexNamespaceName), t2.identifier("when")),
-            t2.identifier(relationship)
-          ),
-          whenCallArgs
-        );
-        props.push(
-          t2.objectProperty(
-            toPropertyKey(prop),
-            t2.objectExpression([
-              t2.objectProperty(t2.identifier("default"), t2.nullLiteral()),
-              t2.objectProperty(whenCall, valueToAst(value), true)
-            ])
-          )
-        );
-      }
-      createProperties.push(t2.objectProperty(toPropertyKey(entry.key), t2.objectExpression(props)));
-      continue;
-    }
-    if (entry.defs) {
-      createProperties.push(t2.objectProperty(toPropertyKey(entry.key), defsToAst(entry.defs)));
-    }
-  }
-  return createProperties;
-}
-function buildMaybeIncDeclaration(helperName, increment) {
-  const incParam = t2.identifier("inc");
-  const body = t2.blockStatement([
-    t2.returnStatement(
-      t2.conditionalExpression(
-        t2.binaryExpression("===", t2.unaryExpression("typeof", incParam), t2.stringLiteral("string")),
-        incParam,
-        t2.templateLiteral(
-          [t2.templateElement({ raw: "", cooked: "" }, false), t2.templateElement({ raw: "px", cooked: "px" }, true)],
-          [t2.binaryExpression("*", incParam, t2.numericLiteral(increment))]
-        )
-      )
-    )
-  ]);
-  return t2.variableDeclaration("const", [
-    t2.variableDeclarator(t2.identifier(helperName), t2.arrowFunctionExpression([incParam], body))
-  ]);
-}
-function buildCreateDeclaration(createVarName, stylexNamespaceName, createProperties) {
-  const createCall = t2.callExpression(t2.memberExpression(t2.identifier(stylexNamespaceName), t2.identifier("create")), [
-    t2.objectExpression(createProperties)
-  ]);
-  return t2.variableDeclaration("const", [t2.variableDeclarator(t2.identifier(createVarName), createCall)]);
-}
-function buildRuntimeLookupDeclaration(lookupName, createVarName, lookup) {
-  const properties = [];
-  for (const [name, refs] of Object.entries(lookup.refsByName)) {
-    const values = refs.map(function(refKey) {
-      return t2.memberExpression(t2.identifier(createVarName), t2.identifier(refKey));
-    });
-    properties.push(t2.objectProperty(toPropertyKey(name), t2.arrayExpression(values)));
-  }
-  return t2.variableDeclaration("const", [
-    t2.variableDeclarator(t2.identifier(lookupName), t2.objectExpression(properties))
-  ]);
-}
-function defsToAst(defs) {
-  const properties = [];
-  for (const [key, value] of Object.entries(defs)) {
-    const keyNode = toPropertyKey(key);
-    if (value === null) {
-      properties.push(t2.objectProperty(keyNode, t2.nullLiteral()));
-    } else if (typeof value === "string") {
-      properties.push(t2.objectProperty(keyNode, t2.stringLiteral(value)));
-    } else if (typeof value === "number") {
-      properties.push(t2.objectProperty(keyNode, t2.numericLiteral(value)));
-    } else if (typeof value === "object") {
-      properties.push(t2.objectProperty(keyNode, defsToAst(value)));
-    }
-  }
-  return t2.objectExpression(properties);
-}
-function valueToAst(value) {
-  if (value === null) return t2.nullLiteral();
-  if (typeof value === "string") return t2.stringLiteral(value);
-  if (typeof value === "number") return t2.numericLiteral(value);
-  if (typeof value === "object") return defsToAst(value);
-  return t2.stringLiteral(String(value));
-}
-function toPropertyKey(key) {
-  return isValidIdentifier(key) ? t2.identifier(key) : t2.stringLiteral(key);
-}
-function isValidIdentifier(s) {
-  return /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(s);
-}
-
 // src/plugin/rewrite-sites.ts
 import _traverse from "@babel/traverse";
 import _generate from "@babel/generator";
 import * as t3 from "@babel/types";
 var generate = _generate.default ?? _generate;
 var traverse = _traverse.default ?? _traverse;
-function formatDroppedPropertyKey(prop) {
-  if (t3.isObjectProperty(prop)) {
-    if (t3.isIdentifier(prop.key)) return prop.key.name;
-    if (t3.isStringLiteral(prop.key)) return prop.key.value;
-  }
-  return formatNodeSnippet(prop);
-}
 function rewriteExpressionSites(options) {
   for (const site of options.sites) {
-    const propsArgs = buildPropsArgsFromChain(site.resolvedChain, options);
+    const styleHash = buildStyleHashFromChain(site.resolvedChain, options);
     const cssAttrPath = getCssAttributePath(site.path);
+    const line = site.path.node.loc?.start.line ?? null;
     if (cssAttrPath) {
-      cssAttrPath.replaceWith(
-        t3.jsxSpreadAttribute(
-          buildCssSpreadExpression(
-            cssAttrPath,
-            propsArgs,
-            site.path.node.loc?.start.line ?? null,
-            options.mergePropsHelperName,
-            options.needsMergePropsHelper,
-            options
-          )
-        )
-      );
-      continue;
+      cssAttrPath.replaceWith(t3.jsxSpreadAttribute(buildCssSpreadExpression(cssAttrPath, styleHash, line, options)));
+    } else {
+      if (options.debug && line !== null) {
+        injectDebugInfo(styleHash, line, options);
+      }
+      site.path.replaceWith(styleHash);
     }
-    site.path.replaceWith(buildStyleArrayExpression(propsArgs, site.path.node.loc?.start.line ?? null, options));
   }
   rewriteCssPropsCalls(options);
-  rewriteCssSpreadCalls(
-    options.ast,
-    options.cssBindingName,
-    options.asStyleArrayHelperName,
-    options.needsAsStyleArrayHelper
-  );
-  rewriteStyleObjectExpressions(
-    options.ast,
-    options.skippedCssPropMessages,
-    options.asStyleArrayHelperName,
-    options.needsAsStyleArrayHelper
-  );
-  normalizeMixedStyleTernaries(options.ast);
-  rewriteCssAttributeExpressions(
-    options.ast,
-    options.filename,
-    options.debug,
-    options.stylexNamespaceName,
-    options.mergePropsHelperName,
-    options.needsMergePropsHelper,
-    options.trussPropsHelperName,
-    options.needsTrussPropsHelper,
-    options.trussDebugInfoName,
-    options.needsTrussDebugInfo,
-    options.asStyleArrayHelperName,
-    options.needsAsStyleArrayHelper,
-    options.skippedCssPropMessages
-  );
+  rewriteCssAttributeExpressions(options);
 }
 function getCssAttributePath(path) {
   const parentPath = path.parentPath;
@@ -1314,312 +1610,120 @@ function getCssAttributePath(path) {
   if (!t3.isJSXIdentifier(attrPath.node.name, { name: "css" })) return null;
   return attrPath;
 }
-function buildPropsArgsFromChain(chain, options) {
-  const args = [];
-  for (const marker of chain.markers) {
-    if (marker.markerNode) {
-      args.push(marker.markerNode);
-    } else {
-      args.push(
-        t3.callExpression(
-          t3.memberExpression(t3.identifier(options.stylexNamespaceName), t3.identifier("defaultMarker")),
-          []
-        )
-      );
-    }
+function buildStyleHashFromChain(chain, options) {
+  const members = [];
+  if (chain.markers.length > 0) {
+    const markerClasses = chain.markers.map(function(marker) {
+      return markerClassName(marker.markerNode);
+    });
+    members.push(t3.objectProperty(t3.identifier("__marker"), t3.stringLiteral(markerClasses.join(" "))));
   }
   for (const part of chain.parts) {
     if (part.type === "unconditional") {
-      args.push(...buildPropsArgs(part.segments, options));
-      continue;
-    }
-    const thenArgs = buildPropsArgs(part.thenSegments, options);
-    const elseArgs = buildPropsArgs(part.elseSegments, options);
-    if (thenArgs.length === 1 && elseArgs.length === 1 && !t3.isSpreadElement(thenArgs[0]) && !t3.isSpreadElement(elseArgs[0])) {
-      args.push(t3.conditionalExpression(part.conditionNode, thenArgs[0], elseArgs[0]));
-    } else if (thenArgs.length > 0 || elseArgs.length > 0) {
-      args.push(
+      members.push(...buildStyleHashMembers(part.segments, options));
+    } else {
+      const thenMembers = buildStyleHashMembers(part.thenSegments, options);
+      const elseMembers = buildStyleHashMembers(part.elseSegments, options);
+      members.push(
         t3.spreadElement(
-          t3.conditionalExpression(part.conditionNode, t3.arrayExpression(thenArgs), t3.arrayExpression(elseArgs))
+          t3.conditionalExpression(part.conditionNode, t3.objectExpression(thenMembers), t3.objectExpression(elseMembers))
         )
       );
     }
   }
-  return args;
+  return t3.objectExpression(members);
 }
-function buildPropsArgs(segments, options) {
-  const args = [];
+function buildStyleHashMembers(segments, options) {
+  const members = [];
+  const normalSegs = [];
+  function flushNormal() {
+    if (normalSegs.length > 0) {
+      members.push(...buildStyleHashProperties(normalSegs, options.mapping, options.maybeIncHelperName));
+      normalSegs.length = 0;
+    }
+  }
   for (const seg of segments) {
     if (seg.error) continue;
-    if (seg.typographyLookup) {
-      const lookupName = options.runtimeLookupNames.get(seg.typographyLookup.lookupKey);
-      if (!lookupName) {
-        continue;
-      }
-      const lookupAccess = t3.memberExpression(
-        t3.identifier(lookupName),
-        seg.typographyLookup.argNode,
-        true
-      );
-      args.push(t3.spreadElement(t3.logicalExpression("??", lookupAccess, t3.arrayExpression([]))));
-      continue;
-    }
     if (seg.styleArrayArg) {
-      args.push(
-        t3.spreadElement(
-          buildUnknownSpreadFallback(
-            seg.styleArrayArg,
-            options.asStyleArrayHelperName,
-            options.needsAsStyleArrayHelper
-          )
-        )
-      );
+      flushNormal();
+      members.push(t3.spreadElement(seg.styleArrayArg));
       continue;
     }
-    const ref = t3.memberExpression(t3.identifier(options.createVarName), t3.identifier(seg.key));
-    if (seg.dynamicProps && seg.argNode) {
-      let argExpr;
-      if (seg.incremented && options.maybeIncHelperName) {
-        argExpr = t3.callExpression(t3.identifier(options.maybeIncHelperName), [seg.argNode]);
-      } else if (seg.incremented) {
-        argExpr = seg.argNode;
-      } else if (seg.appendPx) {
-        argExpr = t3.binaryExpression(
-          "+",
-          t3.callExpression(t3.identifier("String"), [seg.argNode]),
-          t3.stringLiteral("px")
+    if (seg.typographyLookup) {
+      flushNormal();
+      const lookupName = options.runtimeLookupNames.get(seg.typographyLookup.lookupKey);
+      if (lookupName) {
+        const lookupAccess = t3.memberExpression(
+          t3.identifier(lookupName),
+          seg.typographyLookup.argNode,
+          true
         );
-      } else {
-        argExpr = t3.callExpression(t3.identifier("String"), [seg.argNode]);
+        members.push(t3.spreadElement(t3.logicalExpression("??", lookupAccess, t3.objectExpression([]))));
       }
-      args.push(t3.callExpression(ref, [argExpr]));
-    } else {
-      args.push(ref);
+      continue;
     }
+    normalSegs.push(seg);
   }
-  return args;
+  flushNormal();
+  return members;
 }
-function rewriteCssAttributeExpressions(ast, filename, debug, stylexNamespaceName, mergePropsHelperName, needsMergePropsHelper, trussPropsHelperName, needsTrussPropsHelper, trussDebugInfoName, needsTrussDebugInfo, asStyleArrayHelperName, needsAsStyleArrayHelper, skippedCssPropMessages) {
-  traverse(ast, {
-    JSXAttribute(path) {
-      if (!t3.isJSXIdentifier(path.node.name, { name: "css" })) return;
-      const value = path.node.value;
-      if (!t3.isJSXExpressionContainer(value)) return;
-      if (!t3.isExpression(value.expression)) return;
-      const propsArgs = lowerCssExpressionToPropsArgs(
-        value.expression,
-        path,
-        asStyleArrayHelperName,
-        needsAsStyleArrayHelper
-      );
-      if (!propsArgs) {
-        skippedCssPropMessages.push({
-          message: explainSkippedCssRewrite(value.expression, path),
-          line: path.node.loc?.start.line ?? null
-        });
-        return;
-      }
-      path.replaceWith(
-        t3.jsxSpreadAttribute(
-          buildCssSpreadExpression(
-            path,
-            propsArgs,
-            path.node.loc?.start.line ?? null,
-            mergePropsHelperName,
-            needsMergePropsHelper,
-            {
-              filename,
-              debug,
-              stylexNamespaceName,
-              trussPropsHelperName,
-              needsTrussPropsHelper,
-              trussDebugInfoName,
-              needsTrussDebugInfo
-            }
-          )
-        )
-      );
-    }
+function injectDebugInfo(expr, line, options) {
+  if (!options.debug) return;
+  const firstProp = expr.properties.find(function(p) {
+    return t3.isObjectProperty(p) && !(t3.isIdentifier(p.key) && p.key.name === "__marker" || t3.isStringLiteral(p.key) && p.key.value === "__marker");
   });
-}
-function buildStyleArrayExpression(propsArgs, line, options) {
-  const elements = buildDebugElements(line, options);
-  elements.push(...propsArgs);
-  return t3.arrayExpression(elements);
-}
-function buildPropsCall(propsArgs, line, options) {
-  if (!options.debug) {
-    return t3.callExpression(
-      t3.memberExpression(t3.identifier(options.stylexNamespaceName), t3.identifier("props")),
-      propsArgs
-    );
-  }
-  options.needsTrussPropsHelper.current = true;
-  const args = buildDebugElements(line, options);
-  args.push(...propsArgs);
-  return t3.callExpression(t3.identifier(options.trussPropsHelperName), [
-    t3.identifier(options.stylexNamespaceName),
-    ...args
+  if (!firstProp) return;
+  options.needsTrussDebugInfo.current = true;
+  const debugExpr = t3.newExpression(t3.identifier(options.trussDebugInfoName), [
+    t3.stringLiteral(`${options.filename}:${line}`)
   ]);
-}
-function buildDebugElements(line, options) {
-  if (!options.debug || line === null) {
-    return [];
+  if (t3.isStringLiteral(firstProp.value)) {
+    firstProp.value = t3.arrayExpression([firstProp.value, debugExpr]);
+  } else if (t3.isArrayExpression(firstProp.value)) {
+    firstProp.value.elements.push(debugExpr);
   }
-  options.needsTrussDebugInfo.current = true;
-  return [t3.newExpression(t3.identifier(options.trussDebugInfoName), [t3.stringLiteral(`${options.filename}:${line}`)])];
-}
-function lowerCssExpressionToPropsArgs(expr, path, asStyleArrayHelperName, needsAsStyleArrayHelper) {
-  return buildStyleObjectPropsArgs(expr, path, asStyleArrayHelperName, needsAsStyleArrayHelper) ?? buildStyleArrayLikePropsArgsFromExpression(expr, path);
 }
-function explainSkippedCssRewrite(expr, path) {
-  if (t3.isObjectExpression(expr)) {
-    for (const prop of expr.properties) {
-      if (!t3.isSpreadElement(prop)) {
-        return `[truss] Unsupported pattern: Could not rewrite css prop: object contains a non-spread property (${formatNodeSnippet(expr)})`;
-      }
-      const normalizedArg = normalizeStyleExpression(prop.argument);
-      if (!normalizedArg) {
-        return `[truss] Unsupported pattern: Could not rewrite css prop: spread argument is not style-array-like (${formatNodeSnippet(prop.argument)})`;
-      }
-    }
-    return `[truss] Unsupported pattern: Could not rewrite css prop: object spread composition was not recognized (${formatNodeSnippet(expr)})`;
+function buildCssSpreadExpression(path, styleHash, line, options) {
+  const existingClassNameExpr = removeExistingAttribute(path, "className");
+  const existingStyleExpr = removeExistingAttribute(path, "style");
+  if (!existingClassNameExpr && !existingStyleExpr) {
+    return buildPropsCall(styleHash, line, options);
   }
-  return `[truss] Unsupported pattern: Could not rewrite css prop: expression is not style-array-like (${formatNodeSnippet(expr)})`;
-}
-function formatNodeSnippet(node) {
-  return generate(node, { compact: true, comments: true }).code;
-}
-function buildCssSpreadExpression(path, propsArgs, line, mergePropsHelperName, needsMergePropsHelper, options) {
-  const existingClassNameExpr = removeExistingClassNameAttribute(path);
-  if (!existingClassNameExpr) return buildPropsCall(propsArgs, line, options);
-  needsMergePropsHelper.current = true;
-  const args = buildDebugElements(line, options);
-  args.push(...propsArgs);
-  return t3.callExpression(t3.identifier(mergePropsHelperName), [
-    t3.identifier(options.stylexNamespaceName),
-    existingClassNameExpr,
-    ...args
+  options.needsMergePropsHelper.current = true;
+  if (options.debug && line !== null) {
+    injectDebugInfo(styleHash, line, options);
+  }
+  return t3.callExpression(t3.identifier(options.mergePropsHelperName), [
+    existingClassNameExpr ?? t3.identifier("undefined"),
+    existingStyleExpr ?? t3.identifier("undefined"),
+    styleHash
   ]);
 }
-function removeExistingClassNameAttribute(path) {
+function buildPropsCall(styleHash, line, options) {
+  options.needsTrussPropsHelper.current = true;
+  if (options.debug && line !== null && t3.isObjectExpression(styleHash)) {
+    injectDebugInfo(styleHash, line, options);
+  }
+  return t3.callExpression(t3.identifier(options.trussPropsHelperName), [styleHash]);
+}
+function removeExistingAttribute(path, attrName) {
   const openingElement = path.parentPath;
   if (!openingElement || !openingElement.isJSXOpeningElement()) return null;
   const attrs = openingElement.node.attributes;
   for (let i = 0; i < attrs.length; i++) {
     const attr = attrs[i];
-    if (!t3.isJSXAttribute(attr) || !t3.isJSXIdentifier(attr.name, { name: "className" })) continue;
-    let classNameExpr = null;
+    if (!t3.isJSXAttribute(attr) || !t3.isJSXIdentifier(attr.name, { name: attrName })) continue;
+    let expr = null;
     if (t3.isStringLiteral(attr.value)) {
-      classNameExpr = attr.value;
+      expr = attr.value;
     } else if (t3.isJSXExpressionContainer(attr.value) && t3.isExpression(attr.value.expression)) {
-      classNameExpr = attr.value.expression;
+      expr = attr.value.expression;
     }
     attrs.splice(i, 1);
-    return classNameExpr;
-  }
-  return null;
-}
-function buildStyleObjectPropsArgs(expr, path, asStyleArrayHelperName, needsAsStyleArrayHelper) {
-  if (!t3.isObjectExpression(expr) || expr.properties.length === 0) return null;
-  const allSpreads = expr.properties.every(function(prop) {
-    return t3.isSpreadElement(prop);
-  });
-  if (!allSpreads) return null;
-  if (hasStyleArraySpread(expr, path)) {
-    const result = flattenStyleObject(expr, path, asStyleArrayHelperName, needsAsStyleArrayHelper);
-    return result.elements.filter(Boolean);
-  }
-  return expr.properties.map(function(prop) {
-    const spread = prop;
-    return t3.spreadElement(
-      buildUnknownSpreadFallback(spread.argument, asStyleArrayHelperName, needsAsStyleArrayHelper)
-      // I.e. `css={{ ...css }}` or `css={{ ...xss }}`
-    );
-  });
-}
-function buildStyleArrayLikePropsArgsFromExpression(expr, path) {
-  const normalizedExpr = normalizeStyleExpression(expr);
-  if (!normalizedExpr) return null;
-  return buildStyleArrayLikePropsArgs(normalizedExpr, path);
-}
-function buildStyleArrayLikePropsArgs(expr, path) {
-  if (t3.isArrayExpression(expr)) {
-    const propsArgs = [];
-    for (const el of expr.elements) {
-      if (!el) continue;
-      if (t3.isSpreadElement(el)) {
-        const normalizedArg = normalizeStyleExpression(el.argument);
-        if (!normalizedArg) {
-          propsArgs.push(t3.spreadElement(el.argument));
-          continue;
-        }
-        if (t3.isArrayExpression(normalizedArg)) {
-          const nestedArgs = buildStyleArrayLikePropsArgs(normalizedArg, path);
-          if (nestedArgs) {
-            propsArgs.push(...nestedArgs);
-            continue;
-          }
-        }
-        propsArgs.push(t3.spreadElement(buildSafeSpreadArgument(normalizedArg)));
-        continue;
-      }
-      propsArgs.push(el);
-    }
-    return propsArgs;
-  }
-  if (t3.isIdentifier(expr) || t3.isMemberExpression(expr) || t3.isConditionalExpression(expr) || t3.isLogicalExpression(expr) || t3.isCallExpression(expr)) {
-    return [t3.spreadElement(buildSafeSpreadArgument(expr))];
+    return expr;
   }
   return null;
 }
-function rewriteStyleObjectExpressions(ast, messages, asStyleArrayHelperName, needsAsStyleArrayHelper) {
-  traverse(ast, {
-    ObjectExpression(path) {
-      if (!hasStyleArraySpread(path.node, path)) return;
-      const result = flattenStyleObject(path.node, path, asStyleArrayHelperName, needsAsStyleArrayHelper);
-      if (result.droppedPropertyKeys.length > 0) {
-        messages.push({
-          message: `[truss] Unsupported pattern: Dropped non-spread properties from style composition object (${result.droppedPropertyKeys.join(", ")})`,
-          line: path.node.loc?.start.line ?? null
-        });
-      }
-      path.replaceWith(t3.arrayExpression(result.elements));
-    }
-  });
-}
-function normalizeMixedStyleTernaries(ast) {
-  traverse(ast, {
-    ConditionalExpression(path) {
-      const consequentHasArray = expressionContainsArray(path.node.consequent, path);
-      const alternateHasArray = expressionContainsArray(path.node.alternate, path);
-      if (consequentHasArray && isEmptyObjectExpression(path.node.alternate)) {
-        path.node.alternate = t3.arrayExpression([]);
-      } else if (alternateHasArray && isEmptyObjectExpression(path.node.consequent)) {
-        path.node.consequent = t3.arrayExpression([]);
-      }
-    },
-    LogicalExpression(path) {
-      if (path.node.operator !== "||" && path.node.operator !== "??") return;
-      if (expressionContainsArray(path.node.left, path) && isEmptyObjectExpression(path.node.right)) {
-        path.node.right = t3.arrayExpression([]);
-      }
-    }
-  });
-}
-function rewriteCssSpreadCalls(ast, cssBindingName, asStyleArrayHelperName, needsAsStyleArrayHelper) {
-  traverse(ast, {
-    CallExpression(path) {
-      if (!isCssSpreadCall(path.node, cssBindingName)) return;
-      const arg = path.node.arguments[0];
-      if (!arg || t3.isSpreadElement(arg) || !t3.isExpression(arg) || path.node.arguments.length !== 1) return;
-      const styleObject = unwrapStyleObjectExpression(arg);
-      if (!styleObject) return;
-      const result = flattenStyleObject(styleObject, path, asStyleArrayHelperName, needsAsStyleArrayHelper);
-      path.replaceWith(t3.arrayExpression(result.elements));
-    }
-  });
-}
 function rewriteCssPropsCalls(options) {
   traverse(options.ast, {
     CallExpression(path) {
@@ -1627,28 +1731,51 @@ function rewriteCssPropsCalls(options) {
       const arg = path.node.arguments[0];
       if (!arg || t3.isSpreadElement(arg) || !t3.isExpression(arg) || path.node.arguments.length !== 1) return;
       const line = path.node.loc?.start.line ?? null;
-      let propsArgs;
-      const styleObject = unwrapStyleObjectExpression(arg);
-      if (styleObject) {
-        const result = flattenStyleObject(
-          styleObject,
-          path,
-          options.asStyleArrayHelperName,
-          options.needsAsStyleArrayHelper
+      options.needsTrussPropsHelper.current = true;
+      const classNameExpr = extractSiblingClassName(path);
+      if (classNameExpr) {
+        options.needsMergePropsHelper.current = true;
+        path.replaceWith(
+          t3.callExpression(t3.identifier(options.mergePropsHelperName), [classNameExpr, t3.identifier("undefined"), arg])
         );
-        propsArgs = result.elements.filter((e) => e !== null);
       } else {
-        propsArgs = [t3.spreadElement(arg)];
+        path.replaceWith(t3.callExpression(t3.identifier(options.trussPropsHelperName), [arg]));
       }
-      const classNameExpr = extractSiblingClassName(path);
-      if (classNameExpr) {
-        path.replaceWith(buildMergePropsCall(propsArgs, classNameExpr, line, options));
+    }
+  });
+}
+function rewriteCssAttributeExpressions(options) {
+  traverse(options.ast, {
+    JSXAttribute(path) {
+      if (!t3.isJSXIdentifier(path.node.name, { name: "css" })) return;
+      const value = path.node.value;
+      if (!t3.isJSXExpressionContainer(value)) return;
+      if (!t3.isExpression(value.expression)) return;
+      const expr = value.expression;
+      const line = path.node.loc?.start.line ?? null;
+      const existingClassNameExpr = removeExistingAttribute(path, "className");
+      const existingStyleExpr = removeExistingAttribute(path, "style");
+      if (existingClassNameExpr || existingStyleExpr) {
+        options.needsMergePropsHelper.current = true;
+        path.replaceWith(
+          t3.jsxSpreadAttribute(
+            t3.callExpression(t3.identifier(options.mergePropsHelperName), [
+              existingClassNameExpr ?? t3.identifier("undefined"),
+              existingStyleExpr ?? t3.identifier("undefined"),
+              expr
+            ])
+          )
+        );
       } else {
-        path.replaceWith(buildPropsCall(propsArgs, line, options));
+        options.needsTrussPropsHelper.current = true;
+        path.replaceWith(t3.jsxSpreadAttribute(t3.callExpression(t3.identifier(options.trussPropsHelperName), [expr])));
       }
     }
   });
 }
+function isCssPropsCall(expr, cssBindingName) {
+  return t3.isMemberExpression(expr.callee) && !expr.callee.computed && t3.isIdentifier(expr.callee.object, { name: cssBindingName }) && t3.isIdentifier(expr.callee.property, { name: "props" });
+}
 function extractSiblingClassName(callPath) {
   const spreadPath = callPath.parentPath;
   if (!spreadPath || !spreadPath.isSpreadElement()) return null;
@@ -1666,230 +1793,9 @@ function extractSiblingClassName(callPath) {
   }
   return null;
 }
-function buildMergePropsCall(propsArgs, classNameExpr, line, options) {
-  options.needsMergePropsHelper.current = true;
-  const args = buildDebugElements(line, options);
-  args.push(...propsArgs);
-  return t3.callExpression(t3.identifier(options.mergePropsHelperName), [
-    t3.identifier(options.stylexNamespaceName),
-    classNameExpr,
-    ...args
-  ]);
-}
-function flattenStyleObject(expr, path, asStyleArrayHelperName, needsAsStyleArrayHelper) {
-  const elements = [];
-  const droppedPropertyKeys = [];
-  for (const prop of expr.properties) {
-    if (!t3.isSpreadElement(prop)) {
-      droppedPropertyKeys.push(formatDroppedPropertyKey(prop));
-      continue;
-    }
-    const normalized = normalizeStyleExpression(prop.argument);
-    if (!normalized) {
-      elements.push(
-        t3.spreadElement(buildUnknownSpreadFallback(prop.argument, asStyleArrayHelperName, needsAsStyleArrayHelper))
-      );
-      continue;
-    }
-    if (t3.isArrayExpression(normalized)) {
-      elements.push(...normalized.elements);
-    } else if (isProvablyArray(normalized)) {
-      elements.push(t3.spreadElement(buildSafeSpreadArgument(normalized)));
-    } else {
-      elements.push(
-        t3.spreadElement(buildUnknownSpreadFallback(normalized, asStyleArrayHelperName, needsAsStyleArrayHelper))
-        // I.e. `...borderBottomStyles`
-      );
-    }
-  }
-  return { elements, droppedPropertyKeys };
-}
-function hasStyleArraySpread(expr, path) {
-  return expr.properties.some(function(prop) {
-    return t3.isSpreadElement(prop) && expressionContainsArray(prop.argument, path);
-  });
-}
-function expressionContainsArray(expr, path) {
-  if (t3.isArrayExpression(expr)) return true;
-  if (t3.isConditionalExpression(expr)) {
-    return expressionContainsArray(expr.consequent, path) || expressionContainsArray(expr.alternate, path);
-  }
-  if (t3.isLogicalExpression(expr)) {
-    return expressionContainsArray(expr.left, path) || expressionContainsArray(expr.right, path);
-  }
-  if (t3.isObjectExpression(expr)) {
-    return expr.properties.some(function(p) {
-      return t3.isSpreadElement(p) && expressionContainsArray(p.argument, path);
-    });
-  }
-  if (t3.isIdentifier(expr)) {
-    const binding = path.scope.getBinding(expr.name);
-    if (binding?.path.isVariableDeclarator()) {
-      const init = binding.path.node.init;
-      if (init) return expressionContainsArray(init, binding.path);
-    }
-    return false;
-  }
-  if (t3.isMemberExpression(expr) && t3.isIdentifier(expr.object)) {
-    const binding = path.scope.getBinding(expr.object.name);
-    if (binding?.path.isVariableDeclarator()) {
-      const init = binding.path.node.init;
-      if (init && t3.isObjectExpression(init)) {
-        const propName = getStaticMemberPropertyName(expr, path);
-        if (propName) {
-          for (const prop of init.properties) {
-            if (!t3.isObjectProperty(prop) || prop.computed) continue;
-            if (!isMatchingPropertyName(prop.key, propName)) continue;
-            if (t3.isExpression(prop.value)) {
-              return expressionContainsArray(prop.value, binding.path);
-            }
-          }
-        }
-      }
-    }
-    return false;
-  }
-  if (t3.isCallExpression(expr)) {
-    const returnExpr = getCallReturnExpression(expr, path);
-    return returnExpr ? expressionContainsArray(returnExpr, path) : false;
-  }
-  return false;
-}
-function normalizeStyleExpression(expr) {
-  if (t3.isArrayExpression(expr)) return expr;
-  if (isEmptyStyleFallbackExpression(expr)) return t3.arrayExpression([]);
-  if (t3.isLogicalExpression(expr) && expr.operator === "&&") {
-    const consequent = normalizeStyleExpression(expr.right);
-    if (!consequent) return null;
-    return t3.conditionalExpression(expr.left, consequent, t3.arrayExpression([]));
-  }
-  if (t3.isLogicalExpression(expr) && (expr.operator === "||" || expr.operator === "??")) {
-    const left = normalizeStyleExpression(expr.left);
-    const right = normalizeStyleBranch(expr.right);
-    if (!left || !right) return null;
-    return t3.logicalExpression(expr.operator, left, right);
-  }
-  if (t3.isConditionalExpression(expr)) {
-    const consequent = normalizeStyleBranch(expr.consequent);
-    const alternate = normalizeStyleBranch(expr.alternate);
-    if (!consequent || !alternate) return null;
-    return t3.conditionalExpression(expr.test, consequent, alternate);
-  }
-  if (t3.isIdentifier(expr) || t3.isMemberExpression(expr) || t3.isCallExpression(expr)) {
-    return expr;
-  }
-  return null;
-}
-function normalizeStyleBranch(expr) {
-  if (isEmptyStyleFallbackExpression(expr)) return t3.arrayExpression([]);
-  if (t3.isObjectExpression(expr)) {
-    if (expr.properties.length === 0) return t3.arrayExpression([]);
-    const allSpreads = expr.properties.every(function(p) {
-      return t3.isSpreadElement(p);
-    });
-    if (!allSpreads) return null;
-    const elements = [];
-    for (const prop of expr.properties) {
-      const spread = prop;
-      const normalized = normalizeStyleExpression(spread.argument);
-      if (!normalized) return null;
-      if (t3.isArrayExpression(normalized)) {
-        elements.push(...normalized.elements);
-      } else {
-        elements.push(t3.spreadElement(buildSafeSpreadArgument(normalized)));
-      }
-    }
-    return t3.arrayExpression(elements);
-  }
-  return normalizeStyleExpression(expr);
-}
-function isCssPropsCall(expr, cssBindingName) {
-  return t3.isMemberExpression(expr.callee) && !expr.callee.computed && t3.isIdentifier(expr.callee.object, { name: cssBindingName }) && t3.isIdentifier(expr.callee.property, { name: "props" });
-}
-function isCssSpreadCall(expr, cssBindingName) {
-  return t3.isMemberExpression(expr.callee) && !expr.callee.computed && t3.isIdentifier(expr.callee.object, { name: cssBindingName }) && t3.isIdentifier(expr.callee.property, { name: "spread" });
-}
-function unwrapStyleObjectExpression(expr) {
-  if (t3.isObjectExpression(expr)) return expr;
-  if (t3.isTSAsExpression(expr) || t3.isTSSatisfiesExpression(expr) || t3.isTSNonNullExpression(expr)) {
-    return unwrapStyleObjectExpression(expr.expression);
-  }
-  return null;
-}
 function isMatchingPropertyName(key, name) {
   return t3.isIdentifier(key) && key.name === name || t3.isStringLiteral(key) && key.value === name;
 }
-function isEmptyObjectExpression(expr) {
-  return t3.isObjectExpression(expr) && expr.properties.length === 0;
-}
-function isEmptyStyleFallbackExpression(expr) {
-  return isEmptyObjectExpression(expr) || t3.isIdentifier(expr, { name: "undefined" }) || t3.isNullLiteral(expr) || t3.isBooleanLiteral(expr) && expr.value === false;
-}
-function isProvablyArray(expr) {
-  if (t3.isArrayExpression(expr)) return true;
-  if (t3.isParenthesizedExpression(expr)) return isProvablyArray(expr.expression);
-  if (t3.isConditionalExpression(expr)) {
-    return isProvablyArray(expr.consequent) && isProvablyArray(expr.alternate);
-  }
-  if (t3.isLogicalExpression(expr)) {
-    return isProvablyArray(expr.left) && isProvablyArray(expr.right);
-  }
-  return false;
-}
-function buildUnknownSpreadFallback(expr, asStyleArrayHelperName, needsAsStyleArrayHelper) {
-  needsAsStyleArrayHelper.current = true;
-  return t3.callExpression(t3.identifier(asStyleArrayHelperName), [expr]);
-}
-function buildSafeSpreadArgument(expr) {
-  return t3.isConditionalExpression(expr) || t3.isLogicalExpression(expr) ? t3.parenthesizedExpression(expr) : expr;
-}
-function getStaticMemberPropertyName(expr, path) {
-  if (!expr.computed && t3.isIdentifier(expr.property)) {
-    return expr.property.name;
-  }
-  if (t3.isStringLiteral(expr.property)) {
-    return expr.property.value;
-  }
-  if (t3.isIdentifier(expr.property)) {
-    const binding = path.scope.getBinding(expr.property.name);
-    if (!binding?.path.isVariableDeclarator()) return null;
-    const init = binding.path.node.init;
-    return t3.isStringLiteral(init) ? init.value : null;
-  }
-  return null;
-}
-function getCallReturnExpression(expr, path) {
-  const localReturnExpr = getLocalFunctionReturnExpression(expr, path);
-  if (localReturnExpr) return localReturnExpr;
-  const firstArg = expr.arguments[0];
-  if (firstArg && !t3.isSpreadElement(firstArg) && (t3.isArrowFunctionExpression(firstArg) || t3.isFunctionExpression(firstArg))) {
-    return getFunctionLikeReturnExpression(firstArg);
-  }
-  return null;
-}
-function getLocalFunctionReturnExpression(expr, path) {
-  if (!t3.isIdentifier(expr.callee)) return null;
-  const binding = path.scope.getBinding(expr.callee.name);
-  if (!binding) return null;
-  if (binding.path.isFunctionDeclaration()) {
-    return getFunctionLikeReturnExpression(binding.path.node);
-  }
-  if (binding.path.isVariableDeclarator()) {
-    const init = binding.path.node.init;
-    if (init && (t3.isArrowFunctionExpression(init) || t3.isFunctionExpression(init))) {
-      return getFunctionLikeReturnExpression(init);
-    }
-  }
-  return null;
-}
-function getFunctionLikeReturnExpression(fn) {
-  if (t3.isExpression(fn.body)) {
-    return fn.body;
-  }
-  if (fn.body.body.length !== 1) return null;
-  const stmt = fn.body.body[0];
-  return t3.isReturnStatement(stmt) && stmt.argument && t3.isExpression(stmt.argument) ? stmt.argument : null;
-}
 
 // src/plugin/transform.ts
 var traverse2 = _traverse2.default ?? _traverse2;
@@ -1915,7 +1821,7 @@ function transformTruss(code, filename, mapping, options = {}) {
       if (parentPath && parentPath.isMemberExpression() && t4.isIdentifier(parentPath.node.property, { name: "$" })) {
         return;
       }
-      const resolvedChain = resolveFullChain(chain, mapping);
+      const resolvedChain = resolveFullChain(chain, mapping, { skipMerge: true });
       sites.push({ path, resolvedChain });
       const line = path.node.loc?.start.line ?? null;
       for (const err of resolvedChain.errors) {
@@ -1925,18 +1831,14 @@ function transformTruss(code, filename, mapping, options = {}) {
   });
   const hasCssPropsCall = hasCssMethodCall(ast, cssBindingName, "props");
   if (sites.length === 0 && !hasCssPropsCall) return null;
-  const { createEntries, runtimeLookups, needsMaybeInc } = collectCreateData(sites.map((s) => s.resolvedChain));
+  const chains = sites.map((s) => s.resolvedChain);
+  const { rules, needsMaybeInc } = collectAtomicRules(chains, mapping);
+  const cssText = generateCssText(rules);
   const usedTopLevelNames = collectTopLevelBindings(ast);
-  const existingStylexNamespace = findStylexNamespaceImport(ast);
-  const stylexNamespaceName = existingStylexNamespace ?? reservePreferredName(usedTopLevelNames, "stylex");
-  const createVarName = reservePreferredName(usedTopLevelNames, "css", "css_");
   const maybeIncHelperName = needsMaybeInc ? reservePreferredName(usedTopLevelNames, "__maybeInc") : null;
   const existingMergePropsHelperName = findNamedImportBinding(ast, "@homebound/truss/runtime", "mergeProps");
   const mergePropsHelperName = existingMergePropsHelperName ?? reservePreferredName(usedTopLevelNames, "mergeProps");
   const needsMergePropsHelper = { current: false };
-  const existingAsStyleArrayHelperName = findNamedImportBinding(ast, "@homebound/truss/runtime", "asStyleArray");
-  const asStyleArrayHelperName = existingAsStyleArrayHelperName ?? reservePreferredName(usedTopLevelNames, "asStyleArray");
-  const needsAsStyleArrayHelper = { current: false };
   const existingTrussPropsHelperName = findNamedImportBinding(ast, "@homebound/truss/runtime", "trussProps");
   const trussPropsHelperName = existingTrussPropsHelperName ?? reservePreferredName(usedTopLevelNames, "trussProps");
   const needsTrussPropsHelper = { current: false };
@@ -1944,18 +1846,17 @@ function transformTruss(code, filename, mapping, options = {}) {
   const trussDebugInfoName = existingTrussDebugInfoName ?? reservePreferredName(usedTopLevelNames, "TrussDebugInfo");
   const needsTrussDebugInfo = { current: false };
   const runtimeLookupNames = /* @__PURE__ */ new Map();
+  const runtimeLookups = collectRuntimeLookups(chains);
   for (const [lookupKey] of runtimeLookups) {
     runtimeLookupNames.set(lookupKey, reservePreferredName(usedTopLevelNames, `__${lookupKey}`));
   }
-  const createProperties = buildCreateProperties(createEntries, stylexNamespaceName);
   rewriteExpressionSites({
     ast,
     sites,
     cssBindingName,
     filename: basename(filename),
     debug: options.debug ?? false,
-    createVarName,
-    stylexNamespaceName,
+    mapping,
     maybeIncHelperName,
     mergePropsHelperName,
     needsMergePropsHelper,
@@ -1963,55 +1864,50 @@ function transformTruss(code, filename, mapping, options = {}) {
     needsTrussPropsHelper,
     trussDebugInfoName,
     needsTrussDebugInfo,
-    asStyleArrayHelperName,
-    needsAsStyleArrayHelper,
     skippedCssPropMessages: errorMessages,
     runtimeLookupNames
   });
   removeCssImport(ast, cssBindingName);
-  if (!findStylexNamespaceImport(ast)) {
-    insertStylexNamespaceImport(ast, stylexNamespaceName);
+  const runtimeImports = [];
+  if (needsTrussPropsHelper.current) {
+    runtimeImports.push({ importedName: "trussProps", localName: trussPropsHelperName });
   }
-  if (needsMergePropsHelper.current || needsAsStyleArrayHelper.current || needsTrussPropsHelper.current || needsTrussDebugInfo.current) {
-    const runtimeImports = [];
-    if (needsMergePropsHelper.current) {
-      runtimeImports.push({ importedName: "mergeProps", localName: mergePropsHelperName });
-    }
-    if (needsAsStyleArrayHelper.current) {
-      runtimeImports.push({ importedName: "asStyleArray", localName: asStyleArrayHelperName });
-    }
-    if (needsTrussPropsHelper.current) {
-      runtimeImports.push({ importedName: "trussProps", localName: trussPropsHelperName });
-    }
-    if (needsTrussDebugInfo.current) {
-      runtimeImports.push({ importedName: "TrussDebugInfo", localName: trussDebugInfoName });
-    }
+  if (needsMergePropsHelper.current) {
+    runtimeImports.push({ importedName: "mergeProps", localName: mergePropsHelperName });
+  }
+  if (needsTrussDebugInfo.current) {
+    runtimeImports.push({ importedName: "TrussDebugInfo", localName: trussDebugInfoName });
+  }
+  if (options.injectCss) {
+    runtimeImports.push({ importedName: "__injectTrussCSS", localName: "__injectTrussCSS" });
+  }
+  if (runtimeImports.length > 0) {
     upsertNamedImports(ast, "@homebound/truss/runtime", runtimeImports);
   }
-  const markerVarNames = collectReferencedMarkerNames(createEntries);
-  const hoistedMarkerDecls = hoistMarkerDeclarations(ast, markerVarNames);
   const declarationsToInsert = [];
   if (maybeIncHelperName) {
     declarationsToInsert.push(buildMaybeIncDeclaration(maybeIncHelperName, mapping.increment));
   }
-  declarationsToInsert.push(...hoistedMarkerDecls);
-  if (createProperties.length > 0) {
-    declarationsToInsert.push(buildCreateDeclaration(createVarName, stylexNamespaceName, createProperties));
-    for (const [lookupKey, lookup] of runtimeLookups) {
-      const lookupName = runtimeLookupNames.get(lookupKey);
-      if (!lookupName) continue;
-      declarationsToInsert.push(buildRuntimeLookupDeclaration(lookupName, createVarName, lookup));
-    }
+  for (const [lookupKey, lookup] of runtimeLookups) {
+    const lookupName = runtimeLookupNames.get(lookupKey);
+    if (!lookupName) continue;
+    declarationsToInsert.push(buildRuntimeLookupDeclaration(lookupName, lookup.segmentsByName, mapping));
+  }
+  if (options.injectCss && cssText.length > 0) {
+    declarationsToInsert.push(
+      t4.expressionStatement(t4.callExpression(t4.identifier("__injectTrussCSS"), [t4.stringLiteral(cssText)]))
+    );
   }
   for (const { message, line } of errorMessages) {
     const location = line !== null ? `${filename}:${line}` : filename;
     const logMessage = `${message} (${location})`;
-    const consoleError = t4.expressionStatement(
-      t4.callExpression(t4.memberExpression(t4.identifier("console"), t4.identifier("error")), [
-        t4.stringLiteral(logMessage)
-      ])
+    declarationsToInsert.push(
+      t4.expressionStatement(
+        t4.callExpression(t4.memberExpression(t4.identifier("console"), t4.identifier("error")), [
+          t4.stringLiteral(logMessage)
+        ])
+      )
     );
-    declarationsToInsert.push(consoleError);
   }
   if (declarationsToInsert.length > 0) {
     const insertIndex = ast.program.body.findIndex(function(node) {
@@ -2023,46 +1919,23 @@ function transformTruss(code, filename, mapping, options = {}) {
     sourceFileName: filename,
     retainLines: false
   });
-  return { code: output.code, map: output.map };
-}
-function collectReferencedMarkerNames(createEntries) {
-  const names = /* @__PURE__ */ new Set();
-  for (const [, entry] of createEntries) {
-    if (entry.whenPseudo?.markerNode && entry.whenPseudo.markerNode.type === "Identifier") {
-      names.add(entry.whenPseudo.markerNode.name);
-    }
-  }
-  return names;
+  return { code: output.code, map: output.map, css: cssText, rules };
 }
-function hoistMarkerDeclarations(ast, names) {
-  if (names.size === 0) return [];
-  const hoisted = [];
-  const remaining = new Set(names);
-  for (let i = ast.program.body.length - 1; i >= 0; i--) {
-    if (remaining.size === 0) break;
-    const node = ast.program.body[i];
-    if (!t4.isVariableDeclaration(node)) continue;
-    const matchingDeclarators = [];
-    const otherDeclarators = [];
-    for (const decl of node.declarations) {
-      if (t4.isIdentifier(decl.id) && remaining.has(decl.id.name)) {
-        matchingDeclarators.push(decl);
-        remaining.delete(decl.id.name);
-      } else {
-        otherDeclarators.push(decl);
+function collectRuntimeLookups(chains) {
+  const lookups = /* @__PURE__ */ new Map();
+  for (const chain of chains) {
+    for (const part of chain.parts) {
+      const segs = part.type === "unconditional" ? part.segments : [...part.thenSegments, ...part.elseSegments];
+      for (const seg of segs) {
+        if (seg.typographyLookup && !lookups.has(seg.typographyLookup.lookupKey)) {
+          lookups.set(seg.typographyLookup.lookupKey, {
+            segmentsByName: seg.typographyLookup.segmentsByName
+          });
+        }
       }
     }
-    if (matchingDeclarators.length === 0) continue;
-    if (otherDeclarators.length === 0) {
-      ast.program.body.splice(i, 1);
-      hoisted.push(node);
-    } else {
-      node.declarations = otherDeclarators;
-      hoisted.push(t4.variableDeclaration(node.kind, matchingDeclarators));
-    }
   }
-  hoisted.reverse();
-  return hoisted;
+  return lookups;
 }
 
 // src/plugin/transform-css.ts
@@ -2231,8 +2104,8 @@ function resolveCssExpression(node, cssBindingName, mapping, filename) {
       if (seg.error) {
         return { error: seg.error };
       }
-      if (seg.dynamicProps && !seg.argResolved) {
-        return { error: `dynamic value with variable argument is not supported in .css.ts files` };
+      if (seg.variableProps && !seg.argResolved) {
+        return { error: `variable value with variable argument is not supported in .css.ts files` };
       }
       if (seg.typographyLookup) {
         return { error: `typography() with a runtime key is not supported in .css.ts files` };
@@ -2254,7 +2127,7 @@ function resolveCssExpression(node, cssBindingName, mapping, filename) {
       }
       for (const [prop, value] of Object.entries(seg.defs)) {
         if (typeof value === "string" || typeof value === "number") {
-          declarations.push({ property: camelToKebab(prop), value: String(value) });
+          declarations.push({ property: camelToKebab2(prop), value: String(value) });
         } else {
           return { error: `unexpected nested value for property "${prop}"` };
         }
@@ -2263,7 +2136,7 @@ function resolveCssExpression(node, cssBindingName, mapping, filename) {
   }
   return { declarations };
 }
-function camelToKebab(s) {
+function camelToKebab2(s) {
   return s.replace(/^(Webkit|Moz|Ms|O)/, (m) => `-${m.toLowerCase()}`).replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 }
 function formatCssRule(selector, declarations) {
@@ -2331,11 +2204,19 @@ function toVirtualCssSpecifier(source) {
 // src/plugin/index.ts
 var VIRTUAL_CSS_PREFIX = "\0truss-css:";
 var CSS_TS_QUERY = "?truss-css";
+var VIRTUAL_CSS_ENDPOINT = "/virtual:truss.css";
+var VIRTUAL_RUNTIME_ID = "virtual:truss:runtime";
+var RESOLVED_VIRTUAL_RUNTIME_ID = "\0" + VIRTUAL_RUNTIME_ID;
 function trussPlugin(opts) {
   let mapping = null;
   let projectRoot;
   let debug = false;
+  let isTest = false;
+  let isBuild = false;
   const externalPackages = opts.externalPackages ?? [];
+  const cssRegistry = /* @__PURE__ */ new Map();
+  let cssVersion = 0;
+  let lastSentVersion = 0;
   function mappingPath() {
     return resolve(projectRoot || process.cwd(), opts.mapping);
   }
@@ -2345,23 +2226,98 @@ function trussPlugin(opts) {
     }
     return mapping;
   }
+  function collectCss() {
+    return generateCssText(cssRegistry);
+  }
   return {
-    name: "truss-stylex",
+    name: "truss",
     enforce: "pre",
     configResolved(config) {
       projectRoot = config.root;
       debug = config.command === "serve" || config.mode === "development" || config.mode === "test";
+      isTest = config.mode === "test";
+      isBuild = config.command === "build";
     },
     buildStart() {
       ensureMapping();
+      cssRegistry.clear();
+      cssVersion = 0;
+      lastSentVersion = 0;
+    },
+    // -- Dev mode HMR --
+    configureServer(server) {
+      if (isTest) return;
+      server.middlewares.use(function(req, res, next) {
+        if (req.url !== VIRTUAL_CSS_ENDPOINT) return next();
+        const css = collectCss();
+        res.setHeader("Content-Type", "text/css");
+        res.setHeader("Cache-Control", "no-store");
+        res.end(css);
+      });
+      const interval = setInterval(function() {
+        if (cssVersion !== lastSentVersion && server.ws) {
+          lastSentVersion = cssVersion;
+          server.ws.send({ type: "custom", event: "truss:css-update" });
+        }
+      }, 150);
+      server.httpServer?.on("close", function() {
+        clearInterval(interval);
+      });
+    },
+    transformIndexHtml(html) {
+      if (isBuild) return html;
+      const tags = [
+        `<link rel="stylesheet" href="${VIRTUAL_CSS_ENDPOINT}">`,
+        `<script type="module" src="/${VIRTUAL_RUNTIME_ID}"></script>`
+      ].join("\n    ");
+      return html.replace("</head>", `    ${tags}
+  </head>`);
+    },
+    handleHotUpdate(ctx) {
+      if (ctx.server?.ws) {
+        ctx.server.ws.send({ type: "custom", event: "truss:css-update" });
+      }
     },
+    // -- Virtual module resolution --
     resolveId(source, importer) {
+      if (source === VIRTUAL_RUNTIME_ID || source === "/" + VIRTUAL_RUNTIME_ID) {
+        return RESOLVED_VIRTUAL_RUNTIME_ID;
+      }
       if (!source.endsWith(CSS_TS_QUERY)) return null;
       const absolutePath = resolveImportPath(source.slice(0, -CSS_TS_QUERY.length), importer, projectRoot);
       if (!existsSync(absolutePath)) return null;
       return VIRTUAL_CSS_PREFIX + absolutePath.slice(0, -3);
     },
     load(id) {
+      if (id === RESOLVED_VIRTUAL_RUNTIME_ID) {
+        return `
+// Truss dev HMR runtime \u2014 keeps styles up to date without page reload
+(function() {
+  let style = document.getElementById("__truss_virtual__");
+  if (!style) {
+    style = document.createElement("style");
+    style.id = "__truss_virtual__";
+    document.head.appendChild(style);
+  }
+
+  function fetchCss() {
+    fetch("${VIRTUAL_CSS_ENDPOINT}")
+      .then(function(r) { return r.text(); })
+      .then(function(css) { style.textContent = css; })
+      .catch(function() {});
+  }
+
+  fetchCss();
+
+  if (import.meta.hot) {
+    import.meta.hot.on("truss:css-update", fetchCss);
+    import.meta.hot.on("vite:afterUpdate", function() {
+      setTimeout(fetchCss, 50);
+    });
+  }
+})();
+`;
+      }
       if (!id.startsWith(VIRTUAL_CSS_PREFIX)) return null;
       const sourcePath = id.slice(VIRTUAL_CSS_PREFIX.length) + ".ts";
       const sourceCode = readFileSync(sourcePath, "utf8");
@@ -2383,12 +2339,62 @@ function trussPlugin(opts) {
       if (!hasCssDsl) {
         return { code: rewrittenCode, map: null };
       }
-      const result = transformTruss(rewrittenCode, fileId, ensureMapping(), { debug });
+      const result = transformTruss(rewrittenCode, fileId, ensureMapping(), {
+        debug,
+        // In test mode (jsdom), inject CSS directly so document.styleSheets has rules
+        injectCss: isTest
+      });
       if (!result) {
         if (!rewrittenImports.changed) return null;
         return { code: rewrittenCode, map: null };
       }
+      if (result.rules) {
+        let hasNewRules = false;
+        for (const [className, rule] of result.rules) {
+          if (!cssRegistry.has(className)) {
+            cssRegistry.set(className, rule);
+            hasNewRules = true;
+          }
+        }
+        if (hasNewRules) {
+          cssVersion++;
+        }
+      }
       return { code: result.code, map: result.map };
+    },
+    // -- Production CSS emission --
+    generateBundle(_options, bundle) {
+      if (!isBuild) return;
+      const css = collectCss();
+      if (!css) return;
+      for (const key of Object.keys(bundle)) {
+        const asset = bundle[key];
+        if (asset.type === "asset" && key.endsWith(".css")) {
+          asset.source = asset.source + "\n" + css;
+          return;
+        }
+      }
+      this.emitFile({
+        type: "asset",
+        fileName: "truss.css",
+        source: css
+      });
+    },
+    writeBundle(options, bundle) {
+      if (!isBuild) return;
+      const css = collectCss();
+      if (!css) return;
+      const outDir = options.dir || join(projectRoot, "dist");
+      const trussPath = join(outDir, "truss.css");
+      if (!existsSync(trussPath)) {
+        const alreadyEmitted = Object.keys(bundle).some(function(key) {
+          const asset = bundle[key];
+          return asset.type === "asset" && key.endsWith(".css") && typeof asset.source === "string" && asset.source.includes(css);
+        });
+        if (!alreadyEmitted) {
+          writeFileSync(trussPath, css, "utf8");
+        }
+      }
     }
   };
 }