@csszyx/compiler 0.10.9 → 0.10.10

package/dist/index.cjs

@@ -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;
               }
@@ -789,6 +854,9 @@ function transformSourceCode(source, filename, options) {
         })
       ]
     });
+    for (const c of szsPendingClasses) {
+      collectedClasses.add(c);
+    }
     return {
       code: result?.code || source,
       transformed,
@@ -840,6 +908,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 +1060,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;
@@ -1392,6 +1507,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 +2532,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();
@@ -2476,6 +2604,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 +2637,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 +2689,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;
@@ -2936,6 +3150,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 +3222,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);
@@ -3527,11 +3787,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 +3817,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;

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

@@ -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;
               }
@@ -770,6 +835,9 @@ function transformSourceCode(source, filename, options) {
         })
       ]
     });
+    for (const c of szsPendingClasses) {
+      collectedClasses.add(c);
+    }
     return {
       code: result?.code || source,
       transformed,
@@ -821,6 +889,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 +1041,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;
@@ -1373,6 +1488,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 +2513,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();
@@ -2457,6 +2585,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 +2618,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 +2670,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;
@@ -2917,6 +3131,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 +3203,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);
@@ -3508,11 +3768,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 +3798,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csszyx/compiler",
-  "version": "0.10.9",
+  "version": "0.10.10",
   "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.10"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",