@csszyx/compiler 0.10.8 → 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;
               }
@@ -390,6 +455,17 @@ function transformSourceCode(source, filename, options) {
                     transformed = true;
                     return;
                   }
+                  const hoistedNested = tryHoistNestedConditional(
+                    flatExpression,
+                    getBinding
+                  );
+                  if (hoistedNested !== null) {
+                    path.node.name.name = "className";
+                    path.node.value = createMergedClassNameValue(hoistedNested);
+                    collectFromExpr(hoistedNested, collectedClasses);
+                    transformed = true;
+                    return;
+                  }
                   const partial = evaluatePartialObject$1(flatExpression);
                   if (partial !== null && !partial.hasSpread && (partial.dynamicProps.size > 0 || partial.conditionalClasses.length > 0)) {
                     const staticClasses = [];
@@ -778,6 +854,9 @@ function transformSourceCode(source, filename, options) {
         })
       ]
     });
+    for (const c of szsPendingClasses) {
+      collectedClasses.add(c);
+    }
     return {
       code: result?.code || source,
       transformed,
@@ -829,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;
 }
@@ -878,6 +982,123 @@ function tryStaticTransformNode(node, getBinding) {
   }
   return null;
 }
+function scanNestedConditionals(node) {
+  let topLevel = 0;
+  let nested = 0;
+  let test = null;
+  for (const prop of node.properties) {
+    if (!t__namespace.isObjectProperty(prop)) {
+      continue;
+    }
+    const value = prop.value;
+    if (t__namespace.isConditionalExpression(value)) {
+      topLevel++;
+    } else if (t__namespace.isObjectExpression(value)) {
+      nested += countAllConditionals(value);
+      test ??= firstConditionalTest(value);
+    }
+  }
+  return { topLevel, nested, test };
+}
+function countAllConditionals(node) {
+  let count = 0;
+  for (const prop of node.properties) {
+    if (!t__namespace.isObjectProperty(prop)) {
+      continue;
+    }
+    const value = prop.value;
+    if (t__namespace.isConditionalExpression(value)) {
+      count++;
+    } else if (t__namespace.isObjectExpression(value)) {
+      count += countAllConditionals(value);
+    }
+  }
+  return count;
+}
+function firstConditionalTest(node) {
+  for (const prop of node.properties) {
+    if (!t__namespace.isObjectProperty(prop)) {
+      continue;
+    }
+    const value = prop.value;
+    if (t__namespace.isConditionalExpression(value)) {
+      return value.test;
+    }
+    if (t__namespace.isObjectExpression(value)) {
+      const inner = firstConditionalTest(value);
+      if (inner) {
+        return inner;
+      }
+    }
+  }
+  return null;
+}
+function cloneObjectPickingBranch(node, pick) {
+  return t__namespace.objectExpression(
+    node.properties.map((prop) => {
+      if (!t__namespace.isObjectProperty(prop)) {
+        return t__namespace.cloneNode(prop);
+      }
+      const value = prop.value;
+      let nextValue = t__namespace.cloneNode(value);
+      if (t__namespace.isConditionalExpression(value)) {
+        nextValue = t__namespace.cloneNode(value[pick]);
+      } else if (t__namespace.isObjectExpression(value)) {
+        nextValue = cloneObjectPickingBranch(value, pick);
+      }
+      return t__namespace.objectProperty(
+        t__namespace.cloneNode(prop.key),
+        nextValue,
+        prop.computed,
+        prop.shorthand
+      );
+    })
+  );
+}
+function tryHoistNestedConditional(node, getBinding) {
+  const { topLevel, nested, test } = scanNestedConditionals(node);
+  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(condNode, "consequent"),
+    getBinding
+  );
+  const alternate = tryStaticTransformNode(
+    cloneObjectPickingBranch(condNode, "alternate"),
+    getBinding
+  );
+  if (!consequent || !alternate || !t__namespace.isStringLiteral(consequent) || !t__namespace.isStringLiteral(alternate) || staticNode.properties.length > 0 && (!staticClasses || !t__namespace.isStringLiteral(staticClasses))) {
+    return null;
+  }
+  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;
   let conditionalExpr = null;
@@ -1286,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) {
@@ -1536,6 +1769,10 @@ class CsszyxCompiler {
   }
 }
 
