@csszyx/compiler 0.3.1 → 0.4.0

package/dist/index.js

@@ -1,9 +1,6 @@
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
+import {
+  __require
+} from "./chunk-3RG5ZIWI.js";
 
 // src/compiler.ts
 import { init, transform_sz, version as getWasmVersion } from "@csszyx/core";
@@ -178,7 +175,8 @@ var PROPERTY_CATEGORY_MAP = {
   skewY: 4 /* ANGLE */,
   // ---- DURATION ----
   duration: 5 /* DURATION */,
-  delay: 5 /* DURATION */
+  delay: 5 /* DURATION */,
+  animationDelay: 5 /* DURATION */
 };
 function getPropertyCategory(property) {
   return PROPERTY_CATEGORY_MAP[property] ?? 7 /* PASSTHROUGH */;
@@ -222,6 +220,9 @@ function isValidColorString(value) {
   if (/^[a-zA-Z][a-zA-Z0-9]*(-[a-zA-Z0-9]+)*-\d+$/.test(value)) {
     return true;
   }
+  if (/^[a-zA-Z][a-zA-Z0-9]*(-[a-zA-Z][a-zA-Z0-9]*)*$/.test(value)) {
+    return true;
+  }
   return false;
 }
 function hasSlashOpacity(value) {
@@ -324,11 +325,13 @@ var PROPERTY_MAP = {
   outlineColor: "outline",
   outlineOffset: "outline-offset",
   outlineStyle: "outline",
-  // Ring (v3 — keep for future v3 support)
+  // Ring (v4: outset ring + inset ring)
   ring: "ring",
   ringColor: "ring",
   ringOffset: "ring-offset",
   ringOffsetColor: "ring-offset",
+  insetRing: "inset-ring",
+  insetRingColor: "inset-ring",
   // Spacing (canonical shorthand only)
   p: "p",
   pt: "pt",
@@ -508,6 +511,7 @@ var PROPERTY_MAP = {
   rotateX: "rotate-x",
   rotateY: "rotate-y",
   rotateZ: "rotate-z",
+  translate: "translate",
   translateX: "translate-x",
   translateY: "translate-y",
   translateZ: "translate-z",
@@ -526,6 +530,8 @@ var PROPERTY_MAP = {
   ease: "ease",
   delay: "delay",
   animate: "animate",
+  animationDelay: "animation-delay",
+  // animation-delay — distinct from transition delay
   // Masks
   mask: "mask",
   maskSize: "mask-size",
@@ -932,13 +938,7 @@ var BOOLEAN_SHORTHANDS = /* @__PURE__ */ new Set([
   // Ring (v3 future)
   "ring",
   // Outline
-  "outline",
-  // Transforms
-  "scale3d",
-  "rotate3d",
-  "translate3d",
-  "transformGpu",
-  "transformCpu"
+  "outline"
 ]);
 var BOOLEAN_TO_CLASS = {
   inlineBlock: "inline-block",
@@ -971,9 +971,6 @@ var BOOLEAN_TO_CLASS = {
   diagonalFractions: "diagonal-fractions",
   stackedFractions: "stacked-fractions",
   // Transforms
-  scale3d: "scale-3d",
-  rotate3d: "rotate-3d",
-  translate3d: "translate-3d",
   transformGpu: "transform-gpu",
   transformCpu: "transform-cpu",
   // Misc
@@ -1040,6 +1037,7 @@ var NEGATIVE_ALLOWED = /* @__PURE__ */ new Set([
   "scale-z",
   "skew-x",
   "skew-y",
+  "translate",
   "translate-x",
   "translate-y",
   "translate-z",
@@ -1066,7 +1064,10 @@ function handleImportant(value) {
 }
 function formatOpacity(op) {
   if (typeof op === "number") {
-    return String(op);
+    if (Number.isInteger(op * 2)) {
+      return String(op);
+    }
+    return `[${op}]`;
   }
   if (typeof op === "string") {
     if (op.startsWith("--")) {
@@ -1083,7 +1084,8 @@ function normalizeArbitraryVariant(key) {
   return key.replace(/\s+/g, "");
 }
 function normalizeArbitraryValue(value) {
-  return value.trim().replace(/\s+/g, "_");
+  const stripped = value.startsWith("[") && value.endsWith("]") ? value.slice(1, -1) : value;
+  return stripped.trim().replace(/\s+/g, "_");
 }
 var FRACTION_SUPPORTED_PROPS = /* @__PURE__ */ new Set([
   // Sizing (both rawKey and resolved key forms)
@@ -1121,6 +1123,7 @@ var FRACTION_SUPPORTED_PROPS = /* @__PURE__ */ new Set([
   "start",
   "end",
   // Translate
+  "translate",
   "translate-x",
   "translateX",
   "translate-y",
@@ -1129,21 +1132,22 @@ var FRACTION_SUPPORTED_PROPS = /* @__PURE__ */ new Set([
   "aspect"
 ]);
 function needsArbitraryBrackets(value) {
-  return /^\d+(\.\d+)?(px|rem|em|%|vh|vw|ch|dvh|dvw|svh|svw|lvh|lvw|cqw|cqh|deg|rad|turn|grad|ms|s|fr)$/.test(value) || // Positive units
-  /^-\d+(\.\d+)?(px|rem|em|%|vh|vw|ch|dvh|dvw|svh|svw|lvh|lvw|cqw|cqh|deg|rad|turn|grad|ms|s|fr)$/.test(value) || // Negative units like -1px, -2rem
-  /^\.\d+(px|rem|em|%|vh|vw|ch)?$/.test(value) || // Values starting with . like .25em
-  /^-\.\d+(px|rem|em|%|vh|vw|ch)?$/.test(value) || // Negative values starting with -. like -.25em
-  value.startsWith("#") || // Hex colors
-  value.startsWith("rgb") || // RGB colors
-  value.startsWith("hsl") || // HSL colors
-  value.includes("calc(") || // Calculations
-  value.includes("var(") || // CSS variables (old syntax)
-  value.includes("attr(") || // attr() function
-  value.includes("url(") || // URLs
-  value.includes("clamp(") || // Clamp
-  value.includes("min(") || // Min
-  value.includes("max(") || // Max
-  value.includes(" ");
+  const v = value.startsWith("[") && value.endsWith("]") ? value.slice(1, -1) : value;
+  return /^\d+(\.\d+)?(px|rem|em|%|vh|vw|ch|dvh|dvw|svh|svw|lvh|lvw|cqw|cqh|deg|rad|turn|grad|ms|s|fr)$/.test(v) || // Positive units
+  /^-\d+(\.\d+)?(px|rem|em|%|vh|vw|ch|dvh|dvw|svh|svw|lvh|lvw|cqw|cqh|deg|rad|turn|grad|ms|s|fr)$/.test(v) || // Negative units like -1px, -2rem
+  /^\.\d+(px|rem|em|%|vh|vw|ch)?$/.test(v) || // Values starting with . like .25em
+  /^-\.\d+(px|rem|em|%|vh|vw|ch)?$/.test(v) || // Negative values starting with -. like -.25em
+  v.startsWith("#") || // Hex colors
+  v.startsWith("rgb") || // RGB colors
+  v.startsWith("hsl") || // HSL colors
+  v.includes("calc(") || // Calculations
+  v.includes("var(") || // CSS variables (old syntax)
+  v.includes("attr(") || // attr() function
+  v.includes("url(") || // URLs
+  v.includes("clamp(") || // Clamp
+  v.includes("min(") || // Min
+  v.includes("max(") || // Max
+  v.includes(" ");
 }
 var LIST_STYLE_STANDARD = /* @__PURE__ */ new Set(["none", "disc", "decimal"]);
 var FONT_STRETCH_KEYWORDS = /* @__PURE__ */ new Set([
@@ -1157,11 +1161,12 @@ var FONT_STRETCH_KEYWORDS = /* @__PURE__ */ new Set([
   "extra-expanded",
   "ultra-expanded"
 ]);
-var NEEDS_ARBITRARY_PROPERTY = /* @__PURE__ */ new Set([
-  "mask-type",
-  "mask-composite",
-  "mask-mode"
-]);
+function camelToKebab(prop) {
+  if (prop.startsWith("--")) {
+    return prop;
+  }
+  return prop.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
 function getVariantPrefix(key) {
   if (VARIANT_MAP[key]) {
     return VARIANT_MAP[key];
@@ -1187,6 +1192,32 @@ function handleGroupPeer(type, nestedObj, prefix) {
       }
       continue;
     }
+    if (nestedKey === "data" && typeof nestedValue === "object") {
+      for (const [attr, attrValue] of Object.entries(nestedValue)) {
+        if (attrValue === null || attrValue === void 0 || attrValue === false) {
+          continue;
+        }
+        const variantPrefix = `${prefix}${type}-data-[${attr}]:`;
+        const result = transform(attrValue, variantPrefix);
+        if (result.className) {
+          classes.push(result.className);
+        }
+      }
+      continue;
+    }
+    if (nestedKey === "aria" && typeof nestedValue === "object") {
+      for (const [attr, attrValue] of Object.entries(nestedValue)) {
+        if (attrValue === null || attrValue === void 0 || attrValue === false) {
+          continue;
+        }
+        const variantPrefix = ARIA_STATES.has(attr) ? `${prefix}${type}-aria-${attr}:` : `${prefix}${type}-aria-[${attr}]:`;
+        const result = transform(attrValue, variantPrefix);
+        if (result.className) {
+          classes.push(result.className);
+        }
+      }
+      continue;
+    }
     const isVariant = KNOWN_VARIANTS.has(nestedKey) || KNOWN_VARIANTS.has(getVariantPrefix(nestedKey));
     const isArbitrary = nestedKey.startsWith(".") || nestedKey.startsWith("#") || nestedKey.startsWith("[") || nestedKey.startsWith(":");
     if (isArbitrary) {
@@ -1207,6 +1238,33 @@ function handleGroupPeer(type, nestedObj, prefix) {
         if (stateValue === null || stateValue === void 0 || stateValue === false) {
           continue;
         }
+        if (state === "data" && typeof stateValue === "object") {
+          for (const [attr, attrValue] of Object.entries(stateValue)) {
+            if (attrValue === null || attrValue === void 0 || attrValue === false) {
+              continue;
+            }
+            const variantPrefix2 = `${prefix}${type}-data-[${attr}]/${nestedKey}:`;
+            const result2 = transform(attrValue, variantPrefix2);
+            if (result2.className) {
+              classes.push(result2.className);
+            }
+          }
+          continue;
+        }
+        if (state === "aria" && typeof stateValue === "object") {
+          for (const [attr, attrValue] of Object.entries(stateValue)) {
+            if (attrValue === null || attrValue === void 0 || attrValue === false) {
+              continue;
+            }
+            const ariaSegment = ARIA_STATES.has(attr) ? `aria-${attr}` : `aria-[${attr}]`;
+            const variantPrefix2 = `${prefix}${type}-${ariaSegment}/${nestedKey}:`;
+            const result2 = transform(attrValue, variantPrefix2);
+            if (result2.className) {
+              classes.push(result2.className);
+            }
+          }
+          continue;
+        }
         const mappedState = getVariantPrefix(state);
         const variantPrefix = `${prefix}${type}-${mappedState}/${nestedKey}:`;
         const result = transform(stateValue, variantPrefix);
@@ -1328,6 +1386,18 @@ function transform(szProp, prefix = "", mangleMap) {
     if (value === null || value === void 0) {
       continue;
     }
+    if (rawKey === "css") {
+      if (value && typeof value === "object" && !Array.isArray(value)) {
+        for (const [cssProp, cssVal] of Object.entries(value)) {
+          if (cssVal === null || cssVal === void 0) {
+            continue;
+          }
+          const kebab = camelToKebab(cssProp);
+          classes.push(`${prefix}[${kebab}:${normalizeArbitraryValue(String(cssVal))}]`);
+        }
+      }
+      continue;
+    }
     if (rawKey.startsWith("@") && typeof value === "string") {
       const mappedKey = VARIANT_MAP[rawKey] || rawKey;
       classes.push(`${prefix}${mappedKey}/${value}`);
@@ -1398,10 +1468,11 @@ function transform(szProp, prefix = "", mangleMap) {
       classes.push(`${prefix}${rawKey}/${value}`);
       continue;
     }
-    if (typeof value === "object" && value !== null && !Array.isArray(value) && "color" in value) {
+    if (typeof value === "object" && value !== null && !Array.isArray(value) && rawKey in PROPERTY_MAP && "color" in value) {
       const colorObj = value;
       const twPrefix = PROPERTY_MAP[rawKey] || rawKey.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-      const colorBase = String(colorObj.color);
+      const rawColorBase = String(colorObj.color);
+      const colorBase = rawColorBase.startsWith("--") ? `(${rawColorBase})` : needsArbitraryBrackets(rawColorBase) ? `[${normalizeArbitraryValue(rawColorBase)}]` : normalizeArbitraryValue(rawColorBase);
       if (colorObj.op !== void 0) {
         const opStr = formatOpacity(colorObj.op);
         classes.push(`${prefix}${twPrefix}-${colorBase}/${opStr}`);
@@ -1760,7 +1831,7 @@ function transform(szProp, prefix = "", mangleMap) {
       }
       if (rawKey === "decorationThickness" || rawKey === "textDecorationThickness") {
         if (needsArbitraryBrackets(value)) {
-          className += `decoration-[${value}]`;
+          className += `decoration-[${normalizeArbitraryValue(value)}]`;
         } else if (value.startsWith("--")) {
           className += `decoration-(${value})`;
         } else {
@@ -1811,7 +1882,9 @@ function transform(szProp, prefix = "", mangleMap) {
       if (rawKey === "brightness" || rawKey === "contrast" || rawKey === "saturate" || rawKey === "scale" || rawKey === "backdropBrightness" || rawKey === "backdropContrast" || rawKey === "backdropSaturate") {
         const prop = rawKey.startsWith("backdrop") ? `backdrop-${rawKey.slice(8).toLowerCase()}` : rawKey;
         const sValue = String(value);
-        if (sValue.startsWith("--")) {
+        if (sValue === "3d" && rawKey === "scale") {
+          classes.push(`${prefix}scale-3d`);
+        } else if (sValue.startsWith("--")) {
           classes.push(`${prop}-(${sValue})`);
         } else {
           classes.push(`${prop}-[${sValue}]`);
@@ -1851,38 +1924,53 @@ function transform(szProp, prefix = "", mangleMap) {
       if (rawKey === "bgImg") {
         const v = String(value).trim();
         if (v === "none") {
-          classes.push("bg-none");
+          classes.push(`${prefix}bg-none`);
           continue;
         }
         const vNorm = v.startsWith("-") ? v.slice(1) : v;
+        if (vNorm.startsWith("repeating-")) {
+          classes.push(`${prefix}bg-[${normalizeArbitraryValue(v)}]`);
+          continue;
+        }
         if (vNorm.startsWith("linear-") || vNorm.startsWith("radial") || vNorm.startsWith("conic") || vNorm.startsWith("gradient-to-")) {
           const vMapped = vNorm.startsWith("gradient-to-") ? vNorm.replace("gradient-to-", "linear-to-") : vNorm;
           if (v.startsWith("-")) {
-            classes.push(`-bg-${vMapped}`);
+            classes.push(`${prefix}-bg-${vMapped}`);
           } else {
-            classes.push(`bg-${vMapped}`);
+            classes.push(`${prefix}bg-${vMapped}`);
           }
           continue;
         }
         if (v.startsWith("--")) {
-          classes.push(`bg-(image:${v})`);
+          classes.push(`${prefix}bg-(image:${v})`);
           continue;
         }
         if (v.startsWith("url(")) {
-          classes.push(`bg-[${v}]`);
+          classes.push(`${prefix}bg-[${v}]`);
           continue;
         }
-        classes.push(`bg-[url(${v})]`);
+        classes.push(`${prefix}bg-[url(${v})]`);
         continue;
       }
       if (rawKey === "bgPos") {
         const sVal = String(value);
         if (sVal.startsWith("--")) {
-          classes.push(`bg-(${sVal})`);
+          classes.push(`${prefix}bg-(${sVal})`);
         } else if (sVal.includes("_") || needsArbitraryBrackets(sVal)) {
-          classes.push(`bg-[${normalizeArbitraryValue(sVal)}]`);
+          classes.push(`${prefix}bg-[${normalizeArbitraryValue(sVal)}]`);
+        } else {
+          classes.push(`${prefix}bg-${sVal}`);
+        }
+        continue;
+      }
+      if (rawKey === "bgSize") {
+        const sVal = String(value);
+        if (sVal === "auto" || sVal === "cover" || sVal === "contain") {
+          classes.push(`${prefix}bg-${sVal}`);
+        } else if (sVal.startsWith("--")) {
+          classes.push(`${prefix}bg-size-(${sVal})`);
         } else {
-          classes.push(`bg-${sVal}`);
+          classes.push(`${prefix}bg-size-[${normalizeArbitraryValue(sVal)}]`);
         }
         continue;
       }
@@ -1908,7 +1996,8 @@ function transform(szProp, prefix = "", mangleMap) {
         } else if (value === "no-repeat") {
           className += "bg-no-repeat";
         } else {
-          className += `bg-repeat-${value}`;
+          const suffix = value.startsWith("repeat-") ? value.slice(7) : value;
+          className += `bg-repeat-${suffix}`;
         }
         classes.push(className);
         continue;
@@ -1949,7 +2038,8 @@ function transform(szProp, prefix = "", mangleMap) {
         } else if (value.startsWith("--")) {
           className += `content-(${value})`;
         } else {
-          className += `content-[${value}]`;
+          const inner = value.startsWith('"') && value.endsWith('"') && value.length >= 2 ? `'${value.slice(1, -1)}'` : value;
+          className += `content-[${inner}]`;
         }
         classes.push(className);
         continue;
@@ -2002,16 +2092,12 @@ function transform(szProp, prefix = "", mangleMap) {
         const sVal = String(value);
         const prop = PROPERTY_MAP[rawKey] || rawKey;
         if (needsArbitraryBrackets(sVal) || sVal.includes("(") || sVal.includes("_") || sVal.includes("%")) {
-          classes.push(`${prop}-[${normalizeArbitraryValue(sVal)}]`);
+          classes.push(`${className}${prop}-[${normalizeArbitraryValue(sVal)}]`);
           continue;
         }
       }
       if (rawKey === "transformStyle") {
-        if (value === "preserve-3d" || value === "3d") {
-          className += "transform-3d";
-        } else {
-          className += `transform-${value}`;
-        }
+        className += `transform-${value}`;
         classes.push(className);
         continue;
       }
@@ -2022,7 +2108,7 @@ function transform(szProp, prefix = "", mangleMap) {
         } else if (value.startsWith("--")) {
           className += `perspective-(${value})`;
         } else if (needsArbitraryBrackets(value)) {
-          className += `perspective-[${value}]`;
+          className += `perspective-[${normalizeArbitraryValue(value)}]`;
         } else {
           className += `perspective-${value}`;
         }
@@ -2046,7 +2132,7 @@ function transform(szProp, prefix = "", mangleMap) {
       }
     }
     if (process.env.NODE_ENV !== "production" && typeof window === "undefined") {
-      const isKnown = PROPERTY_MAP[rawKey] || BOOLEAN_SHORTHANDS.has(rawKey) || SNAP_DIRECT_MAP[rawKey] || NEEDS_ARBITRARY_PROPERTY.has(key) || rawKey === "fromPos" || rawKey === "viaPos" || rawKey === "toPos" || rawKey.startsWith("--") || rawKey.startsWith("[") || rawKey.startsWith("@") || // Variants that fell through (e.g. empty object)
+      const isKnown = PROPERTY_MAP[rawKey] || BOOLEAN_SHORTHANDS.has(rawKey) || SNAP_DIRECT_MAP[rawKey] || rawKey === "fromPos" || rawKey === "viaPos" || rawKey === "toPos" || rawKey.startsWith("--") || rawKey.startsWith("[") || rawKey.startsWith("@") || // Variants that fell through (e.g. empty object)
       KNOWN_VARIANTS.has(rawKey) || // Groups/Peers
       rawKey === "group" || rawKey === "peer" || // Special variant objects
       rawKey === "has" || rawKey === "not" || rawKey === "data" || rawKey === "aria" || rawKey === "supports" || rawKey === "min" || rawKey === "max";
@@ -2073,6 +2159,11 @@ function transform(szProp, prefix = "", mangleMap) {
       classes.push(className);
       continue;
     }
+    if (rawKey === "animationDelay") {
+      const ms = typeof value === "number" ? `${value}ms` : String(value);
+      classes.push(`${className}[animation-delay:${ms}]`);
+      continue;
+    }
     if (typeof value === "number") {
       if (value < 0 && NEGATIVE_ALLOWED.has(key)) {
         className += `-${key}-${Math.abs(value)}`;
@@ -2085,15 +2176,6 @@ function transform(szProp, prefix = "", mangleMap) {
     if (typeof value === "string") {
       const { value: cleanValue, important } = handleImportant(value);
       let finalValue = cleanValue;
-      if (NEEDS_ARBITRARY_PROPERTY.has(key)) {
-        const arbitraryProp = `[${key}:${finalValue}]`;
-        className += arbitraryProp;
-        if (important) {
-          className += "!";
-        }
-        classes.push(className);
-        continue;
-      }
       if (finalValue.startsWith("--")) {
         const typeHint = CSS_VAR_TYPE_HINTS[rawKey];
         if (typeHint) {
@@ -2182,11 +2264,14 @@ function normalizeClassName(className) {
 // src/transform.ts
 function transformSourceCode(source) {
   let usesRuntime = false;
+  let usesMerge = false;
   let usesColorVar = false;
   let transformed = false;
   const collectedClasses = /* @__PURE__ */ new Set();
+  const rawClassNames = /* @__PURE__ */ new Set();
+  const diagnostics = [];
   if (!source.includes("sz")) {
-    return { code: source, transformed: false, usesRuntime: false, usesColorVar: false, classes: collectedClasses };
+    return { code: source, transformed: false, usesRuntime: false, usesMerge: false, usesColorVar: false, classes: collectedClasses, rawClassNames, diagnostics };
   }
   try {
     const result = babel.transformSync(source, {
@@ -2210,7 +2295,7 @@ function transformSourceCode(source) {
                   if (t.isStringLiteral(val)) {
                     for (const c of val.value.split(/\s+/)) {
                       if (c) {
-                        collectedClasses.add(c);
+                        rawClassNames.add(c);
                       }
                     }
                   }
@@ -2220,6 +2305,99 @@ function transformSourceCode(source) {
                   return;
                 }
                 const value = path.node.value;
+                let existingClassNameNode = null;
+                let existingClassExpr = null;
+                let existingStyleNode = null;
+                let existingStyleExpr = null;
+                if (path.parentPath?.isJSXOpeningElement()) {
+                  for (const attr of path.parentPath.node.attributes) {
+                    if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name)) {
+                      const aName = attr.name;
+                      if (aName.name === "className" || aName.name === "class") {
+                        existingClassNameNode = attr;
+                        const aVal = attr.value;
+                        if (t.isStringLiteral(aVal)) {
+                          existingClassExpr = aVal;
+                        } else if (t.isJSXExpressionContainer(aVal)) {
+                          if (t.isExpression(aVal.expression)) {
+                            existingClassExpr = aVal.expression;
+                          }
+                        }
+                      } else if (aName.name === "style") {
+                        existingStyleNode = attr;
+                        const aVal = attr.value;
+                        if (t.isJSXExpressionContainer(aVal)) {
+                          if (t.isExpression(aVal.expression)) {
+                            existingStyleExpr = aVal.expression;
+                          }
+                        } else if (t.isStringLiteral(aVal)) {
+                          existingStyleExpr = aVal;
+                        }
+                      }
+                    }
+                  }
+                }
+                const createMergedClassNameValue = (szExpr) => {
+                  if (!existingClassExpr) {
+                    return t.isStringLiteral(szExpr) ? szExpr : t.jsxExpressionContainer(szExpr);
+                  }
+                  if (existingClassNameNode && path.parentPath?.isJSXOpeningElement()) {
+                    path.parentPath.node.attributes = path.parentPath.node.attributes.filter(
+                      (a) => a !== existingClassNameNode
+                    );
+                    existingClassNameNode = null;
+                  }
+                  if (t.isStringLiteral(existingClassExpr) && t.isStringLiteral(szExpr)) {
+                    const merged = `${existingClassExpr.value} ${szExpr.value}`.trim();
+                    return t.stringLiteral(merged);
+                  }
+                  usesRuntime = true;
+                  usesMerge = true;
+                  return t.jsxExpressionContainer(
+                    t.callExpression(t.identifier("_szMerge"), [existingClassExpr, szExpr])
+                  );
+                };
+                const mergeAndInjectStyle = (newStyleProps) => {
+                  if (newStyleProps.length === 0) {
+                    return;
+                  }
+                  if (!path.parentPath?.isJSXOpeningElement()) {
+                    return;
+                  }
+                  if (existingStyleNode && existingStyleExpr) {
+                    path.parentPath.node.attributes = path.parentPath.node.attributes.filter(
+                      (a) => a !== existingStyleNode
+                    );
+                    existingStyleNode = null;
+                    if (t.isObjectExpression(existingStyleExpr)) {
+                      existingStyleExpr.properties.push(...newStyleProps);
+                      path.parentPath.node.attributes.push(
+                        t.jsxAttribute(t.jsxIdentifier("style"), t.jsxExpressionContainer(existingStyleExpr))
+                      );
+                    } else if (t.isStringLiteral(existingStyleExpr)) {
+                      const parsedOldProps = parseStyleStringToObjectExpr(existingStyleExpr.value).properties;
+                      path.parentPath.node.attributes.push(
+                        t.jsxAttribute(t.jsxIdentifier("style"), t.jsxExpressionContainer(
+                          t.objectExpression([...parsedOldProps, ...newStyleProps])
+                        ))
+                      );
+                    } else {
+                      const mergedStyle = t.objectExpression([
+                        t.spreadElement(existingStyleExpr),
+                        ...newStyleProps
+                      ]);
+                      path.parentPath.node.attributes.push(
+                        t.jsxAttribute(t.jsxIdentifier("style"), t.jsxExpressionContainer(mergedStyle))
+                      );
+                    }
+                  } else {
+                    path.parentPath.node.attributes.push(
+                      t.jsxAttribute(t.jsxIdentifier("style"), t.jsxExpressionContainer(t.objectExpression(newStyleProps)))
+                    );
+                    existingStyleExpr = t.objectExpression(newStyleProps);
+                    existingStyleNode = path.parentPath.node.attributes[path.parentPath.node.attributes.length - 1];
+                  }
+                };
                 if (t.isStringLiteral(value)) {
                   path.node.name.name = "className";
                   for (const c of value.value.split(/\s+/)) {
@@ -2227,13 +2405,16 @@ function transformSourceCode(source) {
                       collectedClasses.add(c);
                     }
                   }
+                  path.node.value = createMergedClassNameValue(value);
                   transformed = true;
                   return;
                 }
                 if (t.isJSXExpressionContainer(value)) {
                   const expression = value.expression;
                   if (t.isObjectExpression(expression)) {
-                    const staticObject = evaluateStaticObject(expression);
+                    const getBinding = (name) => path.scope.getBinding(name);
+                    const flatExpression = resolveObjectSpreads(expression, getBinding) ?? expression;
+                    const staticObject = evaluateStaticObject(flatExpression);
                     if (staticObject !== null) {
                       const { className, attributes } = transform(staticObject);
                       for (const c of className.split(/\s+/)) {
@@ -2242,22 +2423,35 @@ function transformSourceCode(source) {
                         }
                       }
                       path.node.name.name = "className";
-                      path.node.value = t.stringLiteral(className);
+                      path.node.value = createMergedClassNameValue(t.stringLiteral(className));
                       Object.entries(attributes).forEach(([key, val]) => {
                         if (path.parentPath?.isJSXOpeningElement()) {
-                          path.parentPath.node.attributes.push(
-                            t.jsxAttribute(
-                              t.jsxIdentifier(key),
-                              t.stringLiteral(val)
-                            )
-                          );
+                          if (key === "style") {
+                            const newProps = parseStyleStringToObjectExpr(val).properties;
+                            mergeAndInjectStyle(newProps);
+                          } else {
+                            path.parentPath.node.attributes.push(
+                              t.jsxAttribute(
+                                t.jsxIdentifier(key),
+                                t.stringLiteral(val)
+                              )
+                            );
+                          }
                         }
                       });
                       transformed = true;
                       return;
                     }
-                    const partial = evaluatePartialObject(expression);
-                    if (partial !== null && !partial.hasSpread && partial.dynamicProps.size > 0) {
+                    const hoisted = tryHoistConditionalSpread(expression, getBinding);
+                    if (hoisted !== null) {
+                      path.node.name.name = "className";
+                      path.node.value = createMergedClassNameValue(hoisted);
+                      collectFromExpr(hoisted, collectedClasses);
+                      transformed = true;
+                      return;
+                    }
+                    const partial = evaluatePartialObject(flatExpression);
+                    if (partial !== null && !partial.hasSpread && (partial.dynamicProps.size > 0 || partial.conditionalClasses.length > 0)) {
                       const staticClasses = [];
                       if (Object.keys(partial.staticProps).length > 0) {
                         const { className: sc } = transform(partial.staticProps);
@@ -2278,23 +2472,28 @@ function transformSourceCode(source) {
                           )
                         );
                       }
-                      const allClasses = [...staticClasses, ...partial.rawClasses, ...cssVarClasses].join(" ");
-                      for (const c of allClasses.split(/\s+/)) {
+                      const baseClasses = [...staticClasses, ...partial.rawClasses, ...cssVarClasses].join(" ");
+                      for (const c of baseClasses.split(/\s+/)) {
                         if (c) {
                           collectedClasses.add(c);
                         }
                       }
-                      path.node.name.name = "className";
-                      path.node.value = t.stringLiteral(allClasses);
-                      if (styleProps.length > 0 && path.parentPath?.isJSXOpeningElement()) {
-                        const styleAttr = t.jsxAttribute(
-                          t.jsxIdentifier("style"),
-                          t.jsxExpressionContainer(
-                            t.objectExpression(styleProps)
-                          )
-                        );
-                        path.parentPath.node.attributes.push(styleAttr);
+                      for (const cc of partial.conditionalClasses) {
+                        for (const c of cc.consequent.split(/\s+/)) {
+                          if (c) {
+                            collectedClasses.add(c);
+                          }
+                        }
+                        for (const c of cc.alternate.split(/\s+/)) {
+                          if (c) {
+                            collectedClasses.add(c);
+                          }
+                        }
                       }
+                      const classExpr = partial.conditionalClasses.length > 0 ? buildConditionalClassExpr(baseClasses, partial.conditionalClasses) : t.stringLiteral(baseClasses);
+                      path.node.name.name = "className";
+                      path.node.value = createMergedClassNameValue(classExpr);
+                      mergeAndInjectStyle(styleProps);
                       if (partial.usesColorVar) {
                         usesColorVar = true;
                       }
@@ -2307,18 +2506,19 @@ function transformSourceCode(source) {
                     if (binding && binding.path.isVariableDeclarator()) {
                       const init2 = binding.path.node.init;
                       if (init2) {
-                        const resolved = tryStaticTransformNode(init2);
+                        const gbIdent = (name) => path.scope.getBinding(name);
+                        const resolved = tryStaticTransformNode(init2, gbIdent);
                         if (resolved !== null) {
                           path.node.name.name = "className";
                           if (t.isStringLiteral(resolved)) {
-                            path.node.value = resolved;
+                            path.node.value = createMergedClassNameValue(resolved);
                             for (const c of resolved.value.split(/\s+/)) {
                               if (c) {
                                 collectedClasses.add(c);
                               }
                             }
                           } else {
-                            value.expression = resolved;
+                            path.node.value = createMergedClassNameValue(resolved);
                             collectFromExpr(resolved, collectedClasses);
                           }
                           transformed = true;
@@ -2328,33 +2528,267 @@ function transformSourceCode(source) {
                     }
                   }
                   if (t.isConditionalExpression(expression)) {
-                    const resolved = tryStaticTransformNode(expression);
+                    const gbCond = (name) => path.scope.getBinding(name);
+                    const resolved = tryStaticTransformNode(expression, gbCond);
                     if (resolved !== null) {
                       path.node.name.name = "className";
                       if (t.isStringLiteral(resolved)) {
-                        path.node.value = resolved;
+                        path.node.value = createMergedClassNameValue(resolved);
                         for (const c of resolved.value.split(/\s+/)) {
                           if (c) {
                             collectedClasses.add(c);
                           }
                         }
                       } else {
-                        value.expression = resolved;
+                        path.node.value = createMergedClassNameValue(resolved);
                         collectFromExpr(resolved, collectedClasses);
                       }
                       transformed = true;
                       return;
                     }
                   }
+                  if (t.isArrayExpression(expression)) {
+                    const parts = [];
+                    let hasRuntime = false;
+                    const getBindingForArray = (name) => path.scope.getBinding(name);
+                    for (const element of expression.elements) {
+                      if (element === null) {
+                        continue;
+                      }
+                      if (t.isBooleanLiteral(element) && !element.value) {
+                        continue;
+                      }
+                      if (t.isNullLiteral(element)) {
+                        continue;
+                      }
+                      if (t.isIdentifier(element) && element.name === "undefined") {
+                        continue;
+                      }
+                      if (t.isLogicalExpression(element) && element.operator === "&&") {
+                        const resolved2 = tryStaticTransformNode(element.right, getBindingForArray);
+                        if (resolved2 !== null && t.isStringLiteral(resolved2)) {
+                          if (resolved2.value) {
+                            parts.push(t.logicalExpression("&&", element.left, resolved2));
+                            for (const c of resolved2.value.split(/\s+/)) {
+                              if (c) {
+                                collectedClasses.add(c);
+                              }
+                            }
+                            hasRuntime = true;
+                          }
+                          continue;
+                        }
+                        parts.push(element);
+                        hasRuntime = true;
+                        continue;
+                      }
+                      const resolved = tryStaticTransformNode(element, getBindingForArray);
+                      if (resolved !== null) {
+                        if (t.isStringLiteral(resolved)) {
+                          if (resolved.value) {
+                            parts.push(resolved);
+                            for (const c of resolved.value.split(/\s+/)) {
+                              if (c) {
+                                collectedClasses.add(c);
+                              }
+                            }
+                          }
+                        } else {
+                          parts.push(resolved);
+                          collectFromExpr(resolved, collectedClasses);
+                          hasRuntime = true;
+                        }
+                      } else {
+                        parts.push(element);
+                        hasRuntime = true;
+                      }
+                    }
+                    path.node.name.name = "className";
+                    if (parts.length === 0) {
+                      path.node.value = createMergedClassNameValue(t.stringLiteral(""));
+                    } else if (!hasRuntime) {
+                      const merged = parts.map((p) => p.value).filter(Boolean).join(" ");
+                      path.node.value = createMergedClassNameValue(t.stringLiteral(merged));
+                    } else {
+                      if (existingClassExpr) {
+                        parts.unshift(existingClassExpr);
+                        if (existingClassNameNode && path.parentPath?.isJSXOpeningElement()) {
+                          path.parentPath.node.attributes = path.parentPath.node.attributes.filter(
+                            (a) => a !== existingClassNameNode
+                          );
+                          existingClassNameNode = null;
+                        }
+                      }
+                      const szCall2 = t.callExpression(
+                        t.identifier("_szMerge"),
+                        parts
+                      );
+                      path.node.value = t.jsxExpressionContainer(szCall2);
+                      usesMerge = true;
+                      usesRuntime = true;
+                    }
+                    transformed = true;
+                    return;
+                  }
+                  const loc = expression.loc;
+                  const lineCol = loc ? `${loc.start.line}:${loc.start.column + 1}` : "?";
+                  let reason, suggestion;
+                  if (t.isCallExpression(expression)) {
+                    const callee = expression.callee;
+                    const name = t.isIdentifier(callee) ? callee.name : t.isMemberExpression(callee) && t.isIdentifier(callee.property) ? callee.property.name : "?";
+                    reason = `function call \`${name}()\` result is unknown at build time`;
+                    suggestion = "If it returns static variants \u2192 convert to szv(). If it depends on runtime data \u2192 use dynamic().";
+                  } else if (t.isIdentifier(expression)) {
+                    reason = `identifier \`${expression.name}\` could not be resolved to a static value`;
+                    suggestion = "Make sure it's a module-level or function-body const with a literal object value. For variant-based styling \u2192 szv(). For true runtime values \u2192 dynamic().";
+                  } else if (t.isMemberExpression(expression)) {
+                    reason = "member expression is not statically resolvable";
+                    suggestion = "Extract the value to a module-level const. For variant-based styling \u2192 szv(). For true runtime values \u2192 dynamic().";
+                  } else {
+                    reason = `expression of type \`${expression.type}\` is not statically analyzable`;
+                    suggestion = "Use a literal sz object or a module-level const. For variant-based styling \u2192 szv(). For true runtime values \u2192 dynamic().";
+                  }
+                  diagnostics.push(`sz fallback at ${lineCol}: ${reason}.
+  Suggestion: ${suggestion}`);
                   path.node.name.name = "className";
                   const szCall = t.callExpression(
                     t.identifier("_sz"),
                     [expression]
                   );
-                  value.expression = szCall;
+                  path.node.value = createMergedClassNameValue(szCall);
                   usesRuntime = true;
                   transformed = true;
                 }
+              },
+              // ── szv catalog extraction ────────────────────────────────────────
+              // When the compiler sees `const X = szv({...})` with a static config,
+              // it emits a no-op catalog array so Tailwind JIT can scan all variant
+              // class strings — even when szv is called at runtime with dynamic args.
+              VariableDeclarator(path) {
+                const init2 = path.node.init;
+                if (!t.isCallExpression(init2)) {
+                  return;
+                }
+                if (!t.isIdentifier(init2.callee) || init2.callee.name !== "szv") {
+                  return;
+                }
+                if (init2.arguments.length === 0) {
+                  return;
+                }
+                if (!t.isIdentifier(path.node.id)) {
+                  return;
+                }
+                const configArg = init2.arguments[0];
+                if (!t.isObjectExpression(configArg)) {
+                  return;
+                }
+                const config = evaluateStaticObject(configArg);
+                if (!config) {
+                  return;
+                }
+                const base = config.base ?? {};
+                const variants = config.variants ?? {};
+                const classStrings = [];
+                const baseResult = transform(base);
+                const baseCls = typeof baseResult === "string" ? baseResult : baseResult.className;
+                if (baseCls) {
+                  classStrings.push(baseCls);
+                }
+                for (const variantValues of Object.values(variants)) {
+                  for (const variantObj of Object.values(variantValues)) {
+                    if (!variantObj || typeof variantObj !== "object") {
+                      continue;
+                    }
+                    const merged = { ...base, ...variantObj };
+                    const result2 = transform(merged);
+                    const cls = typeof result2 === "string" ? result2 : result2.className;
+                    if (cls) {
+                      classStrings.push(cls);
+                    }
+                  }
+                }
+                if (classStrings.length === 0) {
+                  return;
+                }
+                for (const combined of classStrings) {
+                  for (const c of combined.split(/\s+/)) {
+                    if (c) {
+                      collectedClasses.add(c);
+                    }
+                  }
+                }
+                const catalogDecl = t.variableDeclaration("const", [
+                  t.variableDeclarator(
+                    t.identifier(`_szv_catalog_${path.node.id.name}`),
+                    t.arrayExpression(classStrings.map((s) => t.stringLiteral(s)))
+                  )
+                ]);
+                const parentPath = path.parentPath;
+                if (parentPath && t.isVariableDeclaration(parentPath.node)) {
+                  parentPath.insertAfter(catalogDecl);
+                  transformed = true;
+                }
+              },
+              // ── dynamic() literal extraction ──────────────────────────────────
+              // Detects `dynamic({...})` and `dynamic(CONST_IDENTIFIER)` calls
+              // with statically-analyzable arguments and adds the resulting
+              // class tokens to collectedClasses so prescanAndWriteClasses()
+              // includes them in csszyx-classes.html for Tailwind to scan.
+              // This means dynamic() with static/const args works in Astro SSR
+              // without needing client:* directives.
+              CallExpression(path) {
+                const callee = path.node.callee;
+                if (!t.isIdentifier(callee) || callee.name !== "dynamic") {
+                  return;
+                }
+                if (path.node.arguments.length === 0) {
+                  return;
+                }
+                const arg = path.node.arguments[0];
+                if (t.isObjectExpression(arg)) {
+                  const staticObj = evaluateStaticObject(arg);
+                  if (!staticObj) {
+                    return;
+                  }
+                  const { className } = transform(staticObj);
+                  for (const c of className.split(/\s+/)) {
+                    if (c) {
+                      collectedClasses.add(c);
+                    }
+                  }
+                  return;
+                }
+                let argExpr = arg;
+                while (t.isTSAsExpression(argExpr) || t.isTSSatisfiesExpression(argExpr)) {
+                  argExpr = argExpr.expression;
+                }
+                if (t.isIdentifier(argExpr)) {
+                  const binding = path.scope.getBinding(argExpr.name);
+                  if (!binding) {
+                    return;
+                  }
+                  const declarator = binding.path.node;
+                  if (!t.isVariableDeclarator(declarator) || !declarator.init) {
+                    return;
+                  }
+                  let initExpr = declarator.init;
+                  while (t.isTSAsExpression(initExpr) || t.isTSSatisfiesExpression(initExpr)) {
+                    initExpr = initExpr.expression;
+                  }
+                  if (!t.isObjectExpression(initExpr)) {
+                    return;
+                  }
+                  const staticObj = evaluateStaticObject(initExpr);
+                  if (!staticObj) {
+                    return;
+                  }
+                  const { className } = transform(staticObj);
+                  for (const c of className.split(/\s+/)) {
+                    if (c) {
+                      collectedClasses.add(c);
+                    }
+                  }
+                }
               }
             }
           };
@@ -2365,29 +2799,72 @@ function transformSourceCode(source) {
       code: result?.code || source,
       transformed,
       usesRuntime,
+      usesMerge,
       usesColorVar,
-      classes: collectedClasses
+      classes: collectedClasses,
+      rawClassNames,
+      diagnostics
     };
   } catch (e) {
     console.warn("[csszyx] AST transform failed, falling back to original code:", e);
-    return { code: source, transformed: false, usesRuntime: false, usesColorVar: false, classes: collectedClasses };
+    return { code: source, transformed: false, usesRuntime: false, usesMerge: false, usesColorVar: false, classes: collectedClasses, rawClassNames, diagnostics };
   }
 }
-function tryStaticTransformNode(node) {
+function parseStyleStringToObjectExpr(styleStr) {
+  const props = styleStr.split(";").map((s) => s.trim()).filter(Boolean);
+  const objProps = [];
+  for (const prop of props) {
+    const idx = prop.indexOf(":");
+    if (idx > -1) {
+      const k = prop.slice(0, idx).trim();
+      const v = prop.slice(idx + 1).trim();
+      let keyNode;
+      if (k.startsWith("--")) {
+        keyNode = t.stringLiteral(k);
+      } else {
+        const camel = k.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+        keyNode = t.identifier(camel);
+      }
+      objProps.push(t.objectProperty(keyNode, t.stringLiteral(v)));
+    }
+  }
+  return t.objectExpression(objProps);
+}
+function tryStaticTransformNode(node, getBinding) {
+  if (t.isTSAsExpression(node) || t.isTSSatisfiesExpression(node)) {
+    return tryStaticTransformNode(node.expression, getBinding);
+  }
   if (t.isObjectExpression(node)) {
-    const staticObj = evaluateStaticObject(node);
+    const resolved = getBinding ? resolveObjectSpreads(node, getBinding) ?? node : node;
+    const staticObj = evaluateStaticObject(resolved);
     if (staticObj !== null) {
       const { className } = transform(staticObj);
       return t.stringLiteral(className);
     }
+    if (getBinding) {
+      const hoisted = tryHoistConditionalSpread(node, getBinding);
+      if (hoisted !== null) {
+        return hoisted;
+      }
+    }
     return null;
   }
   if (t.isStringLiteral(node)) {
     return node;
   }
+  if (t.isIdentifier(node) && getBinding) {
+    const binding = getBinding(node.name);
+    if (binding && binding.path.isVariableDeclarator()) {
+      const init2 = binding.path.node.init;
+      if (init2) {
+        return tryStaticTransformNode(init2, getBinding);
+      }
+    }
+    return null;
+  }
   if (t.isConditionalExpression(node)) {
-    const consequent = tryStaticTransformNode(node.consequent);
-    const alternate = tryStaticTransformNode(node.alternate);
+    const consequent = tryStaticTransformNode(node.consequent, getBinding);
+    const alternate = tryStaticTransformNode(node.alternate, getBinding);
     if (consequent !== null && alternate !== null) {
       return t.conditionalExpression(node.test, consequent, alternate);
     }
@@ -2395,6 +2872,39 @@ function tryStaticTransformNode(node) {
   }
   return null;
 }
+function tryHoistConditionalSpread(node, getBinding) {
+  let conditionalSpreadIdx = -1;
+  let conditionalExpr = null;
+  for (let i = 0; i < node.properties.length; i++) {
+    const prop = node.properties[i];
+    if (!t.isSpreadElement(prop)) {
+      continue;
+    }
+    if (t.isConditionalExpression(prop.argument)) {
+      if (conditionalSpreadIdx !== -1) {
+        return null;
+      }
+      conditionalSpreadIdx = i;
+      conditionalExpr = prop.argument;
+    } else {
+      return null;
+    }
+  }
+  if (conditionalSpreadIdx === -1 || conditionalExpr === null) {
+    return null;
+  }
+  const otherProps = node.properties.filter((_, i) => i !== conditionalSpreadIdx);
+  const mkObj = (branch) => t.objectExpression([t.spreadElement(branch), ...otherProps]);
+  const resolvedA = tryStaticTransformNode(mkObj(conditionalExpr.consequent), getBinding);
+  const resolvedB = tryStaticTransformNode(mkObj(conditionalExpr.alternate), getBinding);
+  if (!resolvedA || !resolvedB) {
+    return null;
+  }
+  if (!t.isStringLiteral(resolvedA) || !t.isStringLiteral(resolvedB)) {
+    return null;
+  }
+  return t.conditionalExpression(conditionalExpr.test, resolvedA, resolvedB);
+}
 function evaluateStaticObject(node) {
   const result = {};
   for (const prop of node.properties) {
@@ -2409,6 +2919,8 @@ function evaluateStaticObject(node) {
       key = prop.key.name;
     } else if (t.isStringLiteral(prop.key)) {
       key = prop.key.value;
+    } else if (t.isNumericLiteral(prop.key)) {
+      key = String(prop.key.value);
     } else {
       return null;
     }
@@ -2433,10 +2945,82 @@ function evaluateStaticObject(node) {
   }
   return result;
 }
+function resolveObjectSpreads(node, getBinding) {
+  const newProps = [];
+  for (const prop of node.properties) {
+    if (!t.isSpreadElement(prop)) {
+      if (t.isObjectProperty(prop) && t.isObjectExpression(prop.value)) {
+        const resolvedValue = resolveObjectSpreads(prop.value, getBinding);
+        if (resolvedValue === null) {
+          return null;
+        }
+        newProps.push(t.objectProperty(prop.key, resolvedValue, prop.computed, prop.shorthand));
+      } else {
+        newProps.push(prop);
+      }
+      continue;
+    }
+    const arg = prop.argument;
+    if (!t.isIdentifier(arg)) {
+      return null;
+    }
+    const binding = getBinding(arg.name);
+    if (!binding || !binding.path.isVariableDeclarator()) {
+      return null;
+    }
+    let init2 = binding.path.node.init;
+    if (t.isTSAsExpression(init2) || t.isTSSatisfiesExpression(init2)) {
+      init2 = init2.expression;
+    }
+    if (!t.isObjectExpression(init2)) {
+      return null;
+    }
+    const inner = resolveObjectSpreads(init2, getBinding);
+    if (inner === null) {
+      return null;
+    }
+    newProps.push(...inner.properties);
+  }
+  return t.objectExpression(newProps);
+}
+function extractStaticLiteralValue(node) {
+  if (t.isStringLiteral(node)) {
+    return node.value;
+  }
+  if (t.isNumericLiteral(node)) {
+    return node.value;
+  }
+  if (t.isBooleanLiteral(node)) {
+    return node.value;
+  }
+  if (t.isUnaryExpression(node) && node.operator === "-" && t.isNumericLiteral(node.argument)) {
+    return -node.argument.value;
+  }
+  return null;
+}
+function buildConditionalClassExpr(baseClasses, conditionalClasses) {
+  if (conditionalClasses.length === 0) {
+    return t.stringLiteral(baseClasses);
+  }
+  const makeCondExpr = (cc) => t.conditionalExpression(cc.test, t.stringLiteral(cc.consequent), t.stringLiteral(cc.alternate));
+  if (conditionalClasses.length === 1 && !baseClasses) {
+    return makeCondExpr(conditionalClasses[0]);
+  }
+  const quasis = [];
+  const exprs = [];
+  for (let i = 0; i < conditionalClasses.length; i++) {
+    const prefix = i === 0 ? baseClasses ? baseClasses + " " : "" : " ";
+    quasis.push(t.templateElement({ raw: prefix, cooked: prefix }, false));
+    exprs.push(makeCondExpr(conditionalClasses[i]));
+  }
+  quasis.push(t.templateElement({ raw: "", cooked: "" }, true));
+  return t.templateLiteral(quasis, exprs);
+}
 function evaluatePartialObject(node, variantChain = "") {
   const staticProps = {};
   const dynamicProps = /* @__PURE__ */ new Map();
   const rawClasses = [];
+  const conditionalClasses = [];
   let usesColorVar = false;
   for (const prop of node.properties) {
     if (t.isSpreadElement(prop)) {
@@ -2453,6 +3037,8 @@ function evaluatePartialObject(node, variantChain = "") {
       key = prop.key.name;
     } else if (t.isStringLiteral(prop.key)) {
       key = prop.key.value;
+    } else if (t.isNumericLiteral(prop.key)) {
+      key = String(prop.key.value);
     } else {
       return null;
     }
@@ -2495,7 +3081,7 @@ function evaluatePartialObject(node, variantChain = "") {
               staticProps[key] = { color: colorStr, op: opVal };
             } else if (t.isExpression(opProp.value)) {
               const variantPfx = variantChain ? `${variantChain}:` : "";
-              rawClasses.push(`${variantPfx}${twPrefix}-${colorStr}/[var(${opVarName})]`);
+              rawClasses.push(`${variantPfx}${twPrefix}-${colorStr}/(${opVarName})`);
               dynamicProps.set(uniqueKey, {
                 expression: opProp.value,
                 category: 3 /* UNITLESS */,
@@ -2534,6 +3120,7 @@ function evaluatePartialObject(node, variantChain = "") {
               dynamicProps.set(k, v);
             }
             rawClasses.push(...nestedResult.rawClasses);
+            conditionalClasses.push(...nestedResult.conditionalClasses);
             if (nestedResult.usesColorVar) {
               usesColorVar = true;
             }
@@ -2542,6 +3129,25 @@ function evaluatePartialObject(node, variantChain = "") {
           }
         }
       }
+    } else if (t.isConditionalExpression(value)) {
+      const consVal = extractStaticLiteralValue(value.consequent);
+      const altVal = extractStaticLiteralValue(value.alternate);
+      if (consVal !== null && altVal !== null) {
+        const { className: classA } = transform({ [key]: consVal });
+        const { className: classB } = transform({ [key]: altVal });
+        const vPfx = variantChain ? getVariantPrefix(variantChain) + ":" : "";
+        const prefixed = (cls) => vPfx ? cls.split(/\s+/).filter(Boolean).map((c) => vPfx + c).join(" ") : cls;
+        conditionalClasses.push({ test: value.test, consequent: prefixed(classA), alternate: prefixed(classB) });
+      } else {
+        const twPrefix = PROPERTY_MAP[key] || key.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+        const category = getPropertyCategory(key);
+        const varName = getCSSVariableName(key, variantChain || void 0);
+        const uniqueKey = variantChain ? `${variantChain}-${key}` : key;
+        if (COLOR_PROPERTIES.has(key)) {
+          usesColorVar = true;
+        }
+        dynamicProps.set(uniqueKey, { expression: value, category, varName, twPrefix, variantChain: variantChain || "" });
+      }
     } else if (t.isExpression(value)) {
       const twPrefix = PROPERTY_MAP[key] || key.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
       const category = getPropertyCategory(key);
@@ -2561,7 +3167,7 @@ function evaluatePartialObject(node, variantChain = "") {
       return null;
     }
   }
-  return { staticProps, dynamicProps, rawClasses, hasSpread: false, usesColorVar };
+  return { staticProps, dynamicProps, rawClasses, conditionalClasses, hasSpread: false, usesColorVar };
 }
 function generateStyleValueExpression(info) {
   const { expression, category } = info;
@@ -2624,7 +3230,7 @@ function collectFromExpr(node, classes) {
 function buildCSSVarClassName(info) {
   const { twPrefix, varName, variantChain } = info;
   const variantPrefix = variantChain ? `${getVariantPrefix(variantChain)}:` : "";
-  return `${variantPrefix}${twPrefix}-[var(${varName})]`;
+  return `${variantPrefix}${twPrefix}-(${varName})`;
 }
 
 // src/compiler.ts
@@ -3089,12 +3695,16 @@ function mergeOptions(options = {}) {
   };
 }
 export {
+  BOOLEAN_SHORTHANDS,
   COLOR_PROPERTIES,
   CsszyxCompiler,
   DEFAULT_COMPILER_OPTIONS,
+  KNOWN_VARIANTS,
   ManifestBuilder,
   PROPERTY_CATEGORY_MAP,
+  PROPERTY_MAP,
   PropertyCategory,
+  SUGGESTION_MAP,
   VERSION,
   buildParentMap,
   createRecoveryToken,