@csszyx/compiler 0.2.0 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # @csszyx/compiler
 
-TypeScript compiler package for csszyx - handles JSX transformation, recovery token generation, and manifest creation.
+TypeScript compiler package for CSSzyx - handles JSX transformation, recovery token generation, and manifest creation.
 
 ## Features
 
@@ -83,7 +83,7 @@ const manifest = builder.build();
 
 #### `transform(szProp: SzObject, prefix?: string): string`
 
-Transforms a csszyx sz object into a Tailwind CSS className string.
+Transforms a CSSzyx sz object into a Tailwind CSS className string.
 
 #### `isValidSzProp(szProp: unknown): boolean`
 

package/dist/index.cjs

@@ -463,6 +463,7 @@ var PROPERTY_MAP = {
   color: "text",
   text: "text",
   fontWeight: "font",
+  weight: "font",
   fontFamily: "font",
   fontStretch: "font-stretch",
   textAlign: "text",
@@ -554,9 +555,14 @@ var PROPERTY_MAP = {
   scale: "scale",
   scaleX: "scale-x",
   scaleY: "scale-y",
+  scaleZ: "scale-z",
   rotate: "rotate",
+  rotateX: "rotate-x",
+  rotateY: "rotate-y",
+  rotateZ: "rotate-z",
   translateX: "translate-x",
   translateY: "translate-y",
+  translateZ: "translate-z",
   skewX: "skew-x",
   skewY: "skew-y",
   origin: "origin",
@@ -564,6 +570,7 @@ var PROPERTY_MAP = {
   perspective: "perspective",
   perspectiveOrigin: "perspective-origin",
   transformStyle: "transform",
+  transform: "transform",
   // Transitions & Animation
   transition: "transition",
   transitionBehavior: "transition",
@@ -581,6 +588,8 @@ var PROPERTY_MAP = {
   cursor: "cursor",
   caret: "caret",
   pointerEvents: "pointer-events",
+  fieldSizing: "field-sizing",
+  scheme: "scheme",
   resize: "resize",
   scroll: "scroll",
   scrollM: "scroll-m",
@@ -954,6 +963,7 @@ var BOOLEAN_SHORTHANDS = /* @__PURE__ */ new Set([
   // Misc
   "container",
   "prose",
+  "proseInvert",
   "srOnly",
   "notSrOnly",
   "isolate",
@@ -980,8 +990,7 @@ var BOOLEAN_SHORTHANDS = /* @__PURE__ */ new Set([
   "rotate3d",
   "translate3d",
   "transformGpu",
-  "transformCpu",
-  "transformNone"
+  "transformCpu"
 ]);
 var BOOLEAN_TO_CLASS = {
   inlineBlock: "inline-block",
@@ -1019,7 +1028,8 @@ var BOOLEAN_TO_CLASS = {
   translate3d: "translate-3d",
   transformGpu: "transform-gpu",
   transformCpu: "transform-cpu",
-  transformNone: "transform-none"
+  // Misc
+  proseInvert: "prose-invert"
 };
 var SNAP_DIRECT_MAP = {
   snapAlign: {
@@ -1076,10 +1086,16 @@ var NEGATIVE_ALLOWED = /* @__PURE__ */ new Set([
   "row-start",
   "row-end",
   "rotate",
+  "rotate-x",
+  "rotate-y",
+  "rotate-z",
+  "scale-z",
   "skew-x",
   "skew-y",
   "translate-x",
   "translate-y",
+  "translate-z",
+  "mask",
   "space-x",
   "space-y",
   "tracking",
@@ -1119,7 +1135,7 @@ function normalizeArbitraryVariant(key) {
   return key.replace(/\s+/g, "");
 }
 function normalizeArbitraryValue(value) {
-  return value.trim().replace(/\s*([+*/(),:])\s*/g, "$1").replace(/\s+/g, "_");
+  return value.trim().replace(/\s+/g, "_");
 }
 var FRACTION_SUPPORTED_PROPS = /* @__PURE__ */ new Set([
   // Sizing (both rawKey and resolved key forms)
@@ -1160,11 +1176,15 @@ var FRACTION_SUPPORTED_PROPS = /* @__PURE__ */ new Set([
   "translate-x",
   "translateX",
   "translate-y",
-  "translateY"
+  "translateY",
+  // Aspect
+  "aspect"
 ]);
 function needsArbitraryBrackets(value) {
-  return /^\d+(\.\d+)?(px|rem|em|%|vh|vw|ch|dvh|dvw|svh|svw|lvh|lvw|cqw|cqh|deg|rad|turn|grad|ms|s|fr)$/.test(value) || // Units
+  return /^\d+(\.\d+)?(px|rem|em|%|vh|vw|ch|dvh|dvw|svh|svw|lvh|lvw|cqw|cqh|deg|rad|turn|grad|ms|s|fr)$/.test(value) || // Positive units
+  /^-\d+(\.\d+)?(px|rem|em|%|vh|vw|ch|dvh|dvw|svh|svw|lvh|lvw|cqw|cqh|deg|rad|turn|grad|ms|s|fr)$/.test(value) || // Negative units like -1px, -2rem
   /^\.\d+(px|rem|em|%|vh|vw|ch)?$/.test(value) || // Values starting with . like .25em
+  /^-\.\d+(px|rem|em|%|vh|vw|ch)?$/.test(value) || // Negative values starting with -. like -.25em
   value.startsWith("#") || // Hex colors
   value.startsWith("rgb") || // RGB colors
   value.startsWith("hsl") || // HSL colors
@@ -1616,12 +1636,13 @@ function transform(szProp, prefix = "", mangleMap) {
     }
     let className = prefix;
     if (rawKey === "willChange" && typeof value === "string") {
-      if (value === "scroll") {
-        classes.push(`${prefix}will-change-scroll-position`);
+      const WILL_CHANGE_KEYWORDS = /* @__PURE__ */ new Set(["auto", "scroll", "contents", "transform"]);
+      if (WILL_CHANGE_KEYWORDS.has(value)) {
+        classes.push(`${prefix}will-change-${value}`);
       } else if (value.startsWith("--")) {
         classes.push(`${prefix}will-change-(${value})`);
       } else {
-        classes.push(`${prefix}will-change-${value}`);
+        classes.push(`${prefix}will-change-[${normalizeArbitraryValue(value)}]`);
       }
       continue;
     }
@@ -1735,10 +1756,10 @@ function transform(szProp, prefix = "", mangleMap) {
         continue;
       }
       if (rawKey === "textOverflow") {
-        if (value === "ellipsis") {
-          classes.push(`${prefix}truncate`);
-        } else {
+        if (value === "ellipsis" || value === "clip") {
           classes.push(`${prefix}text-${value}`);
+        } else {
+          classes.push(`${prefix}text-[${value}]`);
         }
         continue;
       }
@@ -1806,8 +1827,13 @@ function transform(szProp, prefix = "", mangleMap) {
           className += `font-${sValue}`;
         } else if (sValue.startsWith("--")) {
           className += `font-stretch-(${sValue})`;
-        } else if (/^\d+%$/.test(sValue)) {
-          className += `font-stretch-${sValue}`;
+        } else if (/^\d+(\.\d+)?%$/.test(sValue)) {
+          const valNum = parseFloat(sValue);
+          if (sValue.includes(".") || !Number.isInteger(valNum)) {
+            className += `font-stretch-[${sValue}]`;
+          } else {
+            className += `font-stretch-${sValue}`;
+          }
         } else {
           className += `font-stretch-[${sValue}]`;
         }
@@ -1928,6 +1954,17 @@ function transform(szProp, prefix = "", mangleMap) {
         classes.push(className);
         continue;
       }
+      if (rawKey === "bgRepeat" || rawKey === "backgroundRepeat") {
+        if (value === "repeat") {
+          className += "bg-repeat";
+        } else if (value === "no-repeat") {
+          className += "bg-no-repeat";
+        } else {
+          className += `bg-repeat-${value}`;
+        }
+        classes.push(className);
+        continue;
+      }
       if (rawKey === "maskSize") {
         className += `mask-${value}`;
         classes.push(className);
@@ -1953,8 +1990,11 @@ function transform(szProp, prefix = "", mangleMap) {
         classes.push(className);
         continue;
       }
-      if (rawKey === "content") {
-        if (value.startsWith("--")) {
+      if (rawKey === "content" || rawKey === "alignContent") {
+        const ALIGN_CONTENT_KEYWORDS = /* @__PURE__ */ new Set(["normal", "center", "start", "end", "between", "around", "evenly", "baseline", "stretch"]);
+        if (ALIGN_CONTENT_KEYWORDS.has(value)) {
+          className += `content-${value}`;
+        } else if (value.startsWith("--")) {
           className += `content-(${value})`;
         } else if (!["none", "empty"].includes(value)) {
           className += `content-[${value}]`;
@@ -2104,7 +2144,6 @@ function transform(szProp, prefix = "", mangleMap) {
         classes.push(className);
         continue;
       }
-      const isAspectRatio = key === "aspect" && /^\d+\/\d+$/.test(finalValue);
       if (finalValue.startsWith("--")) {
         const typeHint = CSS_VAR_TYPE_HINTS[rawKey];
         if (typeHint) {
@@ -2118,10 +2157,19 @@ function transform(szProp, prefix = "", mangleMap) {
         if (!FRACTION_SUPPORTED_PROPS.has(rawKey)) {
           finalValue = `[${finalValue}]`;
         }
-      } else if (needsArbitraryBrackets(finalValue) || isAspectRatio || /^\d+\.\d+%$/.test(finalValue)) {
+      } else if (key === "aspect" && /^[0-9]+(?:\.[0-9]+)?\/[0-9]+(?:\.[0-9]+)?$/.test(finalValue)) {
+        if (finalValue === "auto" || finalValue === "square" || finalValue === "video" || /^\d+\/\d+$/.test(finalValue)) {
+        } else {
+          finalValue = `[${finalValue}]`;
+        }
+      } else if (needsArbitraryBrackets(finalValue) || /^\d+\.\d+%$/.test(finalValue)) {
         finalValue = `[${normalizeArbitraryValue(finalValue)}]`;
       }
-      className += `${key}-${finalValue}`;
+      if (finalValue.startsWith("-") && NEGATIVE_ALLOWED.has(key)) {
+        className = `-${prefix}${key}-${finalValue.substring(1)}`;
+      } else {
+        className += `${key}-${finalValue}`;
+      }
       if (important) {
         className += "!";
       }
@@ -2182,8 +2230,9 @@ function transformSourceCode(source) {
   let usesRuntime = false;
   let usesColorVar = false;
   let transformed = false;
+  const collectedClasses = /* @__PURE__ */ new Set();
   if (!source.includes("sz")) {
-    return { code: source, transformed: false, usesRuntime: false, usesColorVar: false };
+    return { code: source, transformed: false, usesRuntime: false, usesColorVar: false, classes: collectedClasses };
   }
   try {
     const result = babel.transformSync(source, {
@@ -2201,12 +2250,29 @@ function transformSourceCode(source) {
           return {
             visitor: {
               JSXAttribute(path) {
-                if (path.node.name.name !== "sz") {
+                const attrName = t.isJSXIdentifier(path.node.name) ? path.node.name.name : "";
+                if (attrName === "className" || attrName === "class") {
+                  const val = path.node.value;
+                  if (t.isStringLiteral(val)) {
+                    for (const c of val.value.split(/\s+/)) {
+                      if (c) {
+                        collectedClasses.add(c);
+                      }
+                    }
+                  }
+                  return;
+                }
+                if (attrName !== "sz") {
                   return;
                 }
                 const value = path.node.value;
                 if (t.isStringLiteral(value)) {
                   path.node.name.name = "className";
+                  for (const c of value.value.split(/\s+/)) {
+                    if (c) {
+                      collectedClasses.add(c);
+                    }
+                  }
                   transformed = true;
                   return;
                 }
@@ -2216,6 +2282,11 @@ function transformSourceCode(source) {
                     const staticObject = evaluateStaticObject(expression);
                     if (staticObject !== null) {
                       const { className, attributes } = transform(staticObject);
+                      for (const c of className.split(/\s+/)) {
+                        if (c) {
+                          collectedClasses.add(c);
+                        }
+                      }
                       path.node.name.name = "className";
                       path.node.value = t.stringLiteral(className);
                       Object.entries(attributes).forEach(([key, val]) => {
@@ -2254,6 +2325,11 @@ function transformSourceCode(source) {
                         );
                       }
                       const allClasses = [...staticClasses, ...partial.rawClasses, ...cssVarClasses].join(" ");
+                      for (const c of allClasses.split(/\s+/)) {
+                        if (c) {
+                          collectedClasses.add(c);
+                        }
+                      }
                       path.node.name.name = "className";
                       path.node.value = t.stringLiteral(allClasses);
                       if (styleProps.length > 0 && path.parentPath?.isJSXOpeningElement()) {
@@ -2282,8 +2358,14 @@ function transformSourceCode(source) {
                           path.node.name.name = "className";
                           if (t.isStringLiteral(resolved)) {
                             path.node.value = resolved;
+                            for (const c of resolved.value.split(/\s+/)) {
+                              if (c) {
+                                collectedClasses.add(c);
+                              }
+                            }
                           } else {
                             value.expression = resolved;
+                            collectFromExpr(resolved, collectedClasses);
                           }
                           transformed = true;
                           return;
@@ -2297,8 +2379,14 @@ function transformSourceCode(source) {
                       path.node.name.name = "className";
                       if (t.isStringLiteral(resolved)) {
                         path.node.value = resolved;
+                        for (const c of resolved.value.split(/\s+/)) {
+                          if (c) {
+                            collectedClasses.add(c);
+                          }
+                        }
                       } else {
                         value.expression = resolved;
+                        collectFromExpr(resolved, collectedClasses);
                       }
                       transformed = true;
                       return;
@@ -2323,11 +2411,12 @@ function transformSourceCode(source) {
       code: result?.code || source,
       transformed,
       usesRuntime,
-      usesColorVar
+      usesColorVar,
+      classes: collectedClasses
     };
   } catch (e) {
     console.warn("[csszyx] AST transform failed, falling back to original code:", e);
-    return { code: source, transformed: false, usesRuntime: false, usesColorVar: false };
+    return { code: source, transformed: false, usesRuntime: false, usesColorVar: false, classes: collectedClasses };
   }
 }
 function tryStaticTransformNode(node) {
@@ -2566,6 +2655,18 @@ function generateStyleValueExpression(info) {
       );
   }
 }
+function collectFromExpr(node, classes) {
+  if (t.isStringLiteral(node)) {
+    for (const c of node.value.split(/\s+/)) {
+      if (c) {
+        classes.add(c);
+      }
+    }
+  } else if (t.isConditionalExpression(node)) {
+    collectFromExpr(node.consequent, classes);
+    collectFromExpr(node.alternate, classes);
+  }
+}
 function buildCSSVarClassName(info) {
   const { twPrefix, varName, variantChain } = info;
   const variantPrefix = variantChain ? `${getVariantPrefix(variantChain)}:` : "";

package/dist/index.d.cts

@@ -61,6 +61,7 @@ declare function transformSourceCode(source: string): {
     transformed: boolean;
     usesRuntime: boolean;
     usesColorVar: boolean;
+    classes: Set<string>;
 };
 
 /**
@@ -606,6 +607,8 @@ interface LayoutProps {
     container?: boolean;
     /** Boolean sugar for prose */
     prose?: boolean;
+    /** Boolean sugar for prose-invert (requires @tailwindcss/typography plugin) */
+    proseInvert?: boolean;
     /** @see https://tailwindcss.com/docs/float */
     float?: 'right' | 'left' | 'start' | 'end' | 'none';
     /** @see https://tailwindcss.com/docs/clear */
@@ -1066,15 +1069,25 @@ interface TransformProps {
     scale?: 0 | 50 | 75 | 90 | 95 | 100 | 105 | 110 | 125 | 150 | 200 | number | (string & {});
     scaleX?: TransformProps['scale'];
     scaleY?: TransformProps['scale'];
+    /** @see https://tailwindcss.com/docs/scale (Z-axis, 3D) */
+    scaleZ?: TransformProps['scale'];
     /** Boolean sugar for 3D scale */
     scale3d?: boolean;
     /** @see https://tailwindcss.com/docs/rotate */
     rotate?: 0 | 1 | 2 | 3 | 6 | 12 | 45 | 90 | 180 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/rotate (X-axis, 3D) */
+    rotateX?: TransformProps['rotate'];
+    /** @see https://tailwindcss.com/docs/rotate (Y-axis, 3D) */
+    rotateY?: TransformProps['rotate'];
+    /** @see https://tailwindcss.com/docs/rotate (Z-axis, 3D) */
+    rotateZ?: TransformProps['rotate'];
     /** Boolean sugar for 3D rotate */
     rotate3d?: boolean;
     /** @see https://tailwindcss.com/docs/translate */
     translateX?: SpacingValue | FractionValue;
     translateY?: SpacingValue | FractionValue;
+    /** @see https://tailwindcss.com/docs/translate (Z-axis, 3D) */
+    translateZ?: SpacingValue;
     /** Boolean sugar for 3D translate */
     translate3d?: boolean;
     /** @see https://tailwindcss.com/docs/skew */
@@ -1085,7 +1098,8 @@ interface TransformProps {
     /** Transform rendering hints */
     transformGpu?: boolean;
     transformCpu?: boolean;
-    transformNone?: boolean;
+    /** @see https://tailwindcss.com/docs/transform */
+    transform?: 'none';
     /** @see https://tailwindcss.com/docs/perspective */
     perspective?: 'none' | (string & {});
     perspectiveOrigin?: (string & {});
@@ -1121,6 +1135,10 @@ interface InteractivityProps {
     caret?: 'auto' | ColorPropValue;
     /** @see https://tailwindcss.com/docs/pointer-events */
     pointerEvents?: 'none' | 'auto';
+    /** @see https://tailwindcss.com/docs/field-sizing */
+    fieldSizing?: 'fixed' | 'content';
+    /** @see https://tailwindcss.com/docs/color-scheme */
+    scheme?: 'normal' | 'dark' | 'light' | 'light-dark' | 'only-dark' | 'only-light';
     /** @see https://tailwindcss.com/docs/resize */
     resize?: 'none' | 'y' | 'x' | boolean;
     /** @see https://tailwindcss.com/docs/scroll-behavior */

package/dist/index.d.ts

@@ -61,6 +61,7 @@ declare function transformSourceCode(source: string): {
     transformed: boolean;
     usesRuntime: boolean;
     usesColorVar: boolean;
+    classes: Set<string>;
 };
 
 /**
@@ -606,6 +607,8 @@ interface LayoutProps {
     container?: boolean;
     /** Boolean sugar for prose */
     prose?: boolean;
+    /** Boolean sugar for prose-invert (requires @tailwindcss/typography plugin) */
+    proseInvert?: boolean;
     /** @see https://tailwindcss.com/docs/float */
     float?: 'right' | 'left' | 'start' | 'end' | 'none';
     /** @see https://tailwindcss.com/docs/clear */
@@ -1066,15 +1069,25 @@ interface TransformProps {
     scale?: 0 | 50 | 75 | 90 | 95 | 100 | 105 | 110 | 125 | 150 | 200 | number | (string & {});
     scaleX?: TransformProps['scale'];
     scaleY?: TransformProps['scale'];
+    /** @see https://tailwindcss.com/docs/scale (Z-axis, 3D) */
+    scaleZ?: TransformProps['scale'];
     /** Boolean sugar for 3D scale */
     scale3d?: boolean;
     /** @see https://tailwindcss.com/docs/rotate */
     rotate?: 0 | 1 | 2 | 3 | 6 | 12 | 45 | 90 | 180 | number | (string & {});
+    /** @see https://tailwindcss.com/docs/rotate (X-axis, 3D) */
+    rotateX?: TransformProps['rotate'];
+    /** @see https://tailwindcss.com/docs/rotate (Y-axis, 3D) */
+    rotateY?: TransformProps['rotate'];
+    /** @see https://tailwindcss.com/docs/rotate (Z-axis, 3D) */
+    rotateZ?: TransformProps['rotate'];
     /** Boolean sugar for 3D rotate */
     rotate3d?: boolean;
     /** @see https://tailwindcss.com/docs/translate */
     translateX?: SpacingValue | FractionValue;
     translateY?: SpacingValue | FractionValue;
+    /** @see https://tailwindcss.com/docs/translate (Z-axis, 3D) */
+    translateZ?: SpacingValue;
     /** Boolean sugar for 3D translate */
     translate3d?: boolean;
     /** @see https://tailwindcss.com/docs/skew */
@@ -1085,7 +1098,8 @@ interface TransformProps {
     /** Transform rendering hints */
     transformGpu?: boolean;
     transformCpu?: boolean;
-    transformNone?: boolean;
+    /** @see https://tailwindcss.com/docs/transform */
+    transform?: 'none';
     /** @see https://tailwindcss.com/docs/perspective */
     perspective?: 'none' | (string & {});
     perspectiveOrigin?: (string & {});
@@ -1121,6 +1135,10 @@ interface InteractivityProps {
     caret?: 'auto' | ColorPropValue;
     /** @see https://tailwindcss.com/docs/pointer-events */
     pointerEvents?: 'none' | 'auto';
+    /** @see https://tailwindcss.com/docs/field-sizing */
+    fieldSizing?: 'fixed' | 'content';
+    /** @see https://tailwindcss.com/docs/color-scheme */
+    scheme?: 'normal' | 'dark' | 'light' | 'light-dark' | 'only-dark' | 'only-light';
     /** @see https://tailwindcss.com/docs/resize */
     resize?: 'none' | 'y' | 'x' | boolean;
     /** @see https://tailwindcss.com/docs/scroll-behavior */

package/dist/index.js

@@ -411,6 +411,7 @@ var PROPERTY_MAP = {
   color: "text",
   text: "text",
   fontWeight: "font",
+  weight: "font",
   fontFamily: "font",
   fontStretch: "font-stretch",
   textAlign: "text",
@@ -502,9 +503,14 @@ var PROPERTY_MAP = {
   scale: "scale",
   scaleX: "scale-x",
   scaleY: "scale-y",
+  scaleZ: "scale-z",
   rotate: "rotate",
+  rotateX: "rotate-x",
+  rotateY: "rotate-y",
+  rotateZ: "rotate-z",
   translateX: "translate-x",
   translateY: "translate-y",
+  translateZ: "translate-z",
   skewX: "skew-x",
   skewY: "skew-y",
   origin: "origin",
@@ -512,6 +518,7 @@ var PROPERTY_MAP = {
   perspective: "perspective",
   perspectiveOrigin: "perspective-origin",
   transformStyle: "transform",
+  transform: "transform",
   // Transitions & Animation
   transition: "transition",
   transitionBehavior: "transition",
@@ -529,6 +536,8 @@ var PROPERTY_MAP = {
   cursor: "cursor",
   caret: "caret",
   pointerEvents: "pointer-events",
+  fieldSizing: "field-sizing",
+  scheme: "scheme",
   resize: "resize",
   scroll: "scroll",
   scrollM: "scroll-m",
@@ -902,6 +911,7 @@ var BOOLEAN_SHORTHANDS = /* @__PURE__ */ new Set([
   // Misc
   "container",
   "prose",
+  "proseInvert",
   "srOnly",
   "notSrOnly",
   "isolate",
@@ -928,8 +938,7 @@ var BOOLEAN_SHORTHANDS = /* @__PURE__ */ new Set([
   "rotate3d",
   "translate3d",
   "transformGpu",
-  "transformCpu",
-  "transformNone"
+  "transformCpu"
 ]);
 var BOOLEAN_TO_CLASS = {
   inlineBlock: "inline-block",
@@ -967,7 +976,8 @@ var BOOLEAN_TO_CLASS = {
   translate3d: "translate-3d",
   transformGpu: "transform-gpu",
   transformCpu: "transform-cpu",
-  transformNone: "transform-none"
+  // Misc
+  proseInvert: "prose-invert"
 };
 var SNAP_DIRECT_MAP = {
   snapAlign: {
@@ -1024,10 +1034,16 @@ var NEGATIVE_ALLOWED = /* @__PURE__ */ new Set([
   "row-start",
   "row-end",
   "rotate",
+  "rotate-x",
+  "rotate-y",
+  "rotate-z",
+  "scale-z",
   "skew-x",
   "skew-y",
   "translate-x",
   "translate-y",
+  "translate-z",
+  "mask",
   "space-x",
   "space-y",
   "tracking",
@@ -1067,7 +1083,7 @@ function normalizeArbitraryVariant(key) {
   return key.replace(/\s+/g, "");
 }
 function normalizeArbitraryValue(value) {
-  return value.trim().replace(/\s*([+*/(),:])\s*/g, "$1").replace(/\s+/g, "_");
+  return value.trim().replace(/\s+/g, "_");
 }
 var FRACTION_SUPPORTED_PROPS = /* @__PURE__ */ new Set([
   // Sizing (both rawKey and resolved key forms)
@@ -1108,11 +1124,15 @@ var FRACTION_SUPPORTED_PROPS = /* @__PURE__ */ new Set([
   "translate-x",
   "translateX",
   "translate-y",
-  "translateY"
+  "translateY",
+  // Aspect
+  "aspect"
 ]);
 function needsArbitraryBrackets(value) {
-  return /^\d+(\.\d+)?(px|rem|em|%|vh|vw|ch|dvh|dvw|svh|svw|lvh|lvw|cqw|cqh|deg|rad|turn|grad|ms|s|fr)$/.test(value) || // Units
+  return /^\d+(\.\d+)?(px|rem|em|%|vh|vw|ch|dvh|dvw|svh|svw|lvh|lvw|cqw|cqh|deg|rad|turn|grad|ms|s|fr)$/.test(value) || // Positive units
+  /^-\d+(\.\d+)?(px|rem|em|%|vh|vw|ch|dvh|dvw|svh|svw|lvh|lvw|cqw|cqh|deg|rad|turn|grad|ms|s|fr)$/.test(value) || // Negative units like -1px, -2rem
   /^\.\d+(px|rem|em|%|vh|vw|ch)?$/.test(value) || // Values starting with . like .25em
+  /^-\.\d+(px|rem|em|%|vh|vw|ch)?$/.test(value) || // Negative values starting with -. like -.25em
   value.startsWith("#") || // Hex colors
   value.startsWith("rgb") || // RGB colors
   value.startsWith("hsl") || // HSL colors
@@ -1564,12 +1584,13 @@ function transform(szProp, prefix = "", mangleMap) {
     }
     let className = prefix;
     if (rawKey === "willChange" && typeof value === "string") {
-      if (value === "scroll") {
-        classes.push(`${prefix}will-change-scroll-position`);
+      const WILL_CHANGE_KEYWORDS = /* @__PURE__ */ new Set(["auto", "scroll", "contents", "transform"]);
+      if (WILL_CHANGE_KEYWORDS.has(value)) {
+        classes.push(`${prefix}will-change-${value}`);
       } else if (value.startsWith("--")) {
         classes.push(`${prefix}will-change-(${value})`);
       } else {
-        classes.push(`${prefix}will-change-${value}`);
+        classes.push(`${prefix}will-change-[${normalizeArbitraryValue(value)}]`);
       }
       continue;
     }
@@ -1683,10 +1704,10 @@ function transform(szProp, prefix = "", mangleMap) {
         continue;
       }
       if (rawKey === "textOverflow") {
-        if (value === "ellipsis") {
-          classes.push(`${prefix}truncate`);
-        } else {
+        if (value === "ellipsis" || value === "clip") {
           classes.push(`${prefix}text-${value}`);
+        } else {
+          classes.push(`${prefix}text-[${value}]`);
         }
         continue;
       }
@@ -1754,8 +1775,13 @@ function transform(szProp, prefix = "", mangleMap) {
           className += `font-${sValue}`;
         } else if (sValue.startsWith("--")) {
           className += `font-stretch-(${sValue})`;
-        } else if (/^\d+%$/.test(sValue)) {
-          className += `font-stretch-${sValue}`;
+        } else if (/^\d+(\.\d+)?%$/.test(sValue)) {
+          const valNum = parseFloat(sValue);
+          if (sValue.includes(".") || !Number.isInteger(valNum)) {
+            className += `font-stretch-[${sValue}]`;
+          } else {
+            className += `font-stretch-${sValue}`;
+          }
         } else {
           className += `font-stretch-[${sValue}]`;
         }
@@ -1876,6 +1902,17 @@ function transform(szProp, prefix = "", mangleMap) {
         classes.push(className);
         continue;
       }
+      if (rawKey === "bgRepeat" || rawKey === "backgroundRepeat") {
+        if (value === "repeat") {
+          className += "bg-repeat";
+        } else if (value === "no-repeat") {
+          className += "bg-no-repeat";
+        } else {
+          className += `bg-repeat-${value}`;
+        }
+        classes.push(className);
+        continue;
+      }
       if (rawKey === "maskSize") {
         className += `mask-${value}`;
         classes.push(className);
@@ -1901,8 +1938,11 @@ function transform(szProp, prefix = "", mangleMap) {
         classes.push(className);
         continue;
       }
-      if (rawKey === "content") {
-        if (value.startsWith("--")) {
+      if (rawKey === "content" || rawKey === "alignContent") {
+        const ALIGN_CONTENT_KEYWORDS = /* @__PURE__ */ new Set(["normal", "center", "start", "end", "between", "around", "evenly", "baseline", "stretch"]);
+        if (ALIGN_CONTENT_KEYWORDS.has(value)) {
+          className += `content-${value}`;
+        } else if (value.startsWith("--")) {
           className += `content-(${value})`;
         } else if (!["none", "empty"].includes(value)) {
           className += `content-[${value}]`;
@@ -2052,7 +2092,6 @@ function transform(szProp, prefix = "", mangleMap) {
         classes.push(className);
         continue;
       }
-      const isAspectRatio = key === "aspect" && /^\d+\/\d+$/.test(finalValue);
       if (finalValue.startsWith("--")) {
         const typeHint = CSS_VAR_TYPE_HINTS[rawKey];
         if (typeHint) {
@@ -2066,10 +2105,19 @@ function transform(szProp, prefix = "", mangleMap) {
         if (!FRACTION_SUPPORTED_PROPS.has(rawKey)) {
           finalValue = `[${finalValue}]`;
         }
-      } else if (needsArbitraryBrackets(finalValue) || isAspectRatio || /^\d+\.\d+%$/.test(finalValue)) {
+      } else if (key === "aspect" && /^[0-9]+(?:\.[0-9]+)?\/[0-9]+(?:\.[0-9]+)?$/.test(finalValue)) {
+        if (finalValue === "auto" || finalValue === "square" || finalValue === "video" || /^\d+\/\d+$/.test(finalValue)) {
+        } else {
+          finalValue = `[${finalValue}]`;
+        }
+      } else if (needsArbitraryBrackets(finalValue) || /^\d+\.\d+%$/.test(finalValue)) {
         finalValue = `[${normalizeArbitraryValue(finalValue)}]`;
       }
-      className += `${key}-${finalValue}`;
+      if (finalValue.startsWith("-") && NEGATIVE_ALLOWED.has(key)) {
+        className = `-${prefix}${key}-${finalValue.substring(1)}`;
+      } else {
+        className += `${key}-${finalValue}`;
+      }
       if (important) {
         className += "!";
       }
@@ -2130,8 +2178,9 @@ function transformSourceCode(source) {
   let usesRuntime = false;
   let usesColorVar = false;
   let transformed = false;
+  const collectedClasses = /* @__PURE__ */ new Set();
   if (!source.includes("sz")) {
-    return { code: source, transformed: false, usesRuntime: false, usesColorVar: false };
+    return { code: source, transformed: false, usesRuntime: false, usesColorVar: false, classes: collectedClasses };
   }
   try {
     const result = babel.transformSync(source, {
@@ -2149,12 +2198,29 @@ function transformSourceCode(source) {
           return {
             visitor: {
               JSXAttribute(path) {
-                if (path.node.name.name !== "sz") {
+                const attrName = t.isJSXIdentifier(path.node.name) ? path.node.name.name : "";
+                if (attrName === "className" || attrName === "class") {
+                  const val = path.node.value;
+                  if (t.isStringLiteral(val)) {
+                    for (const c of val.value.split(/\s+/)) {
+                      if (c) {
+                        collectedClasses.add(c);
+                      }
+                    }
+                  }
+                  return;
+                }
+                if (attrName !== "sz") {
                   return;
                 }
                 const value = path.node.value;
                 if (t.isStringLiteral(value)) {
                   path.node.name.name = "className";
+                  for (const c of value.value.split(/\s+/)) {
+                    if (c) {
+                      collectedClasses.add(c);
+                    }
+                  }
                   transformed = true;
                   return;
                 }
@@ -2164,6 +2230,11 @@ function transformSourceCode(source) {
                     const staticObject = evaluateStaticObject(expression);
                     if (staticObject !== null) {
                       const { className, attributes } = transform(staticObject);
+                      for (const c of className.split(/\s+/)) {
+                        if (c) {
+                          collectedClasses.add(c);
+                        }
+                      }
                       path.node.name.name = "className";
                       path.node.value = t.stringLiteral(className);
                       Object.entries(attributes).forEach(([key, val]) => {
@@ -2202,6 +2273,11 @@ function transformSourceCode(source) {
                         );
                       }
                       const allClasses = [...staticClasses, ...partial.rawClasses, ...cssVarClasses].join(" ");
+                      for (const c of allClasses.split(/\s+/)) {
+                        if (c) {
+                          collectedClasses.add(c);
+                        }
+                      }
                       path.node.name.name = "className";
                       path.node.value = t.stringLiteral(allClasses);
                       if (styleProps.length > 0 && path.parentPath?.isJSXOpeningElement()) {
@@ -2230,8 +2306,14 @@ function transformSourceCode(source) {
                           path.node.name.name = "className";
                           if (t.isStringLiteral(resolved)) {
                             path.node.value = resolved;
+                            for (const c of resolved.value.split(/\s+/)) {
+                              if (c) {
+                                collectedClasses.add(c);
+                              }
+                            }
                           } else {
                             value.expression = resolved;
+                            collectFromExpr(resolved, collectedClasses);
                           }
                           transformed = true;
                           return;
@@ -2245,8 +2327,14 @@ function transformSourceCode(source) {
                       path.node.name.name = "className";
                       if (t.isStringLiteral(resolved)) {
                         path.node.value = resolved;
+                        for (const c of resolved.value.split(/\s+/)) {
+                          if (c) {
+                            collectedClasses.add(c);
+                          }
+                        }
                       } else {
                         value.expression = resolved;
+                        collectFromExpr(resolved, collectedClasses);
                       }
                       transformed = true;
                       return;
@@ -2271,11 +2359,12 @@ function transformSourceCode(source) {
       code: result?.code || source,
       transformed,
       usesRuntime,
-      usesColorVar
+      usesColorVar,
+      classes: collectedClasses
     };
   } catch (e) {
     console.warn("[csszyx] AST transform failed, falling back to original code:", e);
-    return { code: source, transformed: false, usesRuntime: false, usesColorVar: false };
+    return { code: source, transformed: false, usesRuntime: false, usesColorVar: false, classes: collectedClasses };
   }
 }
 function tryStaticTransformNode(node) {
@@ -2514,6 +2603,18 @@ function generateStyleValueExpression(info) {
       );
   }
 }
+function collectFromExpr(node, classes) {
+  if (t.isStringLiteral(node)) {
+    for (const c of node.value.split(/\s+/)) {
+      if (c) {
+        classes.add(c);
+      }
+    }
+  } else if (t.isConditionalExpression(node)) {
+    collectFromExpr(node.consequent, classes);
+    collectFromExpr(node.alternate, classes);
+  }
+}
 function buildCSSVarClassName(info) {
   const { twPrefix, varName, variantChain } = info;
   const variantPrefix = variantChain ? `${getVariantPrefix(variantChain)}:` : "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csszyx/compiler",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Core compiler and transformation logic for csszyx",
   "keywords": [
     "csszyx",
@@ -38,7 +38,7 @@
     "@babel/core": "^7.23.7",
     "@babel/types": "^7.23.6",
     "@babel/traverse": "^7.23.7",
-    "@csszyx/core": "0.2.0"
+    "@csszyx/core": "0.3.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",