@homebound/truss 2.0.13 → 2.1.0-next.10

package/build/plugin/index.js

@@ -1,6 +1,989 @@
 // 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";
+
+// src/plugin/property-priorities.ts
+var longHandPhysical = /* @__PURE__ */ new Set();
+var longHandLogical = /* @__PURE__ */ new Set();
+var shorthandsOfLonghands = /* @__PURE__ */ new Set();
+var shorthandsOfShorthands = /* @__PURE__ */ new Set();
+longHandLogical.add("background-blend-mode");
+longHandLogical.add("isolation");
+longHandLogical.add("mix-blend-mode");
+shorthandsOfShorthands.add("animation");
+longHandLogical.add("animation-composition");
+longHandLogical.add("animation-delay");
+longHandLogical.add("animation-direction");
+longHandLogical.add("animation-duration");
+longHandLogical.add("animation-fill-mode");
+longHandLogical.add("animation-iteration-count");
+longHandLogical.add("animation-name");
+longHandLogical.add("animation-play-state");
+shorthandsOfLonghands.add("animation-range");
+longHandLogical.add("animation-range-end");
+longHandLogical.add("animation-range-start");
+longHandLogical.add("animation-timing-function");
+longHandLogical.add("animation-timeline");
+shorthandsOfLonghands.add("scroll-timeline");
+longHandLogical.add("scroll-timeline-axis");
+longHandLogical.add("scroll-timeline-name");
+longHandLogical.add("timeline-scope");
+shorthandsOfLonghands.add("view-timeline");
+longHandLogical.add("view-timeline-axis");
+longHandLogical.add("view-timeline-inset");
+longHandLogical.add("view-timeline-name");
+shorthandsOfShorthands.add("background");
+longHandLogical.add("background-attachment");
+longHandLogical.add("background-clip");
+longHandLogical.add("background-color");
+longHandLogical.add("background-image");
+longHandLogical.add("background-origin");
+longHandLogical.add("background-repeat");
+longHandLogical.add("background-size");
+shorthandsOfLonghands.add("background-position");
+longHandLogical.add("background-position-x");
+longHandLogical.add("background-position-y");
+shorthandsOfShorthands.add("border");
+shorthandsOfLonghands.add("border-color");
+shorthandsOfLonghands.add("border-style");
+shorthandsOfLonghands.add("border-width");
+shorthandsOfShorthands.add("border-block");
+longHandLogical.add("border-block-color");
+longHandLogical.add("border-block-stylex");
+longHandLogical.add("border-block-width");
+shorthandsOfLonghands.add("border-block-start");
+shorthandsOfLonghands.add("border-top");
+longHandLogical.add("border-block-start-color");
+longHandPhysical.add("border-top-color");
+longHandLogical.add("border-block-start-style");
+longHandPhysical.add("border-top-style");
+longHandLogical.add("border-block-start-width");
+longHandPhysical.add("border-top-width");
+shorthandsOfLonghands.add("border-block-end");
+shorthandsOfLonghands.add("border-bottom");
+longHandLogical.add("border-block-end-color");
+longHandPhysical.add("border-bottom-color");
+longHandLogical.add("border-block-end-style");
+longHandPhysical.add("border-bottom-style");
+longHandLogical.add("border-block-end-width");
+longHandPhysical.add("border-bottom-width");
+shorthandsOfShorthands.add("border-inline");
+shorthandsOfLonghands.add("border-inline-color");
+shorthandsOfLonghands.add("border-inline-style");
+shorthandsOfLonghands.add("border-inline-width");
+shorthandsOfLonghands.add("border-inline-start");
+shorthandsOfLonghands.add("border-left");
+longHandLogical.add("border-inline-start-color");
+longHandPhysical.add("border-left-color");
+longHandLogical.add("border-inline-start-style");
+longHandPhysical.add("border-left-style");
+longHandLogical.add("border-inline-start-width");
+longHandPhysical.add("border-left-width");
+shorthandsOfLonghands.add("border-inline-end");
+shorthandsOfLonghands.add("border-right");
+longHandLogical.add("border-inline-end-color");
+longHandPhysical.add("border-right-color");
+longHandLogical.add("border-inline-end-style");
+longHandPhysical.add("border-right-style");
+longHandLogical.add("border-inline-end-width");
+longHandPhysical.add("border-right-width");
+shorthandsOfLonghands.add("border-image");
+longHandLogical.add("border-image-outset");
+longHandLogical.add("border-image-repeat");
+longHandLogical.add("border-image-slice");
+longHandLogical.add("border-image-source");
+longHandLogical.add("border-image-width");
+shorthandsOfLonghands.add("border-radius");
+longHandLogical.add("border-start-end-radius");
+longHandLogical.add("border-start-start-radius");
+longHandLogical.add("border-end-end-radius");
+longHandLogical.add("border-end-start-radius");
+longHandPhysical.add("border-top-left-radius");
+longHandPhysical.add("border-top-right-radius");
+longHandPhysical.add("border-bottom-left-radius");
+longHandPhysical.add("border-bottom-right-radius");
+shorthandsOfLonghands.add("corner-shape");
+longHandLogical.add("corner-start-start-shape");
+longHandLogical.add("corner-start-end-shape");
+longHandLogical.add("corner-end-start-shape");
+longHandLogical.add("corner-end-end-shape");
+longHandPhysical.add("corner-top-left-shape");
+longHandPhysical.add("corner-top-right-shape");
+longHandPhysical.add("corner-bottom-left-shape");
+longHandPhysical.add("corner-bottom-right-shape");
+longHandLogical.add("box-shadow");
+longHandLogical.add("accent-color");
+longHandLogical.add("appearance");
+longHandLogical.add("aspect-ratio");
+shorthandsOfLonghands.add("caret");
+longHandLogical.add("caret-color");
+longHandLogical.add("caret-shape");
+longHandLogical.add("cursor");
+longHandLogical.add("ime-mode");
+longHandLogical.add("input-security");
+shorthandsOfLonghands.add("outline");
+longHandLogical.add("outline-color");
+longHandLogical.add("outline-offset");
+longHandLogical.add("outline-style");
+longHandLogical.add("outline-width");
+longHandLogical.add("pointer-events");
+longHandLogical.add("resize");
+longHandLogical.add("text-overflow");
+longHandLogical.add("user-select");
+shorthandsOfLonghands.add("grid-gap");
+shorthandsOfLonghands.add("gap");
+longHandLogical.add("grid-row-gap");
+longHandLogical.add("row-gap");
+longHandLogical.add("grid-column-gap");
+longHandLogical.add("column-gap");
+shorthandsOfLonghands.add("place-content");
+longHandLogical.add("align-content");
+longHandLogical.add("justify-content");
+shorthandsOfLonghands.add("place-items");
+longHandLogical.add("align-items");
+longHandLogical.add("justify-items");
+shorthandsOfLonghands.add("place-self");
+longHandLogical.add("align-self");
+longHandLogical.add("justify-self");
+longHandLogical.add("box-sizing");
+longHandLogical.add("block-size");
+longHandPhysical.add("height");
+longHandLogical.add("inline-size");
+longHandPhysical.add("width");
+longHandLogical.add("max-block-size");
+longHandPhysical.add("max-height");
+longHandLogical.add("max-inline-size");
+longHandPhysical.add("max-width");
+longHandLogical.add("min-block-size");
+longHandPhysical.add("min-height");
+longHandLogical.add("min-inline-size");
+longHandPhysical.add("min-width");
+shorthandsOfShorthands.add("margin");
+shorthandsOfLonghands.add("margin-block");
+longHandLogical.add("margin-block-start");
+longHandPhysical.add("margin-top");
+longHandLogical.add("margin-block-end");
+longHandPhysical.add("margin-bottom");
+shorthandsOfLonghands.add("margin-inline");
+longHandLogical.add("margin-inline-start");
+longHandPhysical.add("margin-left");
+longHandLogical.add("margin-inline-end");
+longHandPhysical.add("margin-right");
+longHandLogical.add("margin-trim");
+shorthandsOfLonghands.add("overscroll-behavior");
+longHandLogical.add("overscroll-behavior-block");
+longHandPhysical.add("overscroll-behavior-y");
+longHandLogical.add("overscroll-behavior-inline");
+longHandPhysical.add("overscroll-behavior-x");
+shorthandsOfShorthands.add("padding");
+shorthandsOfLonghands.add("padding-block");
+longHandLogical.add("padding-block-start");
+longHandPhysical.add("padding-top");
+longHandLogical.add("padding-block-end");
+longHandPhysical.add("padding-bottom");
+shorthandsOfLonghands.add("padding-inline");
+longHandLogical.add("padding-inline-start");
+longHandPhysical.add("padding-left");
+longHandLogical.add("padding-inline-end");
+longHandPhysical.add("padding-right");
+longHandLogical.add("visibility");
+longHandLogical.add("color");
+longHandLogical.add("color-scheme");
+longHandLogical.add("forced-color-adjust");
+longHandLogical.add("opacity");
+longHandLogical.add("print-color-adjust");
+shorthandsOfLonghands.add("columns");
+longHandLogical.add("column-count");
+longHandLogical.add("column-width");
+longHandLogical.add("column-fill");
+longHandLogical.add("column-span");
+shorthandsOfLonghands.add("column-rule");
+longHandLogical.add("column-rule-color");
+longHandLogical.add("column-rule-style");
+longHandLogical.add("column-rule-width");
+longHandLogical.add("contain");
+shorthandsOfLonghands.add("contain-intrinsic-size");
+longHandLogical.add("contain-intrinsic-block-size");
+longHandLogical.add("contain-intrinsic-width");
+longHandLogical.add("contain-intrinsic-height");
+longHandLogical.add("contain-intrinsic-inline-size");
+shorthandsOfLonghands.add("container");
+longHandLogical.add("container-name");
+longHandLogical.add("container-type");
+longHandLogical.add("content-visibility");
+longHandLogical.add("counter-increment");
+longHandLogical.add("counter-reset");
+longHandLogical.add("counter-set");
+longHandLogical.add("display");
+shorthandsOfLonghands.add("flex");
+longHandLogical.add("flex-basis");
+longHandLogical.add("flex-grow");
+longHandLogical.add("flex-shrink");
+shorthandsOfLonghands.add("flex-flow");
+longHandLogical.add("flex-direction");
+longHandLogical.add("flex-wrap");
+longHandLogical.add("order");
+shorthandsOfShorthands.add("font");
+longHandLogical.add("font-family");
+longHandLogical.add("font-size");
+longHandLogical.add("font-stretch");
+longHandLogical.add("font-style");
+longHandLogical.add("font-weight");
+longHandLogical.add("line-height");
+shorthandsOfLonghands.add("font-variant");
+longHandLogical.add("font-variant-alternates");
+longHandLogical.add("font-variant-caps");
+longHandLogical.add("font-variant-east-asian");
+longHandLogical.add("font-variant-emoji");
+longHandLogical.add("font-variant-ligatures");
+longHandLogical.add("font-variant-numeric");
+longHandLogical.add("font-variant-position");
+longHandLogical.add("font-feature-settings");
+longHandLogical.add("font-kerning");
+longHandLogical.add("font-language-override");
+longHandLogical.add("font-optical-sizing");
+longHandLogical.add("font-palette");
+longHandLogical.add("font-variation-settings");
+longHandLogical.add("font-size-adjust");
+longHandLogical.add("font-smooth");
+longHandLogical.add("font-synthesis-position");
+longHandLogical.add("font-synthesis-small-caps");
+longHandLogical.add("font-synthesis-style");
+longHandLogical.add("font-synthesis-weight");
+longHandLogical.add("line-height-step");
+longHandLogical.add("box-decoration-break");
+longHandLogical.add("break-after");
+longHandLogical.add("break-before");
+longHandLogical.add("break-inside");
+longHandLogical.add("orphans");
+longHandLogical.add("widows");
+longHandLogical.add("content");
+longHandLogical.add("quotes");
+shorthandsOfShorthands.add("grid");
+longHandLogical.add("grid-auto-flow");
+longHandLogical.add("grid-auto-rows");
+longHandLogical.add("grid-auto-columns");
+shorthandsOfShorthands.add("grid-template");
+shorthandsOfLonghands.add("grid-template-areas");
+longHandLogical.add("grid-template-columns");
+longHandLogical.add("grid-template-rows");
+shorthandsOfShorthands.add("grid-area");
+shorthandsOfLonghands.add("grid-row");
+longHandLogical.add("grid-row-start");
+longHandLogical.add("grid-row-end");
+shorthandsOfLonghands.add("grid-column");
+longHandLogical.add("grid-column-start");
+longHandLogical.add("grid-column-end");
+longHandLogical.add("align-tracks");
+longHandLogical.add("justify-tracks");
+longHandLogical.add("masonry-auto-flow");
+longHandLogical.add("image-orientation");
+longHandLogical.add("image-rendering");
+longHandLogical.add("image-resolution");
+longHandLogical.add("object-fit");
+longHandLogical.add("object-position");
+longHandLogical.add("initial-letter");
+longHandLogical.add("initial-letter-align");
+shorthandsOfLonghands.add("list-style");
+longHandLogical.add("list-style-image");
+longHandLogical.add("list-style-position");
+longHandLogical.add("list-style-type");
+longHandLogical.add("clip");
+longHandLogical.add("clip-path");
+shorthandsOfLonghands.add("mask");
+longHandLogical.add("mask-clip");
+longHandLogical.add("mask-composite");
+longHandLogical.add("mask-image");
+longHandLogical.add("mask-mode");
+longHandLogical.add("mask-origin");
+longHandLogical.add("mask-position");
+longHandLogical.add("mask-repeat");
+longHandLogical.add("mask-size");
+longHandLogical.add("mask-type");
+shorthandsOfLonghands.add("mask-border");
+longHandLogical.add("mask-border-mode");
+longHandLogical.add("mask-border-outset");
+longHandLogical.add("mask-border-repeat");
+longHandLogical.add("mask-border-slice");
+longHandLogical.add("mask-border-source");
+longHandLogical.add("mask-border-width");
+shorthandsOfShorthands.add("all");
+longHandLogical.add("text-rendering");
+shorthandsOfLonghands.add("offset");
+longHandLogical.add("offset-anchor");
+longHandLogical.add("offset-distance");
+longHandLogical.add("offset-path");
+longHandLogical.add("offset-position");
+longHandLogical.add("offset-rotate");
+longHandLogical.add("-webkit-box-orient");
+longHandLogical.add("-webkit-line-clamp");
+shorthandsOfLonghands.add("overflow");
+longHandLogical.add("overflow-block");
+longHandPhysical.add("overflow-y");
+longHandLogical.add("overflow-inline");
+longHandPhysical.add("overflow-x");
+longHandLogical.add("overflow-clip-margin");
+longHandLogical.add("scroll-gutter");
+longHandLogical.add("scroll-behavior");
+longHandLogical.add("page");
+longHandLogical.add("page-break-after");
+longHandLogical.add("page-break-before");
+longHandLogical.add("page-break-inside");
+shorthandsOfShorthands.add("inset");
+shorthandsOfLonghands.add("inset-block");
+longHandLogical.add("inset-block-start");
+longHandPhysical.add("top");
+longHandLogical.add("inset-block-end");
+longHandPhysical.add("bottom");
+shorthandsOfLonghands.add("inset-inline");
+longHandLogical.add("inset-inline-start");
+longHandPhysical.add("left");
+longHandLogical.add("inset-inline-end");
+longHandPhysical.add("right");
+longHandLogical.add("clear");
+longHandLogical.add("float");
+longHandLogical.add("position");
+longHandLogical.add("z-index");
+longHandLogical.add("ruby-align");
+longHandLogical.add("ruby-merge");
+longHandLogical.add("ruby-position");
+longHandLogical.add("overflow-anchor");
+shorthandsOfShorthands.add("scroll-margin");
+shorthandsOfLonghands.add("scroll-margin-block");
+longHandLogical.add("scroll-margin-block-start");
+longHandPhysical.add("scroll-margin-top");
+longHandLogical.add("scroll-margin-block-end");
+longHandPhysical.add("scroll-margin-bottom");
+shorthandsOfLonghands.add("scroll-margin-inline");
+longHandLogical.add("scroll-margin-inline-start");
+longHandPhysical.add("scroll-margin-left");
+longHandLogical.add("scroll-margin-inline-end");
+longHandPhysical.add("scroll-margin-right");
+shorthandsOfShorthands.add("scroll-padding");
+shorthandsOfLonghands.add("scroll-padding-block");
+longHandLogical.add("scroll-padding-block-start");
+longHandPhysical.add("scroll-padding-top");
+longHandLogical.add("scroll-padding-block-end");
+longHandPhysical.add("scroll-padding-bottom");
+shorthandsOfLonghands.add("scroll-padding-inline");
+longHandLogical.add("scroll-padding-inline-start");
+longHandPhysical.add("scroll-padding-left");
+longHandLogical.add("scroll-padding-inline-end");
+longHandPhysical.add("scroll-padding-right");
+longHandLogical.add("scroll-snap-align");
+longHandLogical.add("scroll-snap-stop");
+shorthandsOfLonghands.add("scroll-snap-type");
+longHandLogical.add("scrollbar-color");
+longHandLogical.add("scrollbar-width");
+longHandLogical.add("shape-image-threshold");
+longHandLogical.add("shape-margin");
+longHandLogical.add("shape-outside");
+longHandLogical.add("azimuth");
+longHandLogical.add("border-collapse");
+longHandLogical.add("border-spacing");
+longHandLogical.add("caption-side");
+longHandLogical.add("empty-cells");
+longHandLogical.add("table-layout");
+longHandLogical.add("vertical-align");
+shorthandsOfLonghands.add("text-decoration");
+longHandLogical.add("text-decoration-color");
+longHandLogical.add("text-decoration-line");
+longHandLogical.add("text-decoration-skip");
+longHandLogical.add("text-decoration-skip-ink");
+longHandLogical.add("text-decoration-style");
+longHandLogical.add("text-decoration-thickness");
+shorthandsOfLonghands.add("text-emphasis");
+longHandLogical.add("text-emphasis-color");
+longHandLogical.add("text-emphasis-position");
+longHandLogical.add("text-emphasis-style");
+longHandLogical.add("text-shadow");
+longHandLogical.add("text-underline-offset");
+longHandLogical.add("text-underline-position");
+longHandLogical.add("hanging-punctuation");
+longHandLogical.add("hyphenate-character");
+longHandLogical.add("hyphenate-limit-chars");
+longHandLogical.add("hyphens");
+longHandLogical.add("letter-spacing");
+longHandLogical.add("line-break");
+longHandLogical.add("overflow-wrap");
+longHandLogical.add("paint-order");
+longHandLogical.add("tab-size");
+longHandLogical.add("text-align");
+longHandLogical.add("text-align-last");
+longHandLogical.add("text-indent");
+longHandLogical.add("text-justify");
+longHandLogical.add("text-size-adjust");
+longHandLogical.add("text-transform");
+longHandLogical.add("text-wrap");
+longHandLogical.add("white-space");
+longHandLogical.add("white-space-collapse");
+longHandLogical.add("word-break");
+longHandLogical.add("word-spacing");
+longHandLogical.add("word-wrap");
+longHandLogical.add("backface-visibility");
+longHandLogical.add("perspective");
+longHandLogical.add("perspective-origin");
+longHandLogical.add("rotate");
+longHandLogical.add("scale");
+longHandLogical.add("transform");
+longHandLogical.add("transform-box");
+longHandLogical.add("transform-origin");
+longHandLogical.add("transform-style");
+longHandLogical.add("translate");
+shorthandsOfLonghands.add("transition");
+longHandLogical.add("transition-delay");
+longHandLogical.add("transition-duration");
+longHandLogical.add("transition-property");
+longHandLogical.add("transition-timing-function");
+longHandLogical.add("view-transition-name");
+longHandLogical.add("will-change");
+longHandLogical.add("direction");
+longHandLogical.add("text-combine-upright");
+longHandLogical.add("text-orientation");
+longHandLogical.add("unicode-bidi");
+longHandLogical.add("writing-mode");
+longHandLogical.add("backdrop-filter");
+longHandLogical.add("filter");
+longHandLogical.add("math-depth");
+longHandLogical.add("math-shift");
+longHandLogical.add("math-style");
+longHandLogical.add("touch-action");
+var PSEUDO_CLASS_PRIORITIES = {
+  ":is": 40,
+  ":where": 40,
+  ":not": 40,
+  ":has": 45,
+  ":dir": 50,
+  ":lang": 51,
+  ":first-child": 52,
+  ":first-of-type": 53,
+  ":last-child": 54,
+  ":last-of-type": 55,
+  ":only-child": 56,
+  ":only-of-type": 57,
+  ":nth-child": 60,
+  ":nth-last-child": 61,
+  ":nth-of-type": 62,
+  ":nth-last-of-type": 63,
+  ":empty": 70,
+  ":link": 80,
+  ":any-link": 81,
+  ":local-link": 82,
+  ":target-within": 83,
+  ":target": 84,
+  ":visited": 85,
+  ":enabled": 91,
+  ":disabled": 92,
+  ":required": 93,
+  ":optional": 94,
+  ":read-only": 95,
+  ":read-write": 96,
+  ":placeholder-shown": 97,
+  ":in-range": 98,
+  ":out-of-range": 99,
+  ":default": 100,
+  ":checked": 101,
+  ":indeterminate": 101,
+  ":blank": 102,
+  ":valid": 103,
+  ":invalid": 104,
+  ":user-invalid": 105,
+  ":autofill": 110,
+  ":picture-in-picture": 120,
+  ":modal": 121,
+  ":fullscreen": 122,
+  ":paused": 123,
+  ":playing": 124,
+  ":current": 125,
+  ":past": 126,
+  ":future": 127,
+  ":hover": 130,
+  ":focusWithin": 140,
+  ":focus": 150,
+  ":focusVisible": 160,
+  ":active": 170
+};
+var AT_RULE_PRIORITIES = {
+  "@supports": 30,
+  "@media": 200,
+  "@container": 300
+};
+var PSEUDO_ELEMENT_PRIORITY = 5e3;
+function getPropertyPriority(property) {
+  if (shorthandsOfShorthands.has(property)) return 1e3;
+  if (shorthandsOfLonghands.has(property)) return 2e3;
+  if (longHandLogical.has(property)) return 3e3;
+  if (longHandPhysical.has(property)) return 4e3;
+  return 3e3;
+}
+function getPseudoClassPriority(pseudo) {
+  const base = pseudo.split("(")[0];
+  return PSEUDO_CLASS_PRIORITIES[base] ?? 40;
+}
+function getAtRulePriority(atRule) {
+  if (atRule.startsWith("--")) return 1;
+  if (atRule.startsWith("@supports")) return AT_RULE_PRIORITIES["@supports"];
+  if (atRule.startsWith("@media")) return AT_RULE_PRIORITIES["@media"];
+  if (atRule.startsWith("@container")) return AT_RULE_PRIORITIES["@container"];
+  return 0;
+}
+
+// src/plugin/priority.ts
+var RELATIONSHIP_BASE = {
+  ancestor: 10,
+  descendant: 15,
+  anySibling: 20,
+  siblingBefore: 30,
+  siblingAfter: 40
+};
+function computeRulePriority(rule) {
+  let priority = getPropertyPriority(rule.cssProperty);
+  if (rule.pseudoElement) {
+    priority += PSEUDO_ELEMENT_PRIORITY;
+  }
+  if (rule.pseudoClass) {
+    priority += getPseudoClassPriority(rule.pseudoClass);
+  }
+  if (rule.mediaQuery) {
+    priority += getAtRulePriority(rule.mediaQuery);
+  }
+  if (rule.whenSelector) {
+    const relBase = RELATIONSHIP_BASE[rule.whenSelector.relationship] ?? 10;
+    const pseudoFraction = getPseudoClassPriority(rule.whenSelector.pseudo) / 100;
+    priority += relBase + pseudoFraction;
+  }
+  if (isVariableRule(rule)) {
+    priority += 0.5;
+  }
+  return priority;
+}
+function isVariableRule(rule) {
+  if (rule.declarations) {
+    return rule.declarations.some(function(d) {
+      return d.cssVarName !== void 0;
+    });
+  }
+  return rule.cssVarName !== void 0;
+}
+function sortRulesByPriority(rules) {
+  rules.sort(function(a, b) {
+    const diff = computeRulePriority(a) - computeRulePriority(b);
+    if (diff !== 0) return diff;
+    return a.className < b.className ? -1 : a.className > b.className ? 1 : 0;
+  });
+}
+
+// src/plugin/emit-truss.ts
+var PSEUDO_SUFFIX = {
+  ":hover": "_h",
+  ":focus": "_f",
+  ":focus-visible": "_fv",
+  ":active": "_a",
+  ":disabled": "_d"
+};
+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(/^(Webkit|Moz|Ms|O)/, (m) => `-${m.toLowerCase()}`).replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+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 abbr = seg.abbr;
+  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 `${abbr}_${valuePart}_${cssProp}`;
+    }
+    return `${abbr}_${valuePart}`;
+  }
+  if (isMultiProp) {
+    const lookup = getLonghandLookup(mapping);
+    const canonical = lookup.get(`${cssProp}\0${cssValue}`);
+    if (canonical) return canonical;
+    return `${abbr}_${cssProp}`;
+  }
+  return abbr;
+}
+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.incremented) needsMaybeInc = true;
+        if (seg.variableProps) {
+          collectVariableRules(rules, seg, mapping);
+        } else {
+          collectStaticRules(rules, seg, mapping);
+        }
+      }
+    }
+  }
+  return { rules, needsMaybeInc };
+}
+function segmentContext(seg, mapping) {
+  if (seg.whenPseudo) {
+    const wp = seg.whenPseudo;
+    return {
+      prefix: whenPrefix(wp),
+      whenSelector: {
+        relationship: wp.relationship ?? "ancestor",
+        markerClass: markerClassName(wp.markerNode),
+        pseudo: wp.pseudo
+      }
+    };
+  }
+  return { prefix: conditionPrefix(seg.pseudoClass, seg.mediaQuery, seg.pseudoElement, mapping.breakpoints) };
+}
+function baseRuleFields(seg) {
+  return {
+    pseudoClass: seg.pseudoClass ?? void 0,
+    mediaQuery: seg.mediaQuery ?? void 0,
+    pseudoElement: seg.pseudoElement ?? void 0
+  };
+}
+function collectStaticRules(rules, seg, mapping) {
+  const { prefix, whenSelector } = segmentContext(seg, mapping);
+  const isMultiProp = Object.keys(seg.defs).length > 1;
+  for (const [cssProp, value] of Object.entries(seg.defs)) {
+    const cssValue = String(value);
+    const baseName = computeStaticBaseName(seg, cssProp, cssValue, isMultiProp, mapping);
+    const className = prefix ? `${prefix}${baseName}` : baseName;
+    if (!rules.has(className)) {
+      rules.set(className, {
+        className,
+        cssProperty: camelToKebab(cssProp),
+        cssValue,
+        ...!whenSelector && baseRuleFields(seg),
+        whenSelector
+      });
+    }
+  }
+}
+function collectVariableRules(rules, seg, mapping) {
+  const { prefix, whenSelector } = segmentContext(seg, mapping);
+  for (const prop of seg.variableProps) {
+    const className = prefix ? `${prefix}${seg.abbr}_var` : `${seg.abbr}_var`;
+    const varName = toCssVariableName(className, seg.abbr, prop);
+    const declaration = { cssProperty: camelToKebab(prop), cssValue: `var(${varName})`, cssVarName: varName };
+    const existingRule = rules.get(className);
+    if (!existingRule) {
+      rules.set(className, {
+        className,
+        cssProperty: declaration.cssProperty,
+        cssValue: declaration.cssValue,
+        declarations: [declaration],
+        cssVarName: varName,
+        ...!whenSelector && baseRuleFields(seg),
+        whenSelector
+      });
+      continue;
+    }
+    existingRule.declarations ??= [
+      {
+        cssProperty: existingRule.cssProperty,
+        cssValue: existingRule.cssValue,
+        cssVarName: existingRule.cssVarName
+      }
+    ];
+    if (!existingRule.declarations.some(function(entry) {
+      return entry.cssProperty === declaration.cssProperty;
+    })) {
+      existingRule.declarations.push(declaration);
+    }
+  }
+  if (seg.variableExtraDefs) {
+    for (const [cssProp, value] of Object.entries(seg.variableExtraDefs)) {
+      const extraBase = `${seg.abbr}_${cssProp}`;
+      const extraName = prefix ? `${prefix}${extraBase}` : extraBase;
+      if (!rules.has(extraName)) {
+        rules.set(extraName, {
+          className: extraName,
+          cssProperty: camelToKebab(cssProp),
+          cssValue: String(value),
+          ...!whenSelector && baseRuleFields(seg),
+          whenSelector
+        });
+      }
+    }
+  }
+}
+function generateCssText(rules) {
+  const allRules = Array.from(rules.values());
+  sortRulesByPriority(allRules);
+  const lines = [];
+  for (const rule of allRules) {
+    lines.push(formatRule(rule));
+  }
+  for (const rule of allRules) {
+    for (const declaration of getRuleDeclarations(rule)) {
+      if (declaration.cssVarName) {
+        lines.push(`@property ${declaration.cssVarName} {
+  syntax: "*";
+  inherits: false;
+}`);
+      }
+    }
+  }
+  return lines.join("\n");
+}
+function formatRule(rule) {
+  if (rule.whenSelector) return formatWhenRule(rule);
+  if (rule.mediaQuery && rule.pseudoClass) return formatMediaPseudoRule(rule);
+  if (rule.mediaQuery && rule.pseudoElement) return formatMediaPseudoElementRule(rule);
+  if (rule.mediaQuery) return formatMediaRule(rule);
+  if (rule.pseudoClass && rule.pseudoElement) return formatPseudoRule(rule);
+  if (rule.pseudoElement) return formatPseudoElementRule(rule);
+  if (rule.pseudoClass) return formatPseudoRule(rule);
+  return formatBaseRule(rule);
+}
+function formatBaseRule(rule) {
+  return formatRuleBlock(`.${rule.className}`, rule);
+}
+function formatPseudoRule(rule) {
+  const pe = rule.pseudoElement ? rule.pseudoElement : "";
+  return formatRuleBlock(`.${rule.className}${rule.pseudoClass}${pe}`, rule);
+}
+function formatPseudoElementRule(rule) {
+  return formatRuleBlock(`.${rule.className}${rule.pseudoElement}`, rule);
+}
+function formatWhenRule(rule) {
+  const whenSelector = rule.whenSelector;
+  if (!whenSelector) {
+    return formatBaseRule(rule);
+  }
+  const markerSelector = `.${whenSelector.markerClass}${whenSelector.pseudo}`;
+  const targetSelector = `.${rule.className}`;
+  if (whenSelector.relationship === "ancestor") {
+    return formatRuleBlock(`${markerSelector} ${targetSelector}`, rule);
+  }
+  if (whenSelector.relationship === "descendant") {
+    return formatRuleBlock(`${targetSelector}:has(${markerSelector})`, rule);
+  }
+  if (whenSelector.relationship === "siblingAfter") {
+    return formatRuleBlock(`${targetSelector}:has(~ ${markerSelector})`, rule);
+  }
+  if (whenSelector.relationship === "siblingBefore") {
+    return formatRuleBlock(`${markerSelector} ~ ${targetSelector}`, rule);
+  }
+  if (whenSelector.relationship === "anySibling") {
+    return formatRuleBlock(`${targetSelector}:has(~ ${markerSelector}), ${markerSelector} ~ ${targetSelector}`, rule);
+  }
+  return formatRuleBlock(`${markerSelector} ${targetSelector}`, rule);
+}
+function formatMediaRule(rule) {
+  return formatNestedRuleBlock(rule.mediaQuery, `.${rule.className}.${rule.className}`, rule);
+}
+function formatMediaPseudoRule(rule) {
+  return formatNestedRuleBlock(rule.mediaQuery, `.${rule.className}.${rule.className}${rule.pseudoClass}`, rule);
+}
+function formatMediaPseudoElementRule(rule) {
+  const pe = rule.pseudoElement ?? "";
+  return formatNestedRuleBlock(rule.mediaQuery, `.${rule.className}.${rule.className}${pe}`, rule);
+}
+function getRuleDeclarations(rule) {
+  return rule.declarations ?? [{ cssProperty: rule.cssProperty, cssValue: rule.cssValue, cssVarName: rule.cssVarName }];
+}
+function formatRuleBlock(selector, rule) {
+  const body = getRuleDeclarations(rule).map(function(declaration) {
+    return `  ${declaration.cssProperty}: ${declaration.cssValue};`;
+  }).join("\n");
+  return `${selector} {
+${body}
+}`;
+}
+function formatNestedRuleBlock(wrapper, selector, rule) {
+  const body = getRuleDeclarations(rule).map(function(declaration) {
+    return `    ${declaration.cssProperty}: ${declaration.cssValue};`;
+  }).join("\n");
+  return `${wrapper} {
+  ${selector} {
+${body}
+  }
+}`;
+}
+function buildStyleHashProperties(segments, mapping, maybeIncHelperName) {
+  const propGroups = /* @__PURE__ */ new Map();
+  for (const seg of segments) {
+    if (seg.error || seg.styleArrayArg || seg.typographyLookup) continue;
+    const { prefix } = segmentContext(seg, mapping);
+    if (seg.variableProps) {
+      for (const prop of seg.variableProps) {
+        const className = prefix ? `${prefix}${seg.abbr}_var` : `${seg.abbr}_var`;
+        const varName = toCssVariableName(className, seg.abbr, 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 = `${seg.abbr}_${cssProp}`;
+          const extraName = prefix ? `${prefix}${extraBase}` : extraBase;
+          if (!propGroups.has(cssProp)) propGroups.set(cssProp, []);
+          propGroups.get(cssProp).push({ className: extraName, isVariable: false });
+        }
+      }
+    } else {
+      const isMultiProp = Object.keys(seg.defs).length > 1;
+      for (const [cssProp, val] of Object.entries(seg.defs)) {
+        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 cp = className.endsWith(baseClassName) ? className.slice(0, -baseClassName.length) : "";
+  return `--${cp}${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";
@@ -33,6 +1016,23 @@ function resolveFullChain(chain, mapping) {
   let currentNodes = [];
   while (i < filteredChain.length) {
     const node = filteredChain[i];
+    const mediaStart = getMediaConditionalStartNode(node, mapping);
+    if (mediaStart) {
+      const elseIndex = findElseIndex(filteredChain, i + 1);
+      if (elseIndex !== -1) {
+        if (currentNodes.length > 0) {
+          parts.push({ type: "unconditional", segments: resolveChain(currentNodes, mapping) });
+          currentNodes = [];
+        }
+        const thenNodes = mediaStart.thenNodes ? [...mediaStart.thenNodes, ...filteredChain.slice(i + 1, elseIndex)] : filteredChain.slice(i, elseIndex);
+        const elseNodes = [makeMediaQueryNode(mediaStart.inverseMediaQuery), ...filteredChain.slice(elseIndex + 1)];
+        const thenSegs = resolveChain(thenNodes, mapping);
+        const elseSegs = resolveChain(elseNodes, mapping);
+        parts.push({ type: "unconditional", segments: [...thenSegs, ...elseSegs] });
+        i = filteredChain.length;
+        break;
+      }
+    }
     if (node.type === "if") {
       if (node.conditionNode.type === "StringLiteral") {
         const mediaQuery = node.conditionNode.value;
@@ -41,10 +1041,7 @@ function resolveFullChain(chain, mapping) {
         continue;
       }
       if (currentNodes.length > 0) {
-        parts.push({
-          type: "unconditional",
-          segments: mergeOverlappingConditions(resolveChain(currentNodes, mapping))
-        });
+        parts.push({ type: "unconditional", segments: resolveChain(currentNodes, mapping) });
         currentNodes = [];
       }
       const thenNodes = [];
@@ -67,11 +1064,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: thenSegs,
+        elseSegments: elseSegs
       });
     } else {
       currentNodes.push(node);
@@ -79,7 +1078,7 @@ function resolveFullChain(chain, mapping) {
     }
   }
   if (currentNodes.length > 0) {
-    parts.push({ type: "unconditional", segments: mergeOverlappingConditions(resolveChain(currentNodes, mapping)) });
+    parts.push({ type: "unconditional", segments: resolveChain(currentNodes, mapping) });
   }
   const segmentErrors = [];
   for (const part of parts) {
@@ -92,6 +1091,53 @@ function resolveFullChain(chain, mapping) {
   }
   return { parts, markers, errors: [...scanErrors, ...segmentErrors] };
 }
+function getMediaConditionalStartNode(node, mapping) {
+  if (node.type === "if" && node.conditionNode.type === "StringLiteral") {
+    return {
+      inverseMediaQuery: invertMediaQuery(node.conditionNode.value),
+      thenNodes: [makeMediaQueryNode(node.conditionNode.value)]
+    };
+  }
+  if (node.type === "getter" && mapping.breakpoints && node.name in mapping.breakpoints) {
+    return { inverseMediaQuery: invertMediaQuery(mapping.breakpoints[node.name]) };
+  }
+  return null;
+}
+function findElseIndex(chain, start) {
+  for (let i = start; i < chain.length; i++) {
+    if (chain[i].type === "if") {
+      return -1;
+    }
+    if (chain[i].type === "else") {
+      return i;
+    }
+  }
+  return -1;
+}
+function makeMediaQueryNode(mediaQuery) {
+  return { type: "__mediaQuery", mediaQuery };
+}
+function invertMediaQuery(query) {
+  const screenPrefix = "@media screen and ";
+  if (query.startsWith(screenPrefix)) {
+    const conditions = query.slice(screenPrefix.length).trim();
+    const rangeMatch = conditions.match(/^\(min-width: (\d+)px\) and \(max-width: (\d+)px\)$/);
+    if (rangeMatch) {
+      const min = Number(rangeMatch[1]);
+      const max = Number(rangeMatch[2]);
+      return `@media screen and (max-width: ${min - 1}px), screen and (min-width: ${max + 1}px)`;
+    }
+    const minMatch = conditions.match(/^\(min-width: (\d+)px\)$/);
+    if (minMatch) {
+      return `@media screen and (max-width: ${Number(minMatch[1]) - 1}px)`;
+    }
+    const maxMatch = conditions.match(/^\(max-width: (\d+)px\)$/);
+    if (maxMatch) {
+      return `@media screen and (min-width: ${Number(maxMatch[1]) + 1}px)`;
+    }
+  }
+  return query.replace("@media", "@media not");
+}
 function resolveChain(chain, mapping) {
   const segments = [];
   let currentMediaQuery = null;
@@ -139,7 +1185,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 +1237,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 +1257,8 @@ function resolveChain(chain, mapping) {
             mapping,
             currentMediaQuery,
             currentPseudoClass,
-            currentPseudoElement
+            currentPseudoElement,
+            currentWhenPseudo
           );
           segments.push(seg);
         } else {
@@ -212,7 +1267,7 @@ function resolveChain(chain, mapping) {
       }
     } catch (err) {
       if (err instanceof UnsupportedPatternError) {
-        segments.push({ key: "__error", defs: {}, error: err.message });
+        segments.push({ abbr: "__error", defs: {}, error: err.message });
       } else {
         throw err;
       }
@@ -220,11 +1275,16 @@ function resolveChain(chain, mapping) {
   }
   return segments;
 }
-function conditionKeySuffix(mediaQuery, pseudoClass, pseudoElement, breakpoints) {
+function typographyLookupKeySuffix(mediaQuery, pseudoClass, pseudoElement, breakpoints) {
   const parts = [];
-  if (pseudoElement) parts.push(pseudoName(pseudoElement));
-  if (mediaQuery) parts.push(pseudoName(mediaQuery, breakpoints));
-  if (pseudoClass) parts.push(pseudoName(pseudoClass));
+  if (pseudoElement) parts.push(pseudoElement.replace(/^::/, ""));
+  if (mediaQuery && breakpoints) {
+    const bp = Object.entries(breakpoints).find(([, v]) => v === mediaQuery)?.[0];
+    parts.push(bp ? bp.replace(/^if/, "").replace(/^./, (c) => c.toLowerCase()) : "mq");
+  } else if (mediaQuery) {
+    parts.push("mq");
+  }
+  if (pseudoClass) parts.push(pseudoClass.replace(/^:+/, "").replace(/-/g, "_"));
   return parts.join("_");
 }
 function resolveTypographyCall(node, mapping, mediaQuery, pseudoClass, pseudoElement) {
@@ -239,7 +1299,7 @@ function resolveTypographyCall(node, mapping, mediaQuery, pseudoClass, pseudoEle
   if (typography.length === 0) {
     throw new UnsupportedPatternError(`typography() is unavailable because no typography abbreviations were generated`);
   }
-  const suffix = conditionKeySuffix(mediaQuery, pseudoClass, pseudoElement, mapping.breakpoints);
+  const suffix = typographyLookupKeySuffix(mediaQuery, pseudoClass, pseudoElement, mapping.breakpoints);
   const lookupKey = suffix ? `typography__${suffix}` : "typography";
   const segmentsByName = {};
   for (const name of typography) {
@@ -247,7 +1307,7 @@ function resolveTypographyCall(node, mapping, mediaQuery, pseudoClass, pseudoEle
   }
   return [
     {
-      key: lookupKey,
+      abbr: lookupKey,
       defs: {},
       typographyLookup: {
         lookupKey,
@@ -267,38 +1327,19 @@ 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`);
     }
   }
   return resolved;
 }
-function wrapDefsWithConditions(defs, mediaQuery, pseudoClass) {
-  if (!mediaQuery && !pseudoClass) return defs;
-  const result = {};
-  for (const [prop, value] of Object.entries(defs)) {
-    if (pseudoClass && mediaQuery) {
-      result[prop] = { default: null, [pseudoClass]: { default: null, [mediaQuery]: value } };
-    } else if (pseudoClass) {
-      result[prop] = { default: null, [pseudoClass]: value };
-    } else {
-      result[prop] = { default: null, [mediaQuery]: value };
-    }
-  }
-  return result;
-}
 function resolveEntry(abbr, entry, mapping, mediaQuery, pseudoClass, pseudoElement, whenPseudo) {
   switch (entry.kind) {
     case "static": {
       if (whenPseudo) {
-        const suffix2 = whenPseudoKeyName(whenPseudo);
-        const key2 = `${abbr}__${suffix2}`;
-        return [{ key: key2, defs: entry.defs, whenPseudo }];
+        return [{ abbr, defs: entry.defs, whenPseudo }];
       }
-      const suffix = conditionKeySuffix(mediaQuery, pseudoClass, pseudoElement, mapping.breakpoints);
-      const key = suffix ? `${abbr}__${suffix}` : abbr;
-      const defs = pseudoElement ? { [pseudoElement]: wrapDefsWithConditions(entry.defs, mediaQuery, pseudoClass) } : wrapDefsWithConditions(entry.defs, mediaQuery, pseudoClass);
-      return [{ key, defs, mediaQuery, pseudoClass, pseudoElement }];
+      return [{ abbr, defs: entry.defs, mediaQuery, pseudoClass, pseudoElement }];
     }
     case "alias": {
       const result = [];
@@ -311,100 +1352,93 @@ 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);
-  const suffix = conditionKeySuffix(mediaQuery, pseudoClass, pseudoElement, mapping.breakpoints);
-  if (literalValue !== null) {
-    const keySuffix = literalValue.replace(/[^a-zA-Z0-9]/g, "_");
-    const key = suffix ? `${abbr}__${keySuffix}__${suffix}` : `${abbr}__${keySuffix}`;
-    const defs = {};
-    for (const prop of entry.props) {
-      defs[prop] = literalValue;
-    }
-    if (entry.extraDefs) {
-      Object.assign(defs, entry.extraDefs);
-    }
-    const wrappedDefs = wrapDefsWithConditions(defs, mediaQuery, pseudoClass);
-    return {
-      key,
-      defs: pseudoElement ? { [pseudoElement]: wrappedDefs } : wrappedDefs,
-      mediaQuery,
-      pseudoClass,
-      pseudoElement,
-      argResolved: literalValue
-    };
-  } else {
-    const key = suffix ? `${abbr}__${suffix}` : abbr;
-    return {
-      key,
-      defs: {},
-      mediaQuery,
-      pseudoClass,
-      dynamicProps: entry.props,
-      incremented: entry.incremented,
-      dynamicExtraDefs: entry.extraDefs,
-      argNode: argAst
-    };
-  }
+  const literalValue = tryEvaluateLiteral(node.args[0], entry.incremented, mapping.increment);
+  return buildParameterizedSegment({
+    abbr,
+    props: entry.props,
+    incremented: entry.incremented,
+    extraDefs: entry.extraDefs,
+    argAst: node.args[0],
+    literalValue,
+    mediaQuery,
+    pseudoClass,
+    pseudoElement,
+    whenPseudo
+  });
 }
-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);
-  const suffix = conditionKeySuffix(mediaQuery, pseudoClass, pseudoElement, mapping.breakpoints);
+  const literalValue = tryEvaluatePxLiteral(node.args[0]);
+  return buildParameterizedSegment({
+    abbr: entry.target,
+    props: targetEntry.props,
+    incremented: false,
+    appendPx: true,
+    extraDefs: targetEntry.extraDefs,
+    argAst: node.args[0],
+    literalValue,
+    mediaQuery,
+    pseudoClass,
+    pseudoElement,
+    whenPseudo
+  });
+}
+function buildParameterizedSegment(params) {
+  const { abbr, props, incremented, appendPx, extraDefs, argAst, literalValue, whenPseudo } = params;
   if (literalValue !== null) {
-    const keySuffix = literalValue.replace(/[^a-zA-Z0-9]/g, "_");
-    const key = suffix ? `${entry.target}__${keySuffix}__${suffix}` : `${entry.target}__${keySuffix}`;
     const defs = {};
-    for (const prop of targetEntry.props) {
+    for (const prop of props) {
       defs[prop] = literalValue;
     }
-    if (targetEntry.extraDefs) {
-      Object.assign(defs, targetEntry.extraDefs);
+    if (extraDefs) Object.assign(defs, extraDefs);
+    if (whenPseudo) {
+      return { abbr, defs, whenPseudo, argResolved: literalValue };
     }
-    const wrappedDefs = wrapDefsWithConditions(defs, mediaQuery, pseudoClass);
     return {
-      key,
-      defs: pseudoElement ? { [pseudoElement]: wrappedDefs } : wrappedDefs,
-      mediaQuery,
-      pseudoClass,
-      pseudoElement,
+      abbr,
+      defs,
+      mediaQuery: params.mediaQuery,
+      pseudoClass: params.pseudoClass,
+      pseudoElement: params.pseudoElement,
       argResolved: literalValue
     };
+  }
+  const base = {
+    abbr,
+    defs: {},
+    variableProps: props,
+    incremented,
+    variableExtraDefs: extraDefs,
+    argNode: argAst
+  };
+  if (appendPx) base.appendPx = true;
+  if (whenPseudo) {
+    base.whenPseudo = whenPseudo;
   } else {
-    const key = suffix ? `${entry.target}__${suffix}` : entry.target;
-    return {
-      key,
-      defs: {},
-      mediaQuery,
-      pseudoClass,
-      pseudoElement,
-      dynamicProps: targetEntry.props,
-      incremented: false,
-      appendPx: true,
-      dynamicExtraDefs: targetEntry.extraDefs,
-      argNode: argAst
-    };
+    base.mediaQuery = params.mediaQuery;
+    base.pseudoClass = params.pseudoClass;
+    base.pseudoElement = params.pseudoElement;
   }
+  return base;
 }
-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") {
@@ -416,7 +1450,7 @@ function resolveAddCall(node, mapping, mediaQuery, pseudoClass, pseudoElement) {
       );
     }
     return {
-      key: "__composed_css_prop",
+      abbr: "__composed_css_prop",
       defs: {},
       styleArrayArg: styleArg
     };
@@ -433,29 +1467,30 @@ function resolveAddCall(node, mapping, mediaQuery, pseudoClass, pseudoElement) {
   const propName = propArg.value;
   const valueArg = node.args[1];
   const literalValue = tryEvaluateAddLiteral(valueArg);
-  const suffix = conditionKeySuffix(mediaQuery, pseudoClass, pseudoElement, mapping.breakpoints);
+  if (whenPseudo) {
+    if (literalValue !== null) {
+      return { abbr: propName, defs: { [propName]: literalValue }, whenPseudo, argResolved: literalValue };
+    } else {
+      return { abbr: propName, defs: {}, whenPseudo, variableProps: [propName], incremented: false, argNode: valueArg };
+    }
+  }
   if (literalValue !== null) {
-    const keySuffix = literalValue.replace(/[^a-zA-Z0-9]/g, "_").replace(/_+/g, "_").replace(/^_|_$/g, "");
-    const key = suffix ? `add_${propName}__${keySuffix}__${suffix}` : `add_${propName}__${keySuffix}`;
-    const defs = { [propName]: literalValue };
-    const wrappedDefs = wrapDefsWithConditions(defs, mediaQuery, pseudoClass);
     return {
-      key,
-      defs: pseudoElement ? { [pseudoElement]: wrappedDefs } : wrappedDefs,
+      abbr: propName,
+      defs: { [propName]: literalValue },
       mediaQuery,
       pseudoClass,
       pseudoElement,
       argResolved: literalValue
     };
   } else {
-    const key = suffix ? `add_${propName}__${suffix}` : `add_${propName}`;
     return {
-      key,
+      abbr: propName,
       defs: {},
       mediaQuery,
       pseudoClass,
       pseudoElement,
-      dynamicProps: [propName],
+      variableProps: [propName],
       incremented: false,
       argNode: valueArg
     };
@@ -518,127 +1553,6 @@ function isPseudoMethod(name) {
 function pseudoSelector(name) {
   return PSEUDO_METHODS[name];
 }
-function whenPseudoKeyName(ap) {
-  const rel = ap.relationship ?? "ancestor";
-  const pn = pseudoName(ap.pseudo);
-  const base = `${rel}${pn.charAt(0).toUpperCase()}${pn.slice(1)}`;
-  if (!ap.markerNode) return base;
-  const suffix = ap.markerNode.type === "Identifier" ? ap.markerNode.name : "marker";
-  return `${base}_${suffix}`;
-}
-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;
-    for (const prop of Object.keys(seg.defs)) {
-      if (!propToIndices.has(prop)) propToIndices.set(prop, []);
-      propToIndices.get(prop).push(i);
-    }
-  }
-  const mergeableProps = /* @__PURE__ */ new Set();
-  for (const [prop, indices] of propToIndices) {
-    if (indices.length < 2) continue;
-    const hasBase = indices.some((i) => !segments[i].mediaQuery && !segments[i].pseudoClass);
-    const hasConditional = indices.some((i) => !!(segments[i].mediaQuery || segments[i].pseudoClass));
-    if (hasBase && hasConditional) {
-      mergeableProps.add(prop);
-    }
-  }
-  if (mergeableProps.size === 0) return segments;
-  const consumedProps = /* @__PURE__ */ new Map();
-  const mergedPropDefs = /* @__PURE__ */ new Map();
-  for (const prop of mergeableProps) {
-    const indices = propToIndices.get(prop);
-    let merged = {};
-    const keyParts = [];
-    for (const idx of indices) {
-      const seg = segments[idx];
-      const value = seg.defs[prop];
-      keyParts.push(seg.key);
-      if (typeof value === "string" || typeof value === "number") {
-        merged.default = value;
-      } else if (typeof value === "object" && value !== null) {
-        for (const [k, v] of Object.entries(value)) {
-          if (k === "default" && v === null && merged.default !== void 0) {
-            continue;
-          }
-          merged[k] = v;
-        }
-      }
-      if (!consumedProps.has(idx)) consumedProps.set(idx, /* @__PURE__ */ new Set());
-      consumedProps.get(idx).add(prop);
-    }
-    const finalValue = Object.keys(merged).length === 1 && "default" in merged ? merged.default : merged;
-    const mergedKey = [...new Set(keyParts)].join("_");
-    mergedPropDefs.set(prop, { defs: { [prop]: finalValue }, key: mergedKey });
-  }
-  const groupByIndices = /* @__PURE__ */ new Map();
-  for (const prop of mergeableProps) {
-    const indices = propToIndices.get(prop);
-    const groupKey = indices.join(",");
-    if (!groupByIndices.has(groupKey)) {
-      groupByIndices.set(groupKey, { props: [], key: mergedPropDefs.get(prop).key });
-    }
-    groupByIndices.get(groupKey).props.push(prop);
-  }
-  const mergedSegments = [];
-  for (const [, group] of groupByIndices) {
-    const defs = {};
-    for (const prop of group.props) {
-      Object.assign(defs, mergedPropDefs.get(prop).defs);
-    }
-    mergedSegments.push({ key: group.key, defs });
-  }
-  const result = [];
-  const mergedEmitted = /* @__PURE__ */ new Set();
-  for (let i = 0; i < segments.length; i++) {
-    const seg = segments[i];
-    const consumed = consumedProps.get(i);
-    if (!consumed) {
-      result.push(seg);
-      continue;
-    }
-    const remainingDefs = {};
-    for (const [prop, value] of Object.entries(seg.defs)) {
-      if (!consumed.has(prop)) {
-        remainingDefs[prop] = value;
-      }
-    }
-    if (Object.keys(remainingDefs).length > 0) {
-      result.push({ ...seg, defs: remainingDefs });
-    }
-    const indices = [...propToIndices.entries()].filter(([prop]) => consumed.has(prop) && mergeableProps.has(prop)).map(([, idxs]) => idxs.join(","));
-    for (const groupKey of new Set(indices)) {
-      if (!mergedEmitted.has(groupKey)) {
-        const group = groupByIndices.get(groupKey);
-        if (group) {
-          const defs = {};
-          for (const prop of group.props) {
-            Object.assign(defs, mergedPropDefs.get(prop).defs);
-          }
-          result.push({ key: group.key, defs });
-          mergedEmitted.add(groupKey);
-        }
-      }
-    }
-  }
-  return result;
-}
-function pseudoName(pseudo, breakpoints) {
-  if (pseudo.startsWith("@media") && breakpoints) {
-    for (const [getterName, mediaQuery] of Object.entries(breakpoints)) {
-      if (mediaQuery === pseudo) {
-        return getterName.replace(/^if/, "").replace(/^./, (c) => c.toLowerCase());
-      }
-    }
-    return pseudo.replace(/[^a-zA-Z0-9]/g, "_").replace(/_+/g, "_").replace(/^_|_$/g, "");
-  }
-  if (pseudo.startsWith("@container")) {
-    return pseudo.replace(/^@container\s*/, "container ").replace(/[^a-zA-Z0-9]/g, "_").replace(/_+/g, "_").replace(/^_|_$/g, "");
-  }
-  return pseudo.replace(/^:+/, "").replace(/-/g, "_");
-}
 function tryEvaluateLiteral(node, incremented, increment) {
   if (node.type === "NumericLiteral") {
     if (incremented) {
@@ -746,44 +1660,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 +1705,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 +1762,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 +1773,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 +1784,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,64 +1795,67 @@ 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;
       }
     }
   }
   return null;
 }
+function findImportDeclaration(ast, source) {
+  for (const node of ast.program.body) {
+    if (t2.isImportDeclaration(node) && node.source.value === source) {
+      return node;
+    }
+  }
+  return null;
+}
+function replaceCssImportWithNamedImports(ast, cssBinding, source, imports) {
+  for (const node of ast.program.body) {
+    if (!t2.isImportDeclaration(node)) continue;
+    const cssSpecIndex = node.specifiers.findIndex(function(spec) {
+      return t2.isImportSpecifier(spec) && spec.local.name === cssBinding;
+    });
+    if (cssSpecIndex === -1 || node.specifiers.length !== 1) continue;
+    node.source = t2.stringLiteral(source);
+    node.specifiers = imports.map(function(entry) {
+      return t2.importSpecifier(t2.identifier(entry.localName), t2.identifier(entry.importedName));
+    });
+    return true;
+  }
+  return false;
+}
 function upsertNamedImports(ast, source, imports) {
   if (imports.length === 0) return;
   for (const node of ast.program.body) {
-    if (!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 +1864,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 +1878,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 +1900,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 +1931,229 @@ 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 = [];
+  const previousProperties = /* @__PURE__ */ new Map();
+  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(
+      const partMembers = buildStyleHashMembers(part.segments, options);
+      members.push(...partMembers);
+      for (const member of partMembers) {
+        if (t3.isObjectProperty(member)) {
+          previousProperties.set(propertyName(member.key), member);
+        }
+      }
+    } else {
+      const thenMembers = mergeConditionalBranchMembers(
+        buildStyleHashMembers(part.thenSegments, options),
+        previousProperties,
+        collectConditionalOnlyProps(part.thenSegments)
+      );
+      const elseMembers = mergeConditionalBranchMembers(
+        buildStyleHashMembers(part.elseSegments, options),
+        previousProperties,
+        collectConditionalOnlyProps(part.elseSegments)
+      );
+      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 collectConditionalOnlyProps(segments) {
+  const allProps = /* @__PURE__ */ new Map();
+  for (const seg of segments) {
+    if (seg.error || seg.styleArrayArg || seg.typographyLookup) continue;
+    const hasCondition = !!(seg.pseudoClass || seg.mediaQuery || seg.pseudoElement || seg.whenPseudo);
+    const props = seg.variableProps ?? Object.keys(seg.defs);
+    for (const prop of props) {
+      const current = allProps.get(prop);
+      allProps.set(prop, current === void 0 ? hasCondition : current && hasCondition);
     }
-  });
-}
-function buildStyleArrayExpression(propsArgs, line, options) {
-  const elements = buildDebugElements(line, options);
-  elements.push(...propsArgs);
-  return t3.arrayExpression(elements);
+  }
+  const result = /* @__PURE__ */ new Set();
+  for (const [prop, isConditionalOnly] of allProps) {
+    if (isConditionalOnly) result.add(prop);
+  }
+  return result;
 }
-function buildPropsCall(propsArgs, line, options) {
-  if (!options.debug) {
-    return t3.callExpression(
-      t3.memberExpression(t3.identifier(options.stylexNamespaceName), t3.identifier("props")),
-      propsArgs
+function mergeConditionalBranchMembers(members, previousProperties, conditionalOnlyProps) {
+  return members.map(function(member) {
+    if (!t3.isObjectProperty(member)) {
+      return member;
+    }
+    const prop = propertyName(member.key);
+    const prior = previousProperties.get(prop);
+    if (!prior || !conditionalOnlyProps.has(prop)) {
+      return member;
+    }
+    return t3.objectProperty(
+      clonePropertyKey(member.key),
+      mergePropertyValues(prior.value, member.value)
     );
+  });
+}
+function mergePropertyValues(previousValue, currentValue) {
+  if (t3.isStringLiteral(previousValue) && t3.isStringLiteral(currentValue)) {
+    return t3.stringLiteral(`${previousValue.value} ${currentValue.value}`);
   }
-  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 (t3.isStringLiteral(previousValue) && t3.isArrayExpression(currentValue)) {
+    return mergeTupleValue(currentValue, previousValue.value, true);
+  }
+  if (t3.isArrayExpression(previousValue) && t3.isStringLiteral(currentValue)) {
+    return mergeTupleValue(previousValue, currentValue.value, false);
+  }
+  if (t3.isArrayExpression(previousValue) && t3.isArrayExpression(currentValue)) {
+    const previousClassNames = tupleClassNames(previousValue);
+    return mergeTupleValue(currentValue, previousClassNames, true, arrayElementExpression(previousValue.elements[1]));
+  }
+  return t3.cloneNode(currentValue, true);
+}
+function mergeTupleValue(tuple, classNames, prependClassNames, previousVars) {
+  const currentClassNames = tupleClassNames(tuple);
+  const mergedClassNames = prependClassNames ? `${classNames} ${currentClassNames}` : `${currentClassNames} ${classNames}`;
+  const varsExpr = tuple.elements[1];
+  const mergedVars = previousVars && arrayElementExpression(varsExpr) ? mergeVarsObject(previousVars, arrayElementExpression(varsExpr)) : arrayElementExpression(varsExpr) ?? previousVars ?? null;
+  return t3.arrayExpression([
+    t3.stringLiteral(mergedClassNames),
+    mergedVars ? t3.cloneNode(mergedVars, true) : t3.objectExpression([])
   ]);
 }
-function buildDebugElements(line, options) {
-  if (!options.debug || line === null) {
-    return [];
+function tupleClassNames(tuple) {
+  const classNames = tuple.elements[0];
+  return t3.isStringLiteral(classNames) ? classNames.value : "";
+}
+function arrayElementExpression(element) {
+  return element && !t3.isSpreadElement(element) ? element : null;
+}
+function mergeVarsObject(previousVars, currentVars) {
+  if (t3.isObjectExpression(previousVars) && t3.isObjectExpression(currentVars)) {
+    return t3.objectExpression([
+      ...previousVars.properties.map(function(property) {
+        return t3.cloneNode(property, true);
+      }),
+      ...currentVars.properties.map(function(property) {
+        return t3.cloneNode(property, true);
+      })
+    ]);
   }
-  options.needsTrussDebugInfo.current = true;
-  return [t3.newExpression(t3.identifier(options.trussDebugInfoName), [t3.stringLiteral(`${options.filename}:${line}`)])];
+  return t3.cloneNode(currentVars, true);
 }
-function lowerCssExpressionToPropsArgs(expr, path, asStyleArrayHelperName, needsAsStyleArrayHelper) {
-  return buildStyleObjectPropsArgs(expr, path, asStyleArrayHelperName, needsAsStyleArrayHelper) ?? buildStyleArrayLikePropsArgsFromExpression(expr, path);
+function propertyName(key) {
+  if (t3.isIdentifier(key)) {
+    return key.name;
+  }
+  if (t3.isStringLiteral(key)) {
+    return key.value;
+  }
+  return generate(key).code;
 }
-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 clonePropertyKey(key) {
+  if (t3.isPrivateName(key)) {
+    return t3.identifier(key.id.name);
   }
-  return `[truss] Unsupported pattern: Could not rewrite css prop: expression is not style-array-like (${formatNodeSnippet(expr)})`;
+  return t3.cloneNode(key, true);
 }
-function formatNodeSnippet(node) {
-  return generate(node, { compact: true, comments: true }).code;
+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");
+  });
+  if (!firstProp) return;
+  options.needsTrussDebugInfo.current = true;
+  const debugExpr = t3.newExpression(t3.identifier(options.trussDebugInfoName), [
+    t3.stringLiteral(`${options.filename}:${line}`)
+  ]);
+  if (t3.isStringLiteral(firstProp.value)) {
+    firstProp.value = t3.arrayExpression([firstProp.value, debugExpr]);
+  } else if (t3.isArrayExpression(firstProp.value)) {
+    firstProp.value.elements.push(debugExpr);
+  }
 }
-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
+function buildCssSpreadExpression(path, styleHash, line, options) {
+  const existingClassNameExpr = removeExistingAttribute(path, "className");
+  const existingStyleExpr = removeExistingAttribute(path, "style");
+  if (!existingClassNameExpr && !existingStyleExpr) {
+    return buildPropsCall(styleHash, line, options);
+  }
+  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 +2161,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 +2223,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;
@@ -1925,18 +2261,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 +2276,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 +2294,54 @@ 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" });
+  }
+  const reusedCssImportLine = runtimeImports.length > 0 && findImportDeclaration(ast, "@homebound/truss/runtime") === null && replaceCssImportWithNamedImports(ast, cssBindingName, "@homebound/truss/runtime", runtimeImports);
+  if (!reusedCssImportLine) {
+    removeCssImport(ast, cssBindingName);
+  }
+  if (runtimeImports.length > 0) {
+    if (!reusedCssImportLine) {
+      upsertNamedImports(ast, "@homebound/truss/runtime", runtimeImports);
     }
-    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) {
@@ -2021,48 +2351,52 @@ function transformTruss(code, filename, mapping, options = {}) {
   }
   const output = generate2(ast, {
     sourceFileName: filename,
+    sourceMaps: true,
     retainLines: false
   });
-  return { code: output.code, map: output.map };
+  const outputCode = preserveBlankLineAfterImports(code, output.code);
+  return { code: outputCode, map: output.map, css: cssText, rules };
 }
-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);
+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
+          });
+        }
+      }
     }
   }
-  return names;
+  return lookups;
 }
-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);
-      }
-    }
-    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));
+function preserveBlankLineAfterImports(input, output) {
+  const inputLines = input.split("\n");
+  const outputLines = output.split("\n");
+  const lastInputImportLine = findLastImportLine(inputLines);
+  const lastOutputImportLine = findLastImportLine(outputLines);
+  if (lastInputImportLine === -1 || lastOutputImportLine === -1) {
+    return output;
+  }
+  const inputHasBlankLineAfterImports = inputLines[lastInputImportLine + 1]?.trim() === "";
+  const outputHasBlankLineAfterImports = outputLines[lastOutputImportLine + 1]?.trim() === "";
+  if (!inputHasBlankLineAfterImports || outputHasBlankLineAfterImports) {
+    return output;
+  }
+  outputLines.splice(lastOutputImportLine + 1, 0, "");
+  return outputLines.join("\n");
+}
+function findLastImportLine(lines) {
+  let lastImportLine = -1;
+  for (let index = 0; index < lines.length; index++) {
+    if (lines[index].trimStart().startsWith("import ")) {
+      lastImportLine = index;
     }
   }
-  hoisted.reverse();
-  return hoisted;
+  return lastImportLine;
 }
 
 // src/plugin/transform-css.ts
@@ -2231,8 +2565,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` };
@@ -2263,9 +2597,6 @@ function resolveCssExpression(node, cssBindingName, mapping, filename) {
   }
   return { declarations };
 }
-function camelToKebab(s) {
-  return s.replace(/^(Webkit|Moz|Ms|O)/, (m) => `-${m.toLowerCase()}`).replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
-}
 function formatCssRule(selector, declarations) {
   if (declarations.length === 0) {
     return `${selector} {}`;
@@ -2331,11 +2662,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 +2684,95 @@ 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 tag = `<script type="module" src="/${VIRTUAL_RUNTIME_ID}"></script>`;
+      return html.replace("</head>", `    ${tag}
+  </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 +2794,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");
+        }
+      }
     }
   };
 }