@homebound/truss 2.1.0-next.8 → 2.1.0

package/build/plugin/index.js

@@ -4,6 +4,579 @@ 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",
@@ -11,7 +584,6 @@ var PSEUDO_SUFFIX = {
   ":active": "_a",
   ":disabled": "_d"
 };
-var PSEUDO_ORDER = [":hover", ":focus", ":focus-visible", ":active", ":disabled"];
 var RELATIONSHIP_SHORT = {
   ancestor: "anc",
   descendant: "desc",
@@ -57,7 +629,7 @@ function conditionPrefix(pseudoClass, mediaQuery, pseudoElement, breakpoints) {
   return parts.join("");
 }
 function camelToKebab(s) {
-  return s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).replace(/^(webkit|moz|ms)-/, "-$1-");
+  return s.replace(/^(Webkit|Moz|Ms|O)/, (m) => `-${m.toLowerCase()}`).replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 }
 function cleanValueForClassName(value) {
   let cleaned = value;
@@ -91,24 +663,24 @@ function getLonghandLookup(mapping) {
   return cachedLookup;
 }
 function computeStaticBaseName(seg, cssProp, cssValue, isMultiProp, mapping) {
-  const abbrev = seg.key.split("__")[0];
+  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 `${abbrev}_${valuePart}_${cssProp}`;
+      return `${abbr}_${valuePart}_${cssProp}`;
     }
-    return `${abbrev}_${valuePart}`;
+    return `${abbr}_${valuePart}`;
   }
   if (isMultiProp) {
     const lookup = getLonghandLookup(mapping);
     const canonical = lookup.get(`${cssProp}\0${cssValue}`);
     if (canonical) return canonical;
-    return `${abbrev}_${cssProp}`;
+    return `${abbr}_${cssProp}`;
   }
-  return abbrev;
+  return abbr;
 }
 function collectAtomicRules(chains, mapping) {
   const rules = /* @__PURE__ */ new Map();
@@ -118,17 +690,8 @@ function collectAtomicRules(chains, mapping) {
       const segs = part.type === "unconditional" ? part.segments : [...part.thenSegments, ...part.elseSegments];
       for (const seg of segs) {
         if (seg.error || seg.styleArrayArg || seg.typographyLookup) continue;
-        if (seg.whenPseudo) {
-          if (seg.variableProps) {
-            if (seg.incremented) needsMaybeInc = true;
-            collectWhenVariableRules(rules, seg, mapping);
-          } else {
-            collectWhenStaticRules(rules, seg, mapping);
-          }
-          continue;
-        }
+        if (seg.incremented) needsMaybeInc = true;
         if (seg.variableProps) {
-          if (seg.incremented) needsMaybeInc = true;
           collectVariableRules(rules, seg, mapping);
         } else {
           collectStaticRules(rules, seg, mapping);
@@ -138,113 +701,50 @@ function collectAtomicRules(chains, mapping) {
   }
   return { rules, needsMaybeInc };
 }
-function collectStaticRules(rules, seg, mapping) {
-  const rawDefs = unwrapDefs(seg.defs, seg.pseudoElement);
-  const prefix = conditionPrefix(seg.pseudoClass, seg.mediaQuery, seg.pseudoElement, mapping.breakpoints);
-  const isMultiProp = Object.keys(rawDefs).length > 1;
-  for (const [cssProp, value] of Object.entries(rawDefs)) {
-    const cssValue = extractLeafValue(value);
-    if (cssValue === null) continue;
-    const baseName = computeStaticBaseName(seg, cssProp, String(cssValue), isMultiProp, mapping);
-    const className = prefix ? `${prefix}${baseName}` : baseName;
-    if (!rules.has(className)) {
-      rules.set(className, {
-        className,
-        cssProperty: camelToKebab(cssProp),
-        cssValue: String(cssValue),
-        pseudoClass: seg.pseudoClass ?? void 0,
-        mediaQuery: seg.mediaQuery ?? void 0,
-        pseudoElement: seg.pseudoElement ?? void 0
-      });
-    }
-  }
-}
-function collectVariableRules(rules, seg, mapping) {
-  const prefix = conditionPrefix(seg.pseudoClass, seg.mediaQuery, seg.pseudoElement, mapping.breakpoints);
-  const segmentBaseKey = seg.key.split("__")[0];
-  for (const prop of seg.variableProps) {
-    const baseKey = seg.key.split("__")[0];
-    const className = prefix ? `${prefix}${baseKey}_var` : `${baseKey}_var`;
-    const varName = toCssVariableName(className, baseKey, 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],
-        pseudoClass: seg.pseudoClass ?? void 0,
-        mediaQuery: seg.mediaQuery ?? void 0,
-        pseudoElement: seg.pseudoElement ?? void 0,
-        cssVarName: varName
-      });
-      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 = `${segmentBaseKey}_${cssProp}`;
-      const extraName = prefix ? `${prefix}${extraBase}` : extraBase;
-      if (!rules.has(extraName)) {
-        rules.set(extraName, {
-          className: extraName,
-          cssProperty: camelToKebab(cssProp),
-          cssValue: String(value),
-          pseudoClass: seg.pseudoClass ?? void 0,
-          mediaQuery: seg.mediaQuery ?? void 0,
-          pseudoElement: seg.pseudoElement ?? void 0
-        });
+function 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 collectWhenStaticRules(rules, seg, mapping) {
-  const wp = seg.whenPseudo;
-  const prefix = whenPrefix(wp);
-  const rawDefs = seg.defs;
-  const isMultiProp = Object.keys(rawDefs).length > 1;
-  const mClass = markerClassName(wp.markerNode);
-  for (const [cssProp, value] of Object.entries(rawDefs)) {
-    const cssValue = typeof value === "string" || typeof value === "number" ? value : extractLeafValue(value);
-    if (cssValue === null) continue;
-    const baseName = computeStaticBaseName(seg, cssProp, String(cssValue), isMultiProp, mapping);
-    const className = `${prefix}${baseName}`;
+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: String(cssValue),
-        whenSelector: {
-          relationship: wp.relationship ?? "ancestor",
-          markerClass: mClass,
-          pseudo: wp.pseudo
-        }
+        cssValue,
+        ...!whenSelector && baseRuleFields(seg),
+        whenSelector
       });
     }
   }
 }
-function collectWhenVariableRules(rules, seg, mapping) {
-  const wp = seg.whenPseudo;
-  const prefix = whenPrefix(wp);
-  const segmentBaseKey = seg.key.split("__")[0];
-  const mClass = markerClassName(wp.markerNode);
+function collectVariableRules(rules, seg, mapping) {
+  const { prefix, whenSelector } = segmentContext(seg, mapping);
   for (const prop of seg.variableProps) {
-    const baseKey = seg.key.split("__")[0];
-    const className = `${prefix}${baseKey}_var`;
-    const varName = toCssVariableName(className, baseKey, prop);
+    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) {
@@ -254,11 +754,8 @@ function collectWhenVariableRules(rules, seg, mapping) {
         cssValue: declaration.cssValue,
         declarations: [declaration],
         cssVarName: varName,
-        whenSelector: {
-          relationship: wp.relationship ?? "ancestor",
-          markerClass: mClass,
-          pseudo: wp.pseudo
-        }
+        ...!whenSelector && baseRuleFields(seg),
+        whenSelector
       });
       continue;
     }
@@ -277,121 +774,26 @@ function collectWhenVariableRules(rules, seg, mapping) {
   }
   if (seg.variableExtraDefs) {
     for (const [cssProp, value] of Object.entries(seg.variableExtraDefs)) {
-      const extraName = `${prefix}${segmentBaseKey}_${cssProp}`;
+      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: {
-            relationship: wp.relationship ?? "ancestor",
-            markerClass: mClass,
-            pseudo: wp.pseudo
-          }
+          ...!whenSelector && baseRuleFields(seg),
+          whenSelector
         });
       }
     }
   }
 }
-function unwrapDefs(defs, pseudoElement) {
-  let result = defs;
-  if (pseudoElement && result[pseudoElement] && typeof result[pseudoElement] === "object") {
-    result = result[pseudoElement];
-  }
-  const unwrapped = {};
-  for (const [prop, val] of Object.entries(result)) {
-    unwrapped[prop] = extractLeafValue(val) ?? val;
-  }
-  return unwrapped;
-}
-function extractLeafValue(value) {
-  if (typeof value === "string" || typeof value === "number") return value;
-  if (value === null) return null;
-  if (typeof value === "object") {
-    const obj = value;
-    for (const [k, v] of Object.entries(obj)) {
-      if (k === "default") continue;
-      if (typeof v === "string" || typeof v === "number") return v;
-      if (typeof v === "object" && v !== null) return extractLeafValue(v);
-    }
-    if ("default" in obj && obj.default !== null) {
-      return extractLeafValue(obj.default);
-    }
-  }
-  return null;
-}
 function generateCssText(rules) {
   const allRules = Array.from(rules.values());
-  const base = [];
-  const pseudo = /* @__PURE__ */ new Map();
-  const pseudoElement = [];
-  const whenRules = [];
-  const media = [];
-  const mediaPseudo = [];
-  const mediaPseudoElement = [];
-  for (const rule of allRules) {
-    if (rule.whenSelector) {
-      whenRules.push(rule);
-    } else if (rule.mediaQuery && rule.pseudoClass) {
-      mediaPseudo.push(rule);
-    } else if (rule.mediaQuery && rule.pseudoElement) {
-      mediaPseudoElement.push(rule);
-    } else if (rule.mediaQuery) {
-      media.push(rule);
-    } else if (rule.pseudoClass && rule.pseudoElement) {
-      const tier = pseudo.get(rule.pseudoClass) ?? [];
-      tier.push(rule);
-      pseudo.set(rule.pseudoClass, tier);
-    } else if (rule.pseudoElement) {
-      pseudoElement.push(rule);
-    } else if (rule.pseudoClass) {
-      const tier = pseudo.get(rule.pseudoClass) ?? [];
-      tier.push(rule);
-      pseudo.set(rule.pseudoClass, tier);
-    } else {
-      base.push(rule);
-    }
-  }
-  sortRulesWithinPropertyTier(base);
-  sortRulesWithinPropertyTier(pseudoElement);
-  sortRulesWithinPropertyTier(whenRules);
-  sortRulesWithinPropertyTier(media);
-  sortRulesWithinPropertyTier(mediaPseudo);
-  sortRulesWithinPropertyTier(mediaPseudoElement);
-  for (const tier of pseudo.values()) {
-    sortRulesWithinPropertyTier(tier);
-  }
+  sortRulesByPriority(allRules);
   const lines = [];
-  for (const rule of base) {
-    lines.push(formatBaseRule(rule));
-  }
-  for (const pc of PSEUDO_ORDER) {
-    const tier = pseudo.get(pc);
-    if (!tier) continue;
-    for (const rule of tier) {
-      lines.push(formatPseudoRule(rule));
-    }
-  }
-  for (const [pc, tier] of Array.from(pseudo.entries())) {
-    if (PSEUDO_ORDER.includes(pc)) continue;
-    for (const rule of tier) {
-      lines.push(formatPseudoRule(rule));
-    }
-  }
-  for (const rule of pseudoElement) {
-    lines.push(formatPseudoElementRule(rule));
-  }
-  for (const rule of whenRules) {
-    lines.push(formatWhenRule(rule));
-  }
-  for (const rule of media) {
-    lines.push(formatMediaRule(rule));
-  }
-  for (const rule of mediaPseudo) {
-    lines.push(formatMediaPseudoRule(rule));
-  }
-  for (const rule of mediaPseudoElement) {
-    lines.push(formatMediaPseudoElementRule(rule));
+  for (const rule of allRules) {
+    lines.push(formatRule(rule));
   }
   for (const rule of allRules) {
     for (const declaration of getRuleDeclarations(rule)) {
@@ -405,41 +807,15 @@ function generateCssText(rules) {
   }
   return lines.join("\n");
 }
-function sortRulesWithinPropertyTier(rules) {
-  const staticProps = /* @__PURE__ */ new Set();
-  const variableProps = /* @__PURE__ */ new Set();
-  for (const rule of rules) {
-    if (isVariableRule(rule)) {
-      variableProps.add(rule.cssProperty);
-    } else {
-      staticProps.add(rule.cssProperty);
-    }
-  }
-  const conflictingProps = /* @__PURE__ */ new Set();
-  for (const prop of variableProps) {
-    if (staticProps.has(prop)) {
-      conflictingProps.add(prop);
-    }
-  }
-  if (conflictingProps.size === 0) return;
-  const kept = [];
-  const deferred = [];
-  for (const rule of rules) {
-    if (conflictingProps.has(rule.cssProperty) && isVariableRule(rule)) {
-      deferred.push(rule);
-    } else {
-      kept.push(rule);
-    }
-  }
-  const result = [...kept, ...deferred];
-  for (let i = 0; i < result.length; i++) {
-    rules[i] = result[i];
-  }
-}
-function isVariableRule(rule) {
-  return getRuleDeclarations(rule).some(function(declaration) {
-    return declaration.cssVarName !== void 0;
-  });
+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);
@@ -510,13 +886,11 @@ 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) {
-      const prefix = seg.whenPseudo ? whenPrefix(seg.whenPseudo) : conditionPrefix(seg.pseudoClass, seg.mediaQuery, seg.pseudoElement, mapping.breakpoints);
-      const segmentBaseKey = seg.key.split("__")[0];
       for (const prop of seg.variableProps) {
-        const baseKey = seg.key.split("__")[0];
-        const className = prefix ? `${prefix}${baseKey}_var` : `${baseKey}_var`;
-        const varName = toCssVariableName(className, baseKey, prop);
+        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,
@@ -529,19 +903,15 @@ function buildStyleHashProperties(segments, mapping, maybeIncHelperName) {
       }
       if (seg.variableExtraDefs) {
         for (const [cssProp, value] of Object.entries(seg.variableExtraDefs)) {
-          const extraBase = `${segmentBaseKey}_${cssProp}`;
+          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 rawDefs = seg.whenPseudo ? seg.defs : unwrapDefs(seg.defs, seg.pseudoElement);
-      const prefix = seg.whenPseudo ? whenPrefix(seg.whenPseudo) : conditionPrefix(seg.pseudoClass, seg.mediaQuery, seg.pseudoElement, mapping.breakpoints);
-      const isMultiProp = Object.keys(rawDefs).length > 1;
-      for (const cssProp of Object.keys(rawDefs)) {
-        const val = extractLeafValue(rawDefs[cssProp]);
-        if (val === null) continue;
+      const 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, []);
@@ -577,8 +947,8 @@ function buildStyleHashProperties(segments, mapping, maybeIncHelperName) {
 }
 function toCssVariableName(className, baseKey, cssProp) {
   const baseClassName = `${baseKey}_var`;
-  const conditionPrefix2 = className.endsWith(baseClassName) ? className.slice(0, -baseClassName.length) : "";
-  return `--${conditionPrefix2}${cssProp}`;
+  const cp = className.endsWith(baseClassName) ? className.slice(0, -baseClassName.length) : "";
+  return `--${cp}${cssProp}`;
 }
 function buildMaybeIncDeclaration(helperName, increment) {
   const incParam = t.identifier("inc");
@@ -623,7 +993,7 @@ import * as t4 from "@babel/types";
 import { basename } from "path";
 
 // src/plugin/resolve-chain.ts
-function resolveFullChain(chain, mapping, options) {
+function resolveFullChain(chain, mapping) {
   const parts = [];
   const markers = [];
   const filteredChain = [];
@@ -651,22 +1021,14 @@ function resolveFullChain(chain, mapping, options) {
       const elseIndex = findElseIndex(filteredChain, i + 1);
       if (elseIndex !== -1) {
         if (currentNodes.length > 0) {
-          const unconditionalSegs = resolveChain(currentNodes, mapping);
-          parts.push({
-            type: "unconditional",
-            segments: options?.skipMerge ? unconditionalSegs : mergeOverlappingConditions(unconditionalSegs)
-          });
+          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);
-        const combinedSegs = [...thenSegs, ...elseSegs];
-        parts.push({
-          type: "unconditional",
-          segments: options?.skipMerge ? combinedSegs : mergeOverlappingConditions(combinedSegs)
-        });
+        parts.push({ type: "unconditional", segments: [...thenSegs, ...elseSegs] });
         i = filteredChain.length;
         break;
       }
@@ -679,11 +1041,7 @@ function resolveFullChain(chain, mapping, options) {
         continue;
       }
       if (currentNodes.length > 0) {
-        const unconditionalSegs = resolveChain(currentNodes, mapping);
-        parts.push({
-          type: "unconditional",
-          segments: options?.skipMerge ? unconditionalSegs : mergeOverlappingConditions(unconditionalSegs)
-        });
+        parts.push({ type: "unconditional", segments: resolveChain(currentNodes, mapping) });
         currentNodes = [];
       }
       const thenNodes = [];
@@ -711,8 +1069,8 @@ function resolveFullChain(chain, mapping, options) {
       parts.push({
         type: "conditional",
         conditionNode: node.conditionNode,
-        thenSegments: options?.skipMerge ? thenSegs : mergeOverlappingConditions(thenSegs),
-        elseSegments: options?.skipMerge ? elseSegs : mergeOverlappingConditions(elseSegs)
+        thenSegments: thenSegs,
+        elseSegments: elseSegs
       });
     } else {
       currentNodes.push(node);
@@ -720,11 +1078,7 @@ function resolveFullChain(chain, mapping, options) {
     }
   }
   if (currentNodes.length > 0) {
-    const remainingSegs = resolveChain(currentNodes, mapping);
-    parts.push({
-      type: "unconditional",
-      segments: options?.skipMerge ? remainingSegs : mergeOverlappingConditions(remainingSegs)
-    });
+    parts.push({ type: "unconditional", segments: resolveChain(currentNodes, mapping) });
   }
   const segmentErrors = [];
   for (const part of parts) {
@@ -913,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;
       }
@@ -921,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) {
@@ -940,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) {
@@ -948,7 +1307,7 @@ function resolveTypographyCall(node, mapping, mediaQuery, pseudoClass, pseudoEle
   }
   return [
     {
-      key: lookupKey,
+      abbr: lookupKey,
       defs: {},
       typographyLookup: {
         lookupKey,
@@ -974,32 +1333,13 @@ function resolveTypographyEntry(name, mapping, mediaQuery, pseudoClass, pseudoEl
   }
   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 = [];
@@ -1023,65 +1363,19 @@ function resolveVariableCall(abbr, entry, node, mapping, mediaQuery, pseudoClass
   if (node.args.length !== 1) {
     throw new UnsupportedPatternError(`${abbr}() expects exactly 1 argument, got ${node.args.length}`);
   }
-  const argAst = node.args[0];
-  const literalValue = tryEvaluateLiteral(argAst, entry.incremented, mapping.increment);
-  if (whenPseudo) {
-    const wpSuffix = whenPseudoKeyName(whenPseudo);
-    if (literalValue !== null) {
-      const keySuffix = literalValue.replace(/[^a-zA-Z0-9]/g, "_");
-      const key = `${abbr}__${keySuffix}__${wpSuffix}`;
-      const defs = {};
-      for (const prop of entry.props) {
-        defs[prop] = literalValue;
-      }
-      if (entry.extraDefs) Object.assign(defs, entry.extraDefs);
-      return { key, defs, whenPseudo, argResolved: literalValue };
-    } else {
-      const key = `${abbr}__${wpSuffix}`;
-      return {
-        key,
-        defs: {},
-        whenPseudo,
-        variableProps: entry.props,
-        incremented: entry.incremented,
-        variableExtraDefs: entry.extraDefs,
-        argNode: argAst
-      };
-    }
-  }
-  const suffix = conditionKeySuffix(mediaQuery, pseudoClass, pseudoElement, mapping.breakpoints);
-  if (literalValue !== null) {
-    const keySuffix = literalValue.replace(/[^a-zA-Z0-9]/g, "_");
-    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,
-      variableProps: entry.props,
-      incremented: entry.incremented,
-      variableExtraDefs: 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, whenPseudo) {
   const targetEntry = mapping.abbreviations[entry.target];
@@ -1091,68 +1385,58 @@ function resolveDelegateCall(abbr, entry, node, mapping, mediaQuery, pseudoClass
   if (node.args.length !== 1) {
     throw new UnsupportedPatternError(`${abbr}() expects exactly 1 argument, got ${node.args.length}`);
   }
-  const argAst = node.args[0];
-  const literalValue = tryEvaluatePxLiteral(argAst);
-  if (whenPseudo) {
-    const wpSuffix = whenPseudoKeyName(whenPseudo);
-    if (literalValue !== null) {
-      const keySuffix = literalValue.replace(/[^a-zA-Z0-9]/g, "_");
-      const key = `${entry.target}__${keySuffix}__${wpSuffix}`;
-      const defs = {};
-      for (const prop of targetEntry.props) {
-        defs[prop] = literalValue;
-      }
-      if (targetEntry.extraDefs) Object.assign(defs, targetEntry.extraDefs);
-      return { key, defs, whenPseudo, argResolved: literalValue };
-    } else {
-      const key = `${entry.target}__${wpSuffix}`;
-      return {
-        key,
-        defs: {},
-        whenPseudo,
-        variableProps: targetEntry.props,
-        incremented: false,
-        appendPx: true,
-        variableExtraDefs: targetEntry.extraDefs,
-        argNode: argAst
-      };
-    }
-  }
-  const suffix = conditionKeySuffix(mediaQuery, pseudoClass, pseudoElement, mapping.breakpoints);
+  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,
-      variableProps: targetEntry.props,
-      incremented: false,
-      appendPx: true,
-      variableExtraDefs: 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, whenPseudo) {
   if (node.args.length === 1) {
@@ -1166,7 +1450,7 @@ function resolveAddCall(node, mapping, mediaQuery, pseudoClass, pseudoElement, w
       );
     }
     return {
-      key: "__composed_css_prop",
+      abbr: "__composed_css_prop",
       defs: {},
       styleArrayArg: styleArg
     };
@@ -1184,34 +1468,24 @@ function resolveAddCall(node, mapping, mediaQuery, pseudoClass, pseudoElement, w
   const valueArg = node.args[1];
   const literalValue = tryEvaluateAddLiteral(valueArg);
   if (whenPseudo) {
-    const wpSuffix = whenPseudoKeyName(whenPseudo);
     if (literalValue !== null) {
-      const keySuffix = literalValue.replace(/[^a-zA-Z0-9]/g, "_").replace(/_+/g, "_").replace(/^_|_$/g, "");
-      const key = `${propName}__${keySuffix}__${wpSuffix}`;
-      return { key, defs: { [propName]: literalValue }, whenPseudo, argResolved: literalValue };
+      return { abbr: propName, defs: { [propName]: literalValue }, whenPseudo, argResolved: literalValue };
     } else {
-      const key = `${propName}__${wpSuffix}`;
-      return { key, defs: {}, whenPseudo, variableProps: [propName], incremented: false, argNode: valueArg };
+      return { abbr: propName, defs: {}, whenPseudo, variableProps: [propName], incremented: false, argNode: valueArg };
     }
   }
-  const suffix = conditionKeySuffix(mediaQuery, pseudoClass, pseudoElement, mapping.breakpoints);
   if (literalValue !== null) {
-    const keySuffix = literalValue.replace(/[^a-zA-Z0-9]/g, "_").replace(/_+/g, "_").replace(/^_|_$/g, "");
-    const key = suffix ? `${propName}__${keySuffix}__${suffix}` : `${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 ? `${propName}__${suffix}` : propName;
     return {
-      key,
+      abbr: propName,
       defs: {},
       mediaQuery,
       pseudoClass,
@@ -1279,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.variableProps || seg.styleArrayArg || seg.whenPseudo || seg.error) continue;
-    for (const prop of Object.keys(seg.defs)) {
-      if (!propToIndices.has(prop)) propToIndices.set(prop, []);
-      propToIndices.get(prop).push(i);
-    }
-  }
-  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) {
@@ -1799,11 +1952,13 @@ function buildStyleHashFromChain(chain, options) {
     } else {
       const thenMembers = mergeConditionalBranchMembers(
         buildStyleHashMembers(part.thenSegments, options),
-        previousProperties
+        previousProperties,
+        collectConditionalOnlyProps(part.thenSegments)
       );
       const elseMembers = mergeConditionalBranchMembers(
         buildStyleHashMembers(part.elseSegments, options),
-        previousProperties
+        previousProperties,
+        collectConditionalOnlyProps(part.elseSegments)
       );
       members.push(
         t3.spreadElement(
@@ -1848,13 +2003,31 @@ function buildStyleHashMembers(segments, options) {
   flushNormal();
   return members;
 }
-function mergeConditionalBranchMembers(members, previousProperties) {
+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);
+    }
+  }
+  const result = /* @__PURE__ */ new Set();
+  for (const [prop, isConditionalOnly] of allProps) {
+    if (isConditionalOnly) result.add(prop);
+  }
+  return result;
+}
+function mergeConditionalBranchMembers(members, previousProperties, conditionalOnlyProps) {
   return members.map(function(member) {
     if (!t3.isObjectProperty(member)) {
       return member;
     }
-    const prior = previousProperties.get(propertyName(member.key));
-    if (!prior) {
+    const prop = propertyName(member.key);
+    const prior = previousProperties.get(prop);
+    if (!prior || !conditionalOnlyProps.has(prop)) {
       return member;
     }
     return t3.objectProperty(
@@ -2078,7 +2251,7 @@ function transformTruss(code, filename, mapping, options = {}) {
       if (parentPath && parentPath.isMemberExpression() && t4.isIdentifier(parentPath.node.property, { name: "$" })) {
         return;
       }
-      const resolvedChain = resolveFullChain(chain, mapping, { skipMerge: true });
+      const resolvedChain = resolveFullChain(chain, mapping);
       sites.push({ path, resolvedChain });
       const line = path.node.loc?.start.line ?? null;
       for (const err of resolvedChain.errors) {
@@ -2121,7 +2294,6 @@ function transformTruss(code, filename, mapping, options = {}) {
     needsTrussPropsHelper,
     trussDebugInfoName,
     needsTrussDebugInfo,
-    skippedCssPropMessages: errorMessages,
     runtimeLookupNames
   });
   const runtimeImports = [];
@@ -2416,7 +2588,7 @@ function resolveCssExpression(node, cssBindingName, mapping, filename) {
       }
       for (const [prop, value] of Object.entries(seg.defs)) {
         if (typeof value === "string" || typeof value === "number") {
-          declarations.push({ property: camelToKebab2(prop), value: String(value) });
+          declarations.push({ property: camelToKebab(prop), value: String(value) });
         } else {
           return { error: `unexpected nested value for property "${prop}"` };
         }
@@ -2425,9 +2597,6 @@ function resolveCssExpression(node, cssBindingName, mapping, filename) {
   }
   return { declarations };
 }
-function camelToKebab2(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} {}`;
@@ -2555,8 +2724,8 @@ function trussPlugin(opts) {
     },
     transformIndexHtml(html) {
       if (isBuild) return html;
-      const tags = [`<script type="module" src="/${VIRTUAL_RUNTIME_ID}"></script>`].join("\n    ");
-      return html.replace("</head>", `    ${tags}
+      const tag = `<script type="module" src="/${VIRTUAL_RUNTIME_ID}"></script>`;
+      return html.replace("</head>", `    ${tag}
   </head>`);
     },
     handleHotUpdate(ctx) {