@csszyx/compiler 0.10.10 → 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');
@@ -789,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) {
@@ -818,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) {
@@ -1150,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;
+        }
       }
     }
   }
@@ -1184,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)) {
@@ -2555,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("; ")
@@ -3132,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);
@@ -3645,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;
@@ -4621,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.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';
@@ -770,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) {
@@ -799,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) {
@@ -1131,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;
+        }
       }
     }
   }
@@ -1165,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)) {
@@ -2536,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("; ")
@@ -3113,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);
@@ -3626,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;
@@ -4602,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.10",
+  "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.10"
+    "@csszyx/core": "0.10.11"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",