+function sortStrings(values) {
+  return [...values].sort((a, b) => a < b ? -1 : a > b ? 1 : 0);
+}
+
 const CSS_VAR_REFERENCE_RE = /var\(\s*(--[\w-]+)/g;
 function scanGlobalVarUsages(source, filename = "file.tsx", options = {}) {
   if (!source.includes("--") && !source.includes("var(")) {
@@ -1745,7 +1982,7 @@ function extractVarReferences(value) {
   for (const match of value.matchAll(CSS_VAR_REFERENCE_RE)) {
     refs.add(match[1]);
   }
-  return [...refs].sort();
+  return sortStrings(refs);
 }
 function shouldReportToken(name, tokenFilter) {
   return tokenFilter === null || tokenFilter.has(name);
@@ -2019,7 +2256,7 @@ class ManifestBuilder {
    * @returns {string} SHA-256 checksum
    */
   computeChecksum(tokens) {
-    const sortedKeys = Object.keys(tokens).sort();
+    const sortedKeys = sortStrings(Object.keys(tokens));
     const sortedTokens = {};
     for (const key of sortedKeys) {
       sortedTokens[key] = tokens[key];
@@ -2295,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();
@@ -2366,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;
@@ -2398,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") {
@@ -2448,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;
@@ -2645,6 +2969,29 @@ function transformOxc(source, filename, options) {
             transformed = true;
             return;
           }
+          const nestedConditionalClassExpr = buildNestedConditionalClassExpression(
+            expression,
+            effectiveFilename,
+            objectBindings,
+            source,
+            classes,
+            globalVarAliases,
+            cssVariableMap
+          );
+          if (nestedConditionalClassExpr) {
+            if (classNameAttr || szAttrs.length > 1) {
+              runtimeFallbackExpr = expression;
+              runtimeFallbackAttr = szAttr;
+              break;
+            }
+            edits.overwrite(
+              szAttr.start,
+              szAttr.end,
+              `className={${nestedConditionalClassExpr}}`
+            );
+            transformed = true;
+            return;
+          }
           const partial = buildPartialObjectTransform(
             expression,
             effectiveFilename,
@@ -2803,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,
@@ -2872,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);
@@ -2881,7 +3274,7 @@ function extractElementName(nameNode) {
   }
   return "<unknown>";
 }
-function astObjectToSzObject(node, filename, bindings) {
+function astObjectToSzObject(node, filename, bindings, branchPick) {
   const result = {};
   for (const propRaw of node.properties) {
     if (propRaw.type === "SpreadElement") {
@@ -2918,7 +3311,7 @@ function astObjectToSzObject(node, filename, bindings) {
         `unsupported key shape ${prop.key.type} at ${filename}:${prop.key.start}`
       );
     }
-    result[key] = astValueToSzValue(prop.value, filename, bindings);
+    result[key] = astValueToSzValue(prop.value, filename, bindings, branchPick);
   }
   return result;
 }
@@ -3350,6 +3743,99 @@ function resolveObjectExpression(node, bindings) {
   }
   return null;
 }
+function countOxcConditionals(node) {
+  let count = 0;
+  for (const propRaw of node.properties) {
+    if (propRaw.type !== "Property") {
+      continue;
+    }
+    const value = propRaw.value;
+    if (value.type === "ConditionalExpression") {
+      count++;
+    } else if (value.type === "ObjectExpression") {
+      count += countOxcConditionals(value);
+    }
+  }
+  return count;
+}
+function firstOxcConditional(node) {
+  for (const propRaw of node.properties) {
+    if (propRaw.type !== "Property") {
+      continue;
+    }
+    const value = propRaw.value;
+    if (value.type === "ConditionalExpression") {
+      return value;
+    }
+    if (value.type === "ObjectExpression") {
+      const found = firstOxcConditional(value);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+}
+function buildNestedConditionalClassExpression(node, filename, bindings, source, classes, globalVarAliases, cssVariableMap) {
+  let topLevel = 0;
+  for (const propRaw of node.properties) {
+    if (propRaw.type === "Property" && propRaw.value.type === "ConditionalExpression") {
+      topLevel++;
+    }
+  }
+  const first = firstOxcConditional(node);
+  if (topLevel !== 0 || countOxcConditionals(node) !== 1 || !first) {
+    return null;
+  }
+  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(target, filename, bindings, pick),
+          globalVarAliases,
+          cssVariableMap
+        )
+      ).className;
+    } catch (err) {
+      if (err instanceof OxcNotImplementedError) {
+        return null;
+      }
+      throw err;
+    }
+  };
+  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 `${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);
+  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;
   const otherProps = [];
@@ -4134,7 +4620,15 @@ function extractKeyName(key) {
   }
   return null;
 }
-function astValueToSzValue(node, filename, bindings) {
+function astValueToSzValue(node, filename, bindings, branchPick) {
+  if (branchPick && node.type === "ConditionalExpression") {
+    return astValueToSzValue(
+      node[branchPick],
+      filename,
+      bindings,
+      branchPick
+    );
+  }
   if (node.type === "Literal") {
     const value = node.value;
     if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
@@ -4160,7 +4654,7 @@ function astValueToSzValue(node, filename, bindings) {
     );
   }
   if (node.type === "ObjectExpression") {
-    return astObjectToSzObject(node, filename, bindings);
+    return astObjectToSzObject(node, filename, bindings, branchPick);
   }
   if (node.type === "Identifier" || node.type === "MemberExpression") {
     throw new OxcNotImplementedError(
@@ -4431,6 +4925,7 @@ exports.mergeOptions = mergeOptions;
 exports.parseManifest = parseManifest;
 exports.scanGlobalVarUsages = scanGlobalVarUsages;
 exports.serializeManifest = serializeManifest;
+exports.sortStrings = sortStrings;
 exports.transformOxc = transformOxc;
 exports.transformRust = transformRust;
 exports.transformRustBatch = transformRustBatch;