@csszyx/compiler 0.10.9 → 0.10.11

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const core = require('@csszyx/core');
-const transformCore = require('./shared/compiler.mibv6qPF.cjs');
+const transformCore = require('./shared/compiler.dkTeNO_S.cjs');
 const oxcParser = require('oxc-parser');
 const t = require('@babel/types');
 const node_crypto = require('node:crypto');
@@ -81,6 +81,7 @@ function transformSourceCode(source, filename, options) {
   let usesColorVar = false;
   let transformed = false;
   const collectedClasses = /* @__PURE__ */ new Set();
+  const szsPendingClasses = [];
   const rawClassNames = /* @__PURE__ */ new Set();
   const diagnostics = [];
   const recoveryTokens = /* @__PURE__ */ new Map();
@@ -200,6 +201,70 @@ function transformSourceCode(source, filename, options) {
                 transformed = true;
                 return;
               }
+              if (attrName === "szs") {
+                const openingEl = path.parentPath?.isJSXOpeningElement() ? path.parentPath.node : null;
+                if (openingEl && isHostElementName(openingEl.name)) {
+                  diagnostics.push(
+                    `[csszyx] szs at ${filename ?? "<anonymous>"}: szs has no effect on a host element \u2014 it maps slot names of a custom component. Attribute left unchanged.`
+                  );
+                  return;
+                }
+                const container = path.node.value;
+                if (!t__namespace.isJSXExpressionContainer(container) || !t__namespace.isObjectExpression(container.expression)) {
+                  diagnostics.push(szsUnsupportedMessage$1(filename));
+                  return;
+                }
+                const slotMap = container.expression;
+                if (!isValidSzsSlotMap$1(slotMap)) {
+                  diagnostics.push(szsUnsupportedMessage$1(filename));
+                  return;
+                }
+                transformCore.setSzWarnLocation(
+                  transformCore.formatSzWarnLocation(
+                    filename ?? "file.tsx",
+                    path.node.loc?.start.line,
+                    options?.rootDir
+                  )
+                );
+                const compiledSlots = [];
+                for (const prop of slotMap.properties) {
+                  const slot = prop;
+                  if (t__namespace.isStringLiteral(slot.value)) {
+                    compiledSlots.push({
+                      slot,
+                      classes: slot.value.value,
+                      rewrite: false
+                    });
+                    continue;
+                  }
+                  const compiled = tryStaticTransformNode(slot.value);
+                  if (!compiled || !t__namespace.isStringLiteral(compiled)) {
+                    diagnostics.push(szsUnsupportedMessage$1(filename));
+                    return;
+                  }
+                  compiledSlots.push({
+                    slot,
+                    classes: compiled.value,
+                    rewrite: true
+                  });
+                }
+                for (const {
+                  slot,
+                  classes: slotClasses,
+                  rewrite
+                } of compiledSlots) {
+                  if (rewrite) {
+                    slot.value = t__namespace.stringLiteral(slotClasses);
+                    transformed = true;
+                  }
+                  for (const c of slotClasses.split(/\s+/)) {
+                    if (c) {
+                      szsPendingClasses.push(c);
+                    }
+                  }
+                }
+                return;
+              }
               if (attrName !== "sz") {
                 return;
               }
@@ -724,22 +789,23 @@ function transformSourceCode(source, filename, options) {
                 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.
+            // ── dynamic() / szr() literal extraction ─────────────────────────
+            // Detects `dynamic({...})` / `szr({...})` and their
+            // `(CONST_IDENTIFIER)` forms with statically-analyzable arguments
+            // and adds the resulting class tokens to collectedClasses so
+            // prescanAndWriteClasses() includes them in csszyx-classes.html
+            // for Tailwind to scan. A bare static `szr({...})` type-checks and
+            // resolves at runtime, so without this its classes were silently
+            // dead under Tailwind `source(none)`.
             CallExpression(path) {
               const callee = path.node.callee;
-              if (!t__namespace.isIdentifier(callee) || callee.name !== "dynamic") {
+              if (!t__namespace.isIdentifier(callee) || callee.name !== "dynamic" && callee.name !== "szr") {
                 return;
               }
               if (path.node.arguments.length === 0) {
                 return;
               }
-              const arg = path.node.arguments[0];
+              const arg = unwrapTsExpression(path.node.arguments[0]);
               if (t__namespace.isObjectExpression(arg)) {
                 const staticObj = evaluateStaticObject(arg);
                 if (!staticObj) {
@@ -753,10 +819,7 @@ function transformSourceCode(source, filename, options) {
                 }
                 return;
               }
-              let argExpr = arg;
-              while (t__namespace.isTSAsExpression(argExpr) || t__namespace.isTSSatisfiesExpression(argExpr)) {
-                argExpr = argExpr.expression;
-              }
+              const argExpr = arg;
               if (t__namespace.isIdentifier(argExpr)) {
                 const binding = path.scope.getBinding(argExpr.name);
                 if (!binding) {
@@ -789,6 +852,9 @@ function transformSourceCode(source, filename, options) {
         })
       ]
     });
+    for (const c of szsPendingClasses) {
+      collectedClasses.add(c);
+    }
     return {
       code: result?.code || source,
       transformed,
@@ -840,6 +906,31 @@ function parseStyleStringToObjectExpr(styleStr) {
   }
   return t__namespace.objectExpression(objProps);
 }
+function isHostElementName(name) {
+  return t__namespace.isJSXIdentifier(name) && /^[a-z]/.test(name.name);
+}
+function szsUnsupportedMessage$1(filename) {
+  return `[csszyx] szs at ${filename ?? "<anonymous>"}: every slot must be an identifier key with a static object literal (or class string) value. Attribute left unchanged.`;
+}
+function isPureLiteralSzValue$1(node) {
+  if (t__namespace.isStringLiteral(node) || t__namespace.isNumericLiteral(node) || t__namespace.isBooleanLiteral(node)) {
+    return true;
+  }
+  if (t__namespace.isUnaryExpression(node) && node.operator === "-" && t__namespace.isNumericLiteral(node.argument)) {
+    return true;
+  }
+  if (t__namespace.isObjectExpression(node)) {
+    return node.properties.every(
+      (prop) => t__namespace.isObjectProperty(prop) && !prop.computed && t__namespace.isIdentifier(prop.key) && isPureLiteralSzValue$1(prop.value)
+    );
+  }
+  return false;
+}
+function isValidSzsSlotMap$1(slotMap) {
+  return slotMap.properties.every(
+    (prop) => t__namespace.isObjectProperty(prop) && !prop.computed && t__namespace.isIdentifier(prop.key) && (t__namespace.isStringLiteral(prop.value) || t__namespace.isObjectExpression(prop.value) && isPureLiteralSzValue$1(prop.value))
+  );
+}
 function emptyClassToUndefined(node) {
   return t__namespace.isStringLiteral(node) && node.value === "" ? t__namespace.identifier("undefined") : node;
 }
@@ -967,22 +1058,44 @@ function tryHoistNestedConditional(node, getBinding) {
   if (topLevel !== 0 || nested !== 1 || test === null) {
     return null;
   }
+  const condPropIndex = node.properties.findIndex(
+    (prop) => t__namespace.isObjectProperty(prop) && t__namespace.isObjectExpression(prop.value) && countAllConditionals(prop.value) === 1
+  );
+  if (condPropIndex === -1) {
+    return null;
+  }
+  const staticNode = t__namespace.objectExpression(node.properties.filter((_, i) => i !== condPropIndex));
+  const condNode = t__namespace.objectExpression([node.properties[condPropIndex]]);
+  const staticClasses = staticNode.properties.length > 0 ? tryStaticTransformNode(staticNode, getBinding) : null;
   const consequent = tryStaticTransformNode(
-    cloneObjectPickingBranch(node, "consequent"),
+    cloneObjectPickingBranch(condNode, "consequent"),
     getBinding
   );
   const alternate = tryStaticTransformNode(
-    cloneObjectPickingBranch(node, "alternate"),
+    cloneObjectPickingBranch(condNode, "alternate"),
     getBinding
   );
-  if (!consequent || !alternate || !t__namespace.isStringLiteral(consequent) || !t__namespace.isStringLiteral(alternate)) {
+  if (!consequent || !alternate || !t__namespace.isStringLiteral(consequent) || !t__namespace.isStringLiteral(alternate) || staticNode.properties.length > 0 && (!staticClasses || !t__namespace.isStringLiteral(staticClasses))) {
     return null;
   }
-  return t__namespace.conditionalExpression(
+  const ternary = t__namespace.conditionalExpression(
     test,
     emptyClassToUndefined(consequent),
     emptyClassToUndefined(alternate)
   );
+  if (!staticClasses || !t__namespace.isStringLiteral(staticClasses) || staticClasses.value === "") {
+    return ternary;
+  }
+  return t__namespace.templateLiteral(
+    [
+      t__namespace.templateElement(
+        { raw: `${staticClasses.value} `, cooked: `${staticClasses.value} ` },
+        false
+      ),
+      t__namespace.templateElement({ raw: "", cooked: "" }, true)
+    ],
+    [ternary]
+  );
 }
 function tryHoistConditionalSpread(node, getBinding) {
   let conditionalSpreadIdx = -1;
@@ -1035,16 +1148,27 @@ function readStaticConfigObject(configExpr, key, scope) {
   }
   return null;
 }
+function unwrapTsExpression(node) {
+  let current = node;
+  while (t__namespace.isTSSatisfiesExpression(current) || t__namespace.isTSAsExpression(current) || t__namespace.isTSNonNullExpression(current) || t__namespace.isParenthesizedExpression(current)) {
+    current = current.expression;
+  }
+  return current;
+}
 function resolveToConstObjectExpression(node, scope) {
-  if (t__namespace.isObjectExpression(node)) {
-    return node;
+  const unwrapped = unwrapTsExpression(node);
+  if (t__namespace.isObjectExpression(unwrapped)) {
+    return unwrapped;
   }
-  if (t__namespace.isIdentifier(node)) {
-    const binding = scope.getBinding(node.name);
+  if (t__namespace.isIdentifier(unwrapped)) {
+    const binding = scope.getBinding(unwrapped.name);
     if (binding?.kind === "const" && binding.constant) {
       const declNode = binding.path.node;
-      if (t__namespace.isVariableDeclarator(declNode) && t__namespace.isObjectExpression(declNode.init)) {
-        return declNode.init;
+      if (t__namespace.isVariableDeclarator(declNode)) {
+        const init = unwrapTsExpression(declNode.init);
+        if (t__namespace.isObjectExpression(init)) {
+          return init;
+        }
       }
     }
   }
@@ -1069,7 +1193,7 @@ function evaluateStaticObject(node) {
     } else {
       return null;
     }
-    const value = prop.value;
+    const value = unwrapTsExpression(prop.value);
     if (t__namespace.isStringLiteral(value)) {
       result[key] = value.value;
     } else if (t__namespace.isNumericLiteral(value)) {
@@ -1392,6 +1516,18 @@ function collectFromExpr(node, classes) {
   } else if (t__namespace.isConditionalExpression(node)) {
     collectFromExpr(node.consequent, classes);
     collectFromExpr(node.alternate, classes);
+  } else if (t__namespace.isTemplateLiteral(node)) {
+    for (let i = 0; i < node.quasis.length; i++) {
+      for (const c of (node.quasis[i].value.cooked ?? "").split(/\s+/)) {
+        if (c) {
+          classes.add(c);
+        }
+      }
+      const expr = node.expressions[i];
+      if (expr && t__namespace.isExpression(expr)) {
+        collectFromExpr(expr, classes);
+      }
+    }
   }
 }
 function collectCandidatesFromBabelExpr(node, path, classes) {
@@ -2405,6 +2541,7 @@ class OxcNotImplementedError extends Error {
 }
 function transformOxc(source, filename, options) {
   const classes = /* @__PURE__ */ new Set();
+  const szsPendingClasses = [];
   const rawClassNames = /* @__PURE__ */ new Set();
   const diagnostics = [];
   const recoveryTokens = /* @__PURE__ */ new Map();
@@ -2427,7 +2564,7 @@ function transformOxc(source, filename, options) {
   const effectiveFilename = filename ?? "file.tsx";
   transformCore.setSzWarnLocation(void 0);
   const astBudget = options?.astBudget ?? AST_BUDGET;
-  const parsed = oxcParser.parseSync(effectiveFilename, source);
+  const parsed = /\.(?:js|mjs|cjs)$/.test(effectiveFilename) ? oxcParser.parseSync(effectiveFilename, source, { lang: "jsx" }) : oxcParser.parseSync(effectiveFilename, source);
   if (parsed.errors.length > 0) {
     throw new Error(
       `oxc-parser errors in ${effectiveFilename}: ` + parsed.errors.map((e) => e.message).join("; ")
@@ -2476,6 +2613,7 @@ function transformOxc(source, filename, options) {
     const openingNode = node;
     const attrs = openingNode.attributes ?? [];
     const szAttrs = [];
+    const szsAttrs = [];
     let classNameAttr = null;
     let styleAttr = null;
     let szRecoverAttr = null;
@@ -2508,6 +2646,8 @@ function transformOxc(source, filename, options) {
       const name = attr.name?.name;
       if (name === "sz") {
         szAttrs.push(attr);
+      } else if (name === "szs") {
+        szsAttrs.push(attr);
       } else if (name === "className" || name === "class") {
         classNameAttr = attr;
       } else if (name === "style") {
@@ -2558,6 +2698,89 @@ function transformOxc(source, filename, options) {
         }
       }
     }
+    for (const szsAttr of szsAttrs) {
+      if (isHostOpeningElementName(openingNode.name)) {
+        diagnostics.push(
+          `[csszyx] szs at ${effectiveFilename}: szs has no effect on a host element \u2014 it maps slot names of a custom component. Attribute left unchanged.`
+        );
+        continue;
+      }
+      const szsValue = szsAttr.value;
+      const szsExpression = szsValue && szsValue.type === "JSXExpressionContainer" ? szsValue.expression : null;
+      if (!szsExpression || szsExpression.type !== "ObjectExpression") {
+        diagnostics.push(szsUnsupportedMessage(effectiveFilename));
+        continue;
+      }
+      const slotMap = szsExpression;
+      if (!isValidSzsSlotMap(slotMap)) {
+        diagnostics.push(szsUnsupportedMessage(effectiveFilename));
+        continue;
+      }
+      const { line: szsWarnLine } = offsetToLineColumn(source, szsAttr.start);
+      transformCore.setSzWarnLocation(
+        transformCore.formatSzWarnLocation(effectiveFilename, szsWarnLine, options?.rootDir)
+      );
+      const slotEntries = [];
+      let anyCompiled = false;
+      let slotFailed = false;
+      for (const propRaw of slotMap.properties) {
+        const prop = propRaw;
+        const keyText = source.slice(prop.key.start, prop.key.end);
+        const propValue = prop.value;
+        const literal = propValue.type === "Literal" ? propValue.value : null;
+        if (typeof literal === "string") {
+          slotEntries.push({
+            keyText,
+            classNames: literal,
+            text: source.slice(propValue.start, propValue.end)
+          });
+          continue;
+        }
+        try {
+          const slotObject = astObjectToSzObject(
+            propValue,
+            effectiveFilename,
+            objectBindings
+          );
+          const compiled = transformCore.transform(
+            applyGlobalVarAliasesToSzObject(
+              slotObject,
+              globalVarAliases,
+              cssVariableMap
+            )
+          ).className;
+          slotEntries.push({
+            keyText,
+            classNames: compiled,
+            text: JSON.stringify(compiled)
+          });
+          anyCompiled = true;
+        } catch (err) {
+          if (err instanceof OxcNotImplementedError) {
+            slotFailed = true;
+            break;
+          }
+          throw err;
+        }
+      }
+      transformCore.setSzWarnLocation(void 0);
+      if (slotFailed) {
+        diagnostics.push(szsUnsupportedMessage(effectiveFilename));
+        continue;
+      }
+      if (anyCompiled) {
+        const body = slotEntries.map((entry) => `${entry.keyText}: ${entry.text}`).join(", ");
+        edits.overwrite(szsAttr.start, szsAttr.end, `szs={{ ${body} }}`);
+        transformed = true;
+      }
+      for (const entry of slotEntries) {
+        for (const c of entry.classNames.split(/\s+/)) {
+          if (c) {
+            szsPendingClasses.push(c);
+          }
+        }
+      }
+    }
     if (szAttrs.length === 0) {
       applyHoistedStyleProps();
       return;
@@ -2918,6 +3141,24 @@ function transformOxc(source, filename, options) {
     ];
     const mergedAttr = mergedClasses.length === 0 ? "className={undefined}" : `className="${mergedClasses.join(" ")}"`;
     if (classNameAttr) {
+      const classNameValue = classNameAttr.value;
+      if (existingRaw === null && classNameValue && classNameValue.type === "JSXExpressionContainer") {
+        const exprNode = classNameValue.expression;
+        const exprSource = source.slice(exprNode.start, exprNode.end);
+        edits.overwrite(
+          classNameAttr.start,
+          classNameAttr.end,
+          `className={_szMerge(${exprSource}, ${JSON.stringify(szDerived.join(" "))})}`
+        );
+        for (const szAttr of szAttrs) {
+          const deleteStart = whitespaceStart(source, szAttr.start);
+          edits.remove(deleteStart, szAttr.end);
+        }
+        usesRuntime = true;
+        usesMerge = true;
+        transformed = true;
+        return;
+      }
       edits.overwrite(classNameAttr.start, classNameAttr.end, mergedAttr);
       for (const szAttr of szAttrs) {
         const deleteStart = whitespaceStart(source, szAttr.start);
@@ -2936,6 +3177,9 @@ function transformOxc(source, filename, options) {
     }
     transformed = true;
   });
+  for (const c of szsPendingClasses) {
+    classes.add(c);
+  }
   return {
     code: transformed ? edits.toString() : source,
     transformed,
@@ -3005,6 +3249,49 @@ function buildRuntimeFallbackDiagnostic(expression, source) {
   return `sz fallback at ${lineCol}: ${reason}.
   Suggestion: ${suggestion}`;
 }
+function isHostOpeningElementName(nameNode) {
+  return nameNode.type === "JSXIdentifier" && /^[a-z]/.test(String(nameNode.name));
+}
+function szsUnsupportedMessage(filename) {
+  return `[csszyx] szs at ${filename}: every slot must be an identifier key with a static object literal (or class string) value. Attribute left unchanged.`;
+}
+function isPureLiteralSzValue(node) {
+  if (node.type === "Literal") {
+    const value = node.value;
+    return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+  }
+  if (node.type === "UnaryExpression") {
+    const unary = node;
+    return unary.operator === "-" && unary.argument.type === "Literal" && typeof unary.argument.value === "number";
+  }
+  if (node.type === "ObjectExpression") {
+    const properties = node.properties;
+    return properties.every((propRaw) => {
+      if (propRaw.type !== "Property") {
+        return false;
+      }
+      const prop = propRaw;
+      return !prop.computed && prop.key.type === "Identifier" && isPureLiteralSzValue(prop.value);
+    });
+  }
+  return false;
+}
+function isValidSzsSlotMap(slotMap) {
+  return slotMap.properties.every((propRaw) => {
+    if (propRaw.type !== "Property") {
+      return false;
+    }
+    const prop = propRaw;
+    if (prop.computed || prop.key.type !== "Identifier") {
+      return false;
+    }
+    const value = prop.value;
+    if (value.type === "Literal" && typeof value.value === "string") {
+      return true;
+    }
+    return value.type === "ObjectExpression" && isPureLiteralSzValue(value);
+  });
+}
 function extractElementName(nameNode) {
   if (nameNode.type === "JSXIdentifier") {
     return String(nameNode.name);
@@ -3385,7 +3672,11 @@ function assertAstBudget(root, filename, astBudget) {
   });
 }
 function collectDynamicCallClasses(node, filename, bindings, classes) {
-  if (node.callee.type !== "Identifier" || node.callee.name !== "dynamic") {
+  if (node.callee.type !== "Identifier") {
+    return;
+  }
+  const calleeName = node.callee.name;
+  if (calleeName !== "dynamic" && calleeName !== "szr") {
     return;
   }
   const [firstArg] = node.arguments;
@@ -3527,11 +3818,25 @@ function buildNestedConditionalClassExpression(node, filename, bindings, source,
   if (topLevel !== 0 || countOxcConditionals(node) !== 1 || !first) {
     return null;
   }
-  const compileBranch = (pick) => {
+  const condPropIndex = node.properties.findIndex(
+    (prop) => prop.type === "Property" && prop.value.type === "ObjectExpression" && countOxcConditionals(prop.value) === 1
+  );
+  if (condPropIndex === -1) {
+    return null;
+  }
+  const staticNode = {
+    ...node,
+    properties: node.properties.filter((_, i) => i !== condPropIndex)
+  };
+  const condNode = {
+    ...node,
+    properties: [node.properties[condPropIndex]]
+  };
+  const compile = (target, pick) => {
     try {
       return transformCore.transform(
         applyGlobalVarAliasesToSzObject(
-          astObjectToSzObject(node, filename, bindings, pick),
+          astObjectToSzObject(target, filename, bindings, pick),
           globalVarAliases,
           cssVariableMap
         )
@@ -3543,19 +3848,24 @@ function buildNestedConditionalClassExpression(node, filename, bindings, source,
       throw err;
     }
   };
-  const consequent = compileBranch("consequent");
-  const alternate = compileBranch("alternate");
-  if (consequent === null || alternate === null) {
+  const staticClasses = staticNode.properties.length > 0 ? compile(staticNode) : "";
+  const consequent = compile(condNode, "consequent");
+  const alternate = compile(condNode, "alternate");
+  if (staticClasses === null || consequent === null || alternate === null) {
     return null;
   }
-  for (const cls of `${consequent} ${alternate}`.split(/\s+/)) {
+  for (const cls of `${staticClasses} ${consequent} ${alternate}`.split(/\s+/)) {
     if (cls) {
       classes.add(cls);
     }
   }
   const testSource = source.slice(first.test.start, first.test.end);
   const branch = (cls) => cls === "" ? "undefined" : JSON.stringify(cls);
-  return `${testSource} ? ${branch(consequent)} : ${branch(alternate)}`;
+  const ternary = `${testSource} ? ${branch(consequent)} : ${branch(alternate)}`;
+  if (staticClasses === "") {
+    return ternary;
+  }
+  return `\`${staticClasses} \${${ternary}}\``;
 }
 function buildConditionalSpreadClassExpression(node, filename, bindings, source, classes, globalVarAliases, cssVariableMap) {
   let conditionalSpread = null;
@@ -4342,6 +4652,7 @@ function extractKeyName(key) {
   return null;
 }
 function astValueToSzValue(node, filename, bindings, branchPick) {
+  node = unwrapExpression(node);
   if (branchPick && node.type === "ConditionalExpression") {
     return astValueToSzValue(
       node[branchPick],

package/dist/index.d.cts

@@ -13612,6 +13612,24 @@ type SzArrayElement = SzProps | false | null | undefined;
  * ```
  */
 type SzPropValue = string | SzProps | SzArrayElement[];
+/**
+ * Value of the `szs` prop — a map of a component's slot names to sz values, so a
+ * consumer styles the parts a compound component renders internally. The build
+ * transform compiles each slot VALUE to its Tailwind class string (keeping the
+ * key), safelists and mangles the classes exactly like `sz`, and the component
+ * forwards `props.szs?.<slot>` into the matching child's `className`.
+ *
+ * Component authors declare their slot set so consumers get autocompletion and
+ * typo checking:
+ *
+ * @example
+ * ```tsx
+ * type CardProps = { szs?: Szs<'header' | 'icon'> };
+ * // consumer:
+ * <Card szs={{ header: { bg: 'gray-100' }, icon: { color: 'red-500' } }} />
+ * ```
+ */
+type Szs<Slots extends string = string> = Partial<Record<Slots, SzPropValue>>;
 
 /**
  * @csszyx/compiler - TypeScript compiler package for csszyx.
@@ -13662,4 +13680,4 @@ declare const DEFAULT_COMPILER_OPTIONS: Required<CompilerOptions>;
 declare function mergeOptions(options?: Partial<CompilerOptions>): Required<CompilerOptions>;
 
 export { COLOR_PROPERTIES, CsszyxCompiler, DEFAULT_COMPILER_OPTIONS, ManifestBuilder, OxcNotImplementedError, OxcRustNotImplementedError, PROPERTY_CATEGORY_MAP, PropertyCategory, SzObject, VERSION, buildParentMap, createRecoveryToken, ensureRustTransformAvailable, generateRecoveryToken, getCSSVariableName, getPropertyCategory, hoistCSSVariables, injectRecoveryToken, isRustTransformAvailable, isValidRecoveryMode, mergeOptions, parseManifest, scanGlobalVarUsages, serializeManifest, sortStrings, transformOxc, transformRust, transformRustBatch, transformSourceCode, validateManifest, validateSzRecover };
-export type { BackgroundProps, BorderProps, BorderRadiusValue, CSSVarUsage, ColorName, ColorObjectValue, ColorPropValue, ColorShade, ColorValue, CompilerOptions, ContainerSize, CssVariableMangleValue, CustomTheme, EffectsProps, FilterProps, FlexboxGridProps, FractionValue, GlobalVarAliasTableInput, GlobalVarUsageDiagnostic, GlobalVarUsageKind, GlobalVarUsageLocation, InteractivityProps, LayoutProps, NegativeSpacingValue, RecoveryManifest, RecoveryMode, RecoveryToken, ScanGlobalVarUsagesOptions, ShadowValue, SizingProps, SourceTransformResult, SpacingProps, SpacingScale, SpacingValue, SvgProps, SzPropValue, SzProps, SzPropsBase, TableProps, TokenData, TokenMetadata, TransformOxcResult, TransformProps, TransformRustFile, TransformSourceCodeOptions, TransitionAnimationProps, TypographyProps, VariantModifiers };
+export type { BackgroundProps, BorderProps, BorderRadiusValue, CSSVarUsage, ColorName, ColorObjectValue, ColorPropValue, ColorShade, ColorValue, CompilerOptions, ContainerSize, CssVariableMangleValue, CustomTheme, EffectsProps, FilterProps, FlexboxGridProps, FractionValue, GlobalVarAliasTableInput, GlobalVarUsageDiagnostic, GlobalVarUsageKind, GlobalVarUsageLocation, InteractivityProps, LayoutProps, NegativeSpacingValue, RecoveryManifest, RecoveryMode, RecoveryToken, ScanGlobalVarUsagesOptions, ShadowValue, SizingProps, SourceTransformResult, SpacingProps, SpacingScale, SpacingValue, SvgProps, SzPropValue, SzProps, SzPropsBase, Szs, TableProps, TokenData, TokenMetadata, TransformOxcResult, TransformProps, TransformRustFile, TransformSourceCodeOptions, TransitionAnimationProps, TypographyProps, VariantModifiers };

package/dist/index.d.mts

@@ -13612,6 +13612,24 @@ type SzArrayElement = SzProps | false | null | undefined;
  * ```
  */
 type SzPropValue = string | SzProps | SzArrayElement[];
+/**
+ * Value of the `szs` prop — a map of a component's slot names to sz values, so a
+ * consumer styles the parts a compound component renders internally. The build
+ * transform compiles each slot VALUE to its Tailwind class string (keeping the
+ * key), safelists and mangles the classes exactly like `sz`, and the component
+ * forwards `props.szs?.<slot>` into the matching child's `className`.
+ *
+ * Component authors declare their slot set so consumers get autocompletion and
+ * typo checking:
+ *
+ * @example
+ * ```tsx
+ * type CardProps = { szs?: Szs<'header' | 'icon'> };
+ * // consumer:
+ * <Card szs={{ header: { bg: 'gray-100' }, icon: { color: 'red-500' } }} />
+ * ```
+ */
+type Szs<Slots extends string = string> = Partial<Record<Slots, SzPropValue>>;
 
 /**
  * @csszyx/compiler - TypeScript compiler package for csszyx.
@@ -13662,4 +13680,4 @@ declare const DEFAULT_COMPILER_OPTIONS: Required<CompilerOptions>;
 declare function mergeOptions(options?: Partial<CompilerOptions>): Required<CompilerOptions>;
 
 export { COLOR_PROPERTIES, CsszyxCompiler, DEFAULT_COMPILER_OPTIONS, ManifestBuilder, OxcNotImplementedError, OxcRustNotImplementedError, PROPERTY_CATEGORY_MAP, PropertyCategory, SzObject, VERSION, buildParentMap, createRecoveryToken, ensureRustTransformAvailable, generateRecoveryToken, getCSSVariableName, getPropertyCategory, hoistCSSVariables, injectRecoveryToken, isRustTransformAvailable, isValidRecoveryMode, mergeOptions, parseManifest, scanGlobalVarUsages, serializeManifest, sortStrings, transformOxc, transformRust, transformRustBatch, transformSourceCode, validateManifest, validateSzRecover };
-export type { BackgroundProps, BorderProps, BorderRadiusValue, CSSVarUsage, ColorName, ColorObjectValue, ColorPropValue, ColorShade, ColorValue, CompilerOptions, ContainerSize, CssVariableMangleValue, CustomTheme, EffectsProps, FilterProps, FlexboxGridProps, FractionValue, GlobalVarAliasTableInput, GlobalVarUsageDiagnostic, GlobalVarUsageKind, GlobalVarUsageLocation, InteractivityProps, LayoutProps, NegativeSpacingValue, RecoveryManifest, RecoveryMode, RecoveryToken, ScanGlobalVarUsagesOptions, ShadowValue, SizingProps, SourceTransformResult, SpacingProps, SpacingScale, SpacingValue, SvgProps, SzPropValue, SzProps, SzPropsBase, TableProps, TokenData, TokenMetadata, TransformOxcResult, TransformProps, TransformRustFile, TransformSourceCodeOptions, TransitionAnimationProps, TypographyProps, VariantModifiers };
+export type { BackgroundProps, BorderProps, BorderRadiusValue, CSSVarUsage, ColorName, ColorObjectValue, ColorPropValue, ColorShade, ColorValue, CompilerOptions, ContainerSize, CssVariableMangleValue, CustomTheme, EffectsProps, FilterProps, FlexboxGridProps, FractionValue, GlobalVarAliasTableInput, GlobalVarUsageDiagnostic, GlobalVarUsageKind, GlobalVarUsageLocation, InteractivityProps, LayoutProps, NegativeSpacingValue, RecoveryManifest, RecoveryMode, RecoveryToken, ScanGlobalVarUsagesOptions, ShadowValue, SizingProps, SourceTransformResult, SpacingProps, SpacingScale, SpacingValue, SvgProps, SzPropValue, SzProps, SzPropsBase, Szs, TableProps, TokenData, TokenMetadata, TransformOxcResult, TransformProps, TransformRustFile, TransformSourceCodeOptions, TransitionAnimationProps, TypographyProps, VariantModifiers };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { init, version, transform_sz, encode } from '@csszyx/core';
-import { t as transform, s as setSzWarnLocation, f as formatSzWarnLocation, C as COLOR_PROPERTIES, P as PROPERTY_MAP, g as getCSSVariableName, a as PropertyCategory, K as KNOWN_VARIANTS, b as getVariantPrefix, c as getPropertyCategory, d as stripInvalidColorStrings } from './shared/compiler.CghwJ6p5.mjs';
-export { B as BOOLEAN_SHORTHANDS, e as PROPERTY_CATEGORY_MAP, R as REMOVED_BOOLEAN_SUGAR, S as SPECIAL_VARIANTS, h as SUGGESTION_MAP, i as isValidSzProp, n as normalizeClassName } from './shared/compiler.CghwJ6p5.mjs';
+import { t as transform, s as setSzWarnLocation, f as formatSzWarnLocation, C as COLOR_PROPERTIES, P as PROPERTY_MAP, g as getCSSVariableName, a as PropertyCategory, K as KNOWN_VARIANTS, b as getVariantPrefix, c as getPropertyCategory, d as stripInvalidColorStrings } from './shared/compiler.zZfo8y65.mjs';
+export { B as BOOLEAN_SHORTHANDS, e as PROPERTY_CATEGORY_MAP, R as REMOVED_BOOLEAN_SUGAR, S as SPECIAL_VARIANTS, h as SUGGESTION_MAP, i as isValidSzProp, n as normalizeClassName } from './shared/compiler.zZfo8y65.mjs';
 import { parseSync } from 'oxc-parser';
 import * as t from '@babel/types';
 import { createHash } from 'node:crypto';
@@ -62,6 +62,7 @@ function transformSourceCode(source, filename, options) {
   let usesColorVar = false;
   let transformed = false;
   const collectedClasses = /* @__PURE__ */ new Set();
+  const szsPendingClasses = [];
   const rawClassNames = /* @__PURE__ */ new Set();
   const diagnostics = [];
   const recoveryTokens = /* @__PURE__ */ new Map();
@@ -181,6 +182,70 @@ function transformSourceCode(source, filename, options) {
                 transformed = true;
                 return;
               }
+              if (attrName === "szs") {
+                const openingEl = path.parentPath?.isJSXOpeningElement() ? path.parentPath.node : null;
+                if (openingEl && isHostElementName(openingEl.name)) {
+                  diagnostics.push(
+                    `[csszyx] szs at ${filename ?? "<anonymous>"}: szs has no effect on a host element \u2014 it maps slot names of a custom component. Attribute left unchanged.`
+                  );
+                  return;
+                }
+                const container = path.node.value;
+                if (!t.isJSXExpressionContainer(container) || !t.isObjectExpression(container.expression)) {
+                  diagnostics.push(szsUnsupportedMessage$1(filename));
+                  return;
+                }
+                const slotMap = container.expression;
+                if (!isValidSzsSlotMap$1(slotMap)) {
+                  diagnostics.push(szsUnsupportedMessage$1(filename));
+                  return;
+                }
+                setSzWarnLocation(
+                  formatSzWarnLocation(
+                    filename ?? "file.tsx",
+                    path.node.loc?.start.line,
+                    options?.rootDir
+                  )
+                );
+                const compiledSlots = [];
+                for (const prop of slotMap.properties) {
+                  const slot = prop;
+                  if (t.isStringLiteral(slot.value)) {
+                    compiledSlots.push({
+                      slot,
+                      classes: slot.value.value,
+                      rewrite: false
+                    });
+                    continue;
+                  }
+                  const compiled = tryStaticTransformNode(slot.value);
+                  if (!compiled || !t.isStringLiteral(compiled)) {
+                    diagnostics.push(szsUnsupportedMessage$1(filename));
+                    return;
+                  }
+                  compiledSlots.push({
+                    slot,
+                    classes: compiled.value,
+                    rewrite: true
+                  });
+                }
+                for (const {
+                  slot,
+                  classes: slotClasses,
+                  rewrite
+                } of compiledSlots) {
+                  if (rewrite) {
+                    slot.value = t.stringLiteral(slotClasses);
+                    transformed = true;
+                  }
+                  for (const c of slotClasses.split(/\s+/)) {
+                    if (c) {
+                      szsPendingClasses.push(c);
+                    }
+                  }
+                }
+                return;
+              }
               if (attrName !== "sz") {
                 return;
               }
@@ -705,22 +770,23 @@ function transformSourceCode(source, filename, options) {
                 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.
+            // ── dynamic() / szr() literal extraction ─────────────────────────
+            // Detects `dynamic({...})` / `szr({...})` and their
+            // `(CONST_IDENTIFIER)` forms with statically-analyzable arguments
+            // and adds the resulting class tokens to collectedClasses so
+            // prescanAndWriteClasses() includes them in csszyx-classes.html
+            // for Tailwind to scan. A bare static `szr({...})` type-checks and
+            // resolves at runtime, so without this its classes were silently
+            // dead under Tailwind `source(none)`.
             CallExpression(path) {
               const callee = path.node.callee;
-              if (!t.isIdentifier(callee) || callee.name !== "dynamic") {
+              if (!t.isIdentifier(callee) || callee.name !== "dynamic" && callee.name !== "szr") {
                 return;
               }
               if (path.node.arguments.length === 0) {
                 return;
               }
-              const arg = path.node.arguments[0];
+              const arg = unwrapTsExpression(path.node.arguments[0]);
               if (t.isObjectExpression(arg)) {
                 const staticObj = evaluateStaticObject(arg);
                 if (!staticObj) {
@@ -734,10 +800,7 @@ function transformSourceCode(source, filename, options) {
                 }
                 return;
               }
-              let argExpr = arg;
-              while (t.isTSAsExpression(argExpr) || t.isTSSatisfiesExpression(argExpr)) {
-                argExpr = argExpr.expression;
-              }
+              const argExpr = arg;
               if (t.isIdentifier(argExpr)) {
                 const binding = path.scope.getBinding(argExpr.name);
                 if (!binding) {
@@ -770,6 +833,9 @@ function transformSourceCode(source, filename, options) {
         })
       ]
     });
+    for (const c of szsPendingClasses) {
+      collectedClasses.add(c);
+    }
     return {
       code: result?.code || source,
       transformed,
@@ -821,6 +887,31 @@ function parseStyleStringToObjectExpr(styleStr) {
   }
   return t.objectExpression(objProps);
 }
+function isHostElementName(name) {
+  return t.isJSXIdentifier(name) && /^[a-z]/.test(name.name);
+}
+function szsUnsupportedMessage$1(filename) {
+  return `[csszyx] szs at ${filename ?? "<anonymous>"}: every slot must be an identifier key with a static object literal (or class string) value. Attribute left unchanged.`;
+}
+function isPureLiteralSzValue$1(node) {
+  if (t.isStringLiteral(node) || t.isNumericLiteral(node) || t.isBooleanLiteral(node)) {
+    return true;
+  }
+  if (t.isUnaryExpression(node) && node.operator === "-" && t.isNumericLiteral(node.argument)) {
+    return true;
+  }
+  if (t.isObjectExpression(node)) {
+    return node.properties.every(
+      (prop) => t.isObjectProperty(prop) && !prop.computed && t.isIdentifier(prop.key) && isPureLiteralSzValue$1(prop.value)
+    );
+  }
+  return false;
+}
+function isValidSzsSlotMap$1(slotMap) {
+  return slotMap.properties.every(
+    (prop) => t.isObjectProperty(prop) && !prop.computed && t.isIdentifier(prop.key) && (t.isStringLiteral(prop.value) || t.isObjectExpression(prop.value) && isPureLiteralSzValue$1(prop.value))
+  );
+}
 function emptyClassToUndefined(node) {
   return t.isStringLiteral(node) && node.value === "" ? t.identifier("undefined") : node;
 }
@@ -948,22 +1039,44 @@ function tryHoistNestedConditional(node, getBinding) {
   if (topLevel !== 0 || nested !== 1 || test === null) {
     return null;
   }
+  const condPropIndex = node.properties.findIndex(
+    (prop) => t.isObjectProperty(prop) && t.isObjectExpression(prop.value) && countAllConditionals(prop.value) === 1
+  );
+  if (condPropIndex === -1) {
+    return null;
+  }
+  const staticNode = t.objectExpression(node.properties.filter((_, i) => i !== condPropIndex));
+  const condNode = t.objectExpression([node.properties[condPropIndex]]);
+  const staticClasses = staticNode.properties.length > 0 ? tryStaticTransformNode(staticNode, getBinding) : null;
   const consequent = tryStaticTransformNode(
-    cloneObjectPickingBranch(node, "consequent"),
+    cloneObjectPickingBranch(condNode, "consequent"),
     getBinding
   );
   const alternate = tryStaticTransformNode(
-    cloneObjectPickingBranch(node, "alternate"),
+    cloneObjectPickingBranch(condNode, "alternate"),
     getBinding
   );
-  if (!consequent || !alternate || !t.isStringLiteral(consequent) || !t.isStringLiteral(alternate)) {
+  if (!consequent || !alternate || !t.isStringLiteral(consequent) || !t.isStringLiteral(alternate) || staticNode.properties.length > 0 && (!staticClasses || !t.isStringLiteral(staticClasses))) {
     return null;
   }
-  return t.conditionalExpression(
+  const ternary = t.conditionalExpression(
     test,
     emptyClassToUndefined(consequent),
     emptyClassToUndefined(alternate)
   );
+  if (!staticClasses || !t.isStringLiteral(staticClasses) || staticClasses.value === "") {
+    return ternary;
+  }
+  return t.templateLiteral(
+    [
+      t.templateElement(
+        { raw: `${staticClasses.value} `, cooked: `${staticClasses.value} ` },
+        false
+      ),
+      t.templateElement({ raw: "", cooked: "" }, true)
+    ],
+    [ternary]
+  );
 }
 function tryHoistConditionalSpread(node, getBinding) {
   let conditionalSpreadIdx = -1;
@@ -1016,16 +1129,27 @@ function readStaticConfigObject(configExpr, key, scope) {
   }
   return null;
 }
+function unwrapTsExpression(node) {
+  let current = node;
+  while (t.isTSSatisfiesExpression(current) || t.isTSAsExpression(current) || t.isTSNonNullExpression(current) || t.isParenthesizedExpression(current)) {
+    current = current.expression;
+  }
+  return current;
+}
 function resolveToConstObjectExpression(node, scope) {
-  if (t.isObjectExpression(node)) {
-    return node;
+  const unwrapped = unwrapTsExpression(node);
+  if (t.isObjectExpression(unwrapped)) {
+    return unwrapped;
   }
-  if (t.isIdentifier(node)) {
-    const binding = scope.getBinding(node.name);
+  if (t.isIdentifier(unwrapped)) {
+    const binding = scope.getBinding(unwrapped.name);
     if (binding?.kind === "const" && binding.constant) {
       const declNode = binding.path.node;
-      if (t.isVariableDeclarator(declNode) && t.isObjectExpression(declNode.init)) {
-        return declNode.init;
+      if (t.isVariableDeclarator(declNode)) {
+        const init = unwrapTsExpression(declNode.init);
+        if (t.isObjectExpression(init)) {
+          return init;
+        }
       }
     }
   }
@@ -1050,7 +1174,7 @@ function evaluateStaticObject(node) {
     } else {
       return null;
     }
-    const value = prop.value;
+    const value = unwrapTsExpression(prop.value);
     if (t.isStringLiteral(value)) {
       result[key] = value.value;
     } else if (t.isNumericLiteral(value)) {
@@ -1373,6 +1497,18 @@ function collectFromExpr(node, classes) {
   } else if (t.isConditionalExpression(node)) {
     collectFromExpr(node.consequent, classes);
     collectFromExpr(node.alternate, classes);
+  } else if (t.isTemplateLiteral(node)) {
+    for (let i = 0; i < node.quasis.length; i++) {
+      for (const c of (node.quasis[i].value.cooked ?? "").split(/\s+/)) {
+        if (c) {
+          classes.add(c);
+        }
+      }
+      const expr = node.expressions[i];
+      if (expr && t.isExpression(expr)) {
+        collectFromExpr(expr, classes);
+      }
+    }
   }
 }
 function collectCandidatesFromBabelExpr(node, path, classes) {
@@ -2386,6 +2522,7 @@ class OxcNotImplementedError extends Error {
 }
 function transformOxc(source, filename, options) {
   const classes = /* @__PURE__ */ new Set();
+  const szsPendingClasses = [];
   const rawClassNames = /* @__PURE__ */ new Set();
   const diagnostics = [];
   const recoveryTokens = /* @__PURE__ */ new Map();
@@ -2408,7 +2545,7 @@ function transformOxc(source, filename, options) {
   const effectiveFilename = filename ?? "file.tsx";
   setSzWarnLocation(void 0);
   const astBudget = options?.astBudget ?? AST_BUDGET;
-  const parsed = parseSync(effectiveFilename, source);
+  const parsed = /\.(?:js|mjs|cjs)$/.test(effectiveFilename) ? parseSync(effectiveFilename, source, { lang: "jsx" }) : parseSync(effectiveFilename, source);
   if (parsed.errors.length > 0) {
     throw new Error(
       `oxc-parser errors in ${effectiveFilename}: ` + parsed.errors.map((e) => e.message).join("; ")
@@ -2457,6 +2594,7 @@ function transformOxc(source, filename, options) {
     const openingNode = node;
     const attrs = openingNode.attributes ?? [];
     const szAttrs = [];
+    const szsAttrs = [];
     let classNameAttr = null;
     let styleAttr = null;
     let szRecoverAttr = null;
@@ -2489,6 +2627,8 @@ function transformOxc(source, filename, options) {
       const name = attr.name?.name;
       if (name === "sz") {
         szAttrs.push(attr);
+      } else if (name === "szs") {
+        szsAttrs.push(attr);
       } else if (name === "className" || name === "class") {
         classNameAttr = attr;
       } else if (name === "style") {
@@ -2539,6 +2679,89 @@ function transformOxc(source, filename, options) {
         }
       }
     }
+    for (const szsAttr of szsAttrs) {
+      if (isHostOpeningElementName(openingNode.name)) {
+        diagnostics.push(
+          `[csszyx] szs at ${effectiveFilename}: szs has no effect on a host element \u2014 it maps slot names of a custom component. Attribute left unchanged.`
+        );
+        continue;
+      }
+      const szsValue = szsAttr.value;
+      const szsExpression = szsValue && szsValue.type === "JSXExpressionContainer" ? szsValue.expression : null;
+      if (!szsExpression || szsExpression.type !== "ObjectExpression") {
+        diagnostics.push(szsUnsupportedMessage(effectiveFilename));
+        continue;
+      }
+      const slotMap = szsExpression;
+      if (!isValidSzsSlotMap(slotMap)) {
+        diagnostics.push(szsUnsupportedMessage(effectiveFilename));
+        continue;
+      }
+      const { line: szsWarnLine } = offsetToLineColumn(source, szsAttr.start);
+      setSzWarnLocation(
+        formatSzWarnLocation(effectiveFilename, szsWarnLine, options?.rootDir)
+      );
+      const slotEntries = [];
+      let anyCompiled = false;
+      let slotFailed = false;
+      for (const propRaw of slotMap.properties) {
+        const prop = propRaw;
+        const keyText = source.slice(prop.key.start, prop.key.end);
+        const propValue = prop.value;
+        const literal = propValue.type === "Literal" ? propValue.value : null;
+        if (typeof literal === "string") {
+          slotEntries.push({
+            keyText,
+            classNames: literal,
+            text: source.slice(propValue.start, propValue.end)
+          });
+          continue;
+        }
+        try {
+          const slotObject = astObjectToSzObject(
+            propValue,
+            effectiveFilename,
+            objectBindings
+          );
+          const compiled = transform(
+            applyGlobalVarAliasesToSzObject(
+              slotObject,
+              globalVarAliases,
+              cssVariableMap
+            )
+          ).className;
+          slotEntries.push({
+            keyText,
+            classNames: compiled,
+            text: JSON.stringify(compiled)
+          });
+          anyCompiled = true;
+        } catch (err) {
+          if (err instanceof OxcNotImplementedError) {
+            slotFailed = true;
+            break;
+          }
+          throw err;
+        }
+      }
+      setSzWarnLocation(void 0);
+      if (slotFailed) {
+        diagnostics.push(szsUnsupportedMessage(effectiveFilename));
+        continue;
+      }
+      if (anyCompiled) {
+        const body = slotEntries.map((entry) => `${entry.keyText}: ${entry.text}`).join(", ");
+        edits.overwrite(szsAttr.start, szsAttr.end, `szs={{ ${body} }}`);
+        transformed = true;
+      }
+      for (const entry of slotEntries) {
+        for (const c of entry.classNames.split(/\s+/)) {
+          if (c) {
+            szsPendingClasses.push(c);
+          }
+        }
+      }
+    }
     if (szAttrs.length === 0) {
       applyHoistedStyleProps();
       return;
@@ -2899,6 +3122,24 @@ function transformOxc(source, filename, options) {
     ];
     const mergedAttr = mergedClasses.length === 0 ? "className={undefined}" : `className="${mergedClasses.join(" ")}"`;
     if (classNameAttr) {
+      const classNameValue = classNameAttr.value;
+      if (existingRaw === null && classNameValue && classNameValue.type === "JSXExpressionContainer") {
+        const exprNode = classNameValue.expression;
+        const exprSource = source.slice(exprNode.start, exprNode.end);
+        edits.overwrite(
+          classNameAttr.start,
+          classNameAttr.end,
+          `className={_szMerge(${exprSource}, ${JSON.stringify(szDerived.join(" "))})}`
+        );
+        for (const szAttr of szAttrs) {
+          const deleteStart = whitespaceStart(source, szAttr.start);
+          edits.remove(deleteStart, szAttr.end);
+        }
+        usesRuntime = true;
+        usesMerge = true;
+        transformed = true;
+        return;
+      }
       edits.overwrite(classNameAttr.start, classNameAttr.end, mergedAttr);
       for (const szAttr of szAttrs) {
         const deleteStart = whitespaceStart(source, szAttr.start);
@@ -2917,6 +3158,9 @@ function transformOxc(source, filename, options) {
     }
     transformed = true;
   });
+  for (const c of szsPendingClasses) {
+    classes.add(c);
+  }
   return {
     code: transformed ? edits.toString() : source,
     transformed,
@@ -2986,6 +3230,49 @@ function buildRuntimeFallbackDiagnostic(expression, source) {
   return `sz fallback at ${lineCol}: ${reason}.
   Suggestion: ${suggestion}`;
 }
+function isHostOpeningElementName(nameNode) {
+  return nameNode.type === "JSXIdentifier" && /^[a-z]/.test(String(nameNode.name));
+}
+function szsUnsupportedMessage(filename) {
+  return `[csszyx] szs at ${filename}: every slot must be an identifier key with a static object literal (or class string) value. Attribute left unchanged.`;
+}
+function isPureLiteralSzValue(node) {
+  if (node.type === "Literal") {
+    const value = node.value;
+    return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+  }
+  if (node.type === "UnaryExpression") {
+    const unary = node;
+    return unary.operator === "-" && unary.argument.type === "Literal" && typeof unary.argument.value === "number";
+  }
+  if (node.type === "ObjectExpression") {
+    const properties = node.properties;
+    return properties.every((propRaw) => {
+      if (propRaw.type !== "Property") {
+        return false;
+      }
+      const prop = propRaw;
+      return !prop.computed && prop.key.type === "Identifier" && isPureLiteralSzValue(prop.value);
+    });
+  }
+  return false;
+}
+function isValidSzsSlotMap(slotMap) {
+  return slotMap.properties.every((propRaw) => {
+    if (propRaw.type !== "Property") {
+      return false;
+    }
+    const prop = propRaw;
+    if (prop.computed || prop.key.type !== "Identifier") {
+      return false;
+    }
+    const value = prop.value;
+    if (value.type === "Literal" && typeof value.value === "string") {
+      return true;
+    }
+    return value.type === "ObjectExpression" && isPureLiteralSzValue(value);
+  });
+}
 function extractElementName(nameNode) {
   if (nameNode.type === "JSXIdentifier") {
     return String(nameNode.name);
@@ -3366,7 +3653,11 @@ function assertAstBudget(root, filename, astBudget) {
   });
 }
 function collectDynamicCallClasses(node, filename, bindings, classes) {
-  if (node.callee.type !== "Identifier" || node.callee.name !== "dynamic") {
+  if (node.callee.type !== "Identifier") {
+    return;
+  }
+  const calleeName = node.callee.name;
+  if (calleeName !== "dynamic" && calleeName !== "szr") {
     return;
   }
   const [firstArg] = node.arguments;
@@ -3508,11 +3799,25 @@ function buildNestedConditionalClassExpression(node, filename, bindings, source,
   if (topLevel !== 0 || countOxcConditionals(node) !== 1 || !first) {
     return null;
   }
-  const compileBranch = (pick) => {
+  const condPropIndex = node.properties.findIndex(
+    (prop) => prop.type === "Property" && prop.value.type === "ObjectExpression" && countOxcConditionals(prop.value) === 1
+  );
+  if (condPropIndex === -1) {
+    return null;
+  }
+  const staticNode = {
+    ...node,
+    properties: node.properties.filter((_, i) => i !== condPropIndex)
+  };
+  const condNode = {
+    ...node,
+    properties: [node.properties[condPropIndex]]
+  };
+  const compile = (target, pick) => {
     try {
       return transform(
         applyGlobalVarAliasesToSzObject(
-          astObjectToSzObject(node, filename, bindings, pick),
+          astObjectToSzObject(target, filename, bindings, pick),
           globalVarAliases,
           cssVariableMap
         )
@@ -3524,19 +3829,24 @@ function buildNestedConditionalClassExpression(node, filename, bindings, source,
       throw err;
     }
   };
-  const consequent = compileBranch("consequent");
-  const alternate = compileBranch("alternate");
-  if (consequent === null || alternate === null) {
+  const staticClasses = staticNode.properties.length > 0 ? compile(staticNode) : "";
+  const consequent = compile(condNode, "consequent");
+  const alternate = compile(condNode, "alternate");
+  if (staticClasses === null || consequent === null || alternate === null) {
     return null;
   }
-  for (const cls of `${consequent} ${alternate}`.split(/\s+/)) {
+  for (const cls of `${staticClasses} ${consequent} ${alternate}`.split(/\s+/)) {
     if (cls) {
       classes.add(cls);
     }
   }
   const testSource = source.slice(first.test.start, first.test.end);
   const branch = (cls) => cls === "" ? "undefined" : JSON.stringify(cls);
-  return `${testSource} ? ${branch(consequent)} : ${branch(alternate)}`;
+  const ternary = `${testSource} ? ${branch(consequent)} : ${branch(alternate)}`;
+  if (staticClasses === "") {
+    return ternary;
+  }
+  return `\`${staticClasses} \${${ternary}}\``;
 }
 function buildConditionalSpreadClassExpression(node, filename, bindings, source, classes, globalVarAliases, cssVariableMap) {
   let conditionalSpread = null;
@@ -4323,6 +4633,7 @@ function extractKeyName(key) {
   return null;
 }
 function astValueToSzValue(node, filename, bindings, branchPick) {
+  node = unwrapExpression(node);
   if (branchPick && node.type === "ConditionalExpression") {
     return astValueToSzValue(
       node[branchPick],

package/dist/shared/{compiler.mibv6qPF.cjs → compiler.dkTeNO_S.cjs}

@@ -1186,6 +1186,8 @@ function handleImportant(value) {
   }
   return { value, important: false };
 }
+const ALPHA_SAFE_NAMED_COLORS = /* @__PURE__ */ new Set(["white", "black", "transparent", "current", "inherit"]);
+const _warnedOpacityTokens = /* @__PURE__ */ new Set();
 function formatOpacity(op) {
   if (typeof op === "number") {
     if (Number.isInteger(op * 2)) {
@@ -1649,6 +1651,13 @@ function transformImpl(szProp, prefix, mangleMap) {
       const colorBase = rawColorBase.startsWith("--") ? `(${rawColorBase})` : needsArbitraryBrackets(rawColorBase) ? `[${normalizeArbitraryValue(rawColorBase)}]` : normalizeArbitraryValue(rawColorBase);
       if (colorObj.op !== void 0) {
         const opStr = formatOpacity(colorObj.op);
+        if (process.env.NODE_ENV !== "production" && typeof window === "undefined" && !rawColorBase.startsWith("--") && !needsArbitraryBrackets(rawColorBase) && !/-\d{2,3}$/.test(rawColorBase) && !ALPHA_SAFE_NAMED_COLORS.has(rawColorBase) && !_warnedOpacityTokens.has(rawColorBase)) {
+          _warnedOpacityTokens.add(rawColorBase);
+          const at = szWarnLocation ? ` at ${szWarnLocation}` : "";
+          console.warn(
+            `[csszyx] "${prefix}${twPrefix}-${colorBase}/${opStr}"${at}: the /${opStr} opacity applies only if the "${rawColorBase}" theme token is alpha-capable (oklch or space-separated RGB). A comma-separated RGB triplet, or a token that resolves through its own alpha variable, silently ignores the modifier \u2014 verify the emitted rule.`
+          );
+        }
         classes.push(`${prefix}${twPrefix}-${colorBase}/${opStr}`);
       } else {
         classes.push(`${prefix}${twPrefix}-${colorBase}`);
@@ -2385,6 +2394,9 @@ function transformImpl(szProp, prefix, mangleMap) {
         hintProjectScanOnce(szWarnLocation);
       }
     }
+    if (/^\d+(?:\.\d+)?$/.test(rawKey)) {
+      continue;
+    }
     if (value === true) {
       if (BOOLEAN_SHORTHANDS.has(rawKey)) {
         const mappedClass = BOOLEAN_TO_CLASS[rawKey] || key;

package/dist/shared/{compiler.CghwJ6p5.mjs → compiler.zZfo8y65.mjs}

@@ -1184,6 +1184,8 @@ function handleImportant(value) {
   }
   return { value, important: false };
 }
+const ALPHA_SAFE_NAMED_COLORS = /* @__PURE__ */ new Set(["white", "black", "transparent", "current", "inherit"]);
+const _warnedOpacityTokens = /* @__PURE__ */ new Set();
 function formatOpacity(op) {
   if (typeof op === "number") {
     if (Number.isInteger(op * 2)) {
@@ -1647,6 +1649,13 @@ function transformImpl(szProp, prefix, mangleMap) {
       const colorBase = rawColorBase.startsWith("--") ? `(${rawColorBase})` : needsArbitraryBrackets(rawColorBase) ? `[${normalizeArbitraryValue(rawColorBase)}]` : normalizeArbitraryValue(rawColorBase);
       if (colorObj.op !== void 0) {
         const opStr = formatOpacity(colorObj.op);
+        if (process.env.NODE_ENV !== "production" && typeof window === "undefined" && !rawColorBase.startsWith("--") && !needsArbitraryBrackets(rawColorBase) && !/-\d{2,3}$/.test(rawColorBase) && !ALPHA_SAFE_NAMED_COLORS.has(rawColorBase) && !_warnedOpacityTokens.has(rawColorBase)) {
+          _warnedOpacityTokens.add(rawColorBase);
+          const at = szWarnLocation ? ` at ${szWarnLocation}` : "";
+          console.warn(
+            `[csszyx] "${prefix}${twPrefix}-${colorBase}/${opStr}"${at}: the /${opStr} opacity applies only if the "${rawColorBase}" theme token is alpha-capable (oklch or space-separated RGB). A comma-separated RGB triplet, or a token that resolves through its own alpha variable, silently ignores the modifier \u2014 verify the emitted rule.`
+          );
+        }
         classes.push(`${prefix}${twPrefix}-${colorBase}/${opStr}`);
       } else {
         classes.push(`${prefix}${twPrefix}-${colorBase}`);
@@ -2383,6 +2392,9 @@ function transformImpl(szProp, prefix, mangleMap) {
         hintProjectScanOnce(szWarnLocation);
       }
     }
+    if (/^\d+(?:\.\d+)?$/.test(rawKey)) {
+      continue;
+    }
     if (value === true) {
       if (BOOLEAN_SHORTHANDS.has(rawKey)) {
         const mappedClass = BOOLEAN_TO_CLASS[rawKey] || key;

package/dist/transform-core.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const transformCore = require('./shared/compiler.mibv6qPF.cjs');
+const transformCore = require('./shared/compiler.dkTeNO_S.cjs');
 
 
 

package/dist/transform-core.mjs

@@ -1 +1 @@
-export { B as BOOLEAN_SHORTHANDS, K as KNOWN_VARIANTS, M as MAX_SZ_DEPTH, P as PROPERTY_MAP, R as REMOVED_BOOLEAN_SUGAR, S as SPECIAL_VARIANTS, h as SUGGESTION_MAP, j as SzDepthError, V as VARIANT_MAP, f as formatSzWarnLocation, b as getVariantPrefix, k as isForbiddenSzKey, i as isValidSzProp, l as normalizeArbitraryValue, m as normalizeArbitraryVariant, n as normalizeClassName, s as setSzWarnLocation, t as transform } from './shared/compiler.CghwJ6p5.mjs';
+export { B as BOOLEAN_SHORTHANDS, K as KNOWN_VARIANTS, M as MAX_SZ_DEPTH, P as PROPERTY_MAP, R as REMOVED_BOOLEAN_SUGAR, S as SPECIAL_VARIANTS, h as SUGGESTION_MAP, j as SzDepthError, V as VARIANT_MAP, f as formatSzWarnLocation, b as getVariantPrefix, k as isForbiddenSzKey, i as isValidSzProp, l as normalizeArbitraryValue, m as normalizeArbitraryVariant, n as normalizeClassName, s as setSzWarnLocation, t as transform } from './shared/compiler.zZfo8y65.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csszyx/compiler",
-  "version": "0.10.9",
+  "version": "0.10.11",
   "description": "Core compiler and transformation logic for csszyx",
   "keywords": [
     "csszyx",
@@ -65,7 +65,7 @@
     "@babel/types": "^7.23.6",
     "magic-string": "0.30.21",
     "oxc-parser": "0.131.0",
-    "@csszyx/core": "0.10.9"
+    "@csszyx/core": "0.10.11"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",