@csszyx/compiler 0.1.3 → 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

@@ -83,6 +83,8 @@ var PROPERTY_CATEGORY_MAP = {
   py: 0 /* SPACING */,
   ps: 0 /* SPACING */,
   pe: 0 /* SPACING */,
+  pbs: 0 /* SPACING */,
+  pbe: 0 /* SPACING */,
   m: 0 /* SPACING */,
   mt: 0 /* SPACING */,
   mr: 0 /* SPACING */,
@@ -92,6 +94,8 @@ var PROPERTY_CATEGORY_MAP = {
   my: 0 /* SPACING */,
   ms: 0 /* SPACING */,
   me: 0 /* SPACING */,
+  mbs: 0 /* SPACING */,
+  mbe: 0 /* SPACING */,
   spaceX: 0 /* SPACING */,
   spaceY: 0 /* SPACING */,
   gap: 0 /* SPACING */,
@@ -106,6 +110,10 @@ var PROPERTY_CATEGORY_MAP = {
   left: 0 /* SPACING */,
   start: 0 /* SPACING */,
   end: 0 /* SPACING */,
+  insetS: 0 /* SPACING */,
+  insetE: 0 /* SPACING */,
+  insetBs: 0 /* SPACING */,
+  insetBe: 0 /* SPACING */,
   w: 0 /* SPACING */,
   minW: 0 /* SPACING */,
   maxW: 0 /* SPACING */,
@@ -113,6 +121,12 @@ var PROPERTY_CATEGORY_MAP = {
   minH: 0 /* SPACING */,
   maxH: 0 /* SPACING */,
   size: 0 /* SPACING */,
+  blockSize: 0 /* SPACING */,
+  minBlockSize: 0 /* SPACING */,
+  maxBlockSize: 0 /* SPACING */,
+  inlineSize: 0 /* SPACING */,
+  minInlineSize: 0 /* SPACING */,
+  maxInlineSize: 0 /* SPACING */,
   basis: 0 /* SPACING */,
   indent: 0 /* SPACING */,
   scrollM: 0 /* SPACING */,
@@ -133,6 +147,10 @@ var PROPERTY_CATEGORY_MAP = {
   scrollPe: 0 /* SPACING */,
   scrollPx: 0 /* SPACING */,
   scrollPy: 0 /* SPACING */,
+  scrollPbs: 0 /* SPACING */,
+  scrollPbe: 0 /* SPACING */,
+  scrollMbs: 0 /* SPACING */,
+  scrollMbe: 0 /* SPACING */,
   translateX: 0 /* SPACING */,
   translateY: 0 /* SPACING */,
   borderSpacing: 0 /* SPACING */,
@@ -200,6 +218,8 @@ var PROPERTY_CATEGORY_MAP = {
   borderY: 3 /* UNITLESS */,
   borderS: 3 /* UNITLESS */,
   borderE: 3 /* UNITLESS */,
+  borderBs: 3 /* UNITLESS */,
+  borderBe: 3 /* UNITLESS */,
   ring: 3 /* UNITLESS */,
   outline: 3 /* UNITLESS */,
   leading: 3 /* UNITLESS */,
@@ -344,6 +364,8 @@ var PROPERTY_MAP = {
   borderY: "border-y",
   borderS: "border-s",
   borderE: "border-e",
+  borderBs: "border-bs",
+  borderBe: "border-be",
   // Divide
   divideX: "divide-x",
   divideY: "divide-y",
@@ -369,6 +391,8 @@ var PROPERTY_MAP = {
   py: "py",
   ps: "ps",
   pe: "pe",
+  pbs: "pbs",
+  pbe: "pbe",
   m: "m",
   mt: "mt",
   mr: "mr",
@@ -378,6 +402,8 @@ var PROPERTY_MAP = {
   my: "my",
   ms: "ms",
   me: "me",
+  mbs: "mbs",
+  mbe: "mbe",
   // Space between
   spaceX: "space-x",
   spaceY: "space-y",
@@ -389,6 +415,12 @@ var PROPERTY_MAP = {
   minH: "min-h",
   maxH: "max-h",
   size: "size",
+  blockSize: "block",
+  minBlockSize: "min-block",
+  maxBlockSize: "max-block",
+  inlineSize: "inline",
+  minInlineSize: "min-inline",
+  maxInlineSize: "max-inline",
   // Layout
   aspect: "aspect",
   columns: "columns",
@@ -418,14 +450,20 @@ var PROPERTY_MAP = {
   right: "right",
   bottom: "bottom",
   left: "left",
-  start: "start",
-  end: "end",
+  // TW v4.2: start/end now emit inset-s-*/inset-e-* (same CSS, deprecated old class names)
+  start: "inset-s",
+  end: "inset-e",
+  insetS: "inset-s",
+  insetE: "inset-e",
+  insetBs: "inset-bs",
+  insetBe: "inset-be",
   // Visibility
   visibility: "visibility",
   // Typography
   color: "text",
   text: "text",
   fontWeight: "font",
+  weight: "font",
   fontFamily: "font",
   fontStretch: "font-stretch",
   textAlign: "text",
@@ -447,6 +485,7 @@ var PROPERTY_MAP = {
   leading: "leading",
   tracking: "tracking",
   lineClamp: "line-clamp",
+  fontFeatures: "font-features",
   list: "list",
   listPos: "list",
   listImg: "list-image",
@@ -516,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",
@@ -526,6 +570,7 @@ var PROPERTY_MAP = {
   perspective: "perspective",
   perspectiveOrigin: "perspective-origin",
   transformStyle: "transform",
+  transform: "transform",
   // Transitions & Animation
   transition: "transition",
   transitionBehavior: "transition",
@@ -543,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",
@@ -563,6 +610,10 @@ var PROPERTY_MAP = {
   scrollPe: "scroll-pe",
   scrollPx: "scroll-px",
   scrollPy: "scroll-py",
+  scrollPbs: "scroll-pbs",
+  scrollPbe: "scroll-pbe",
+  scrollMbs: "scroll-mbs",
+  scrollMbe: "scroll-mbe",
   snapAlign: "snap",
   snapStop: "snap",
   snapType: "snap",
@@ -912,6 +963,7 @@ var BOOLEAN_SHORTHANDS = /* @__PURE__ */ new Set([
   // Misc
   "container",
   "prose",
+  "proseInvert",
   "srOnly",
   "notSrOnly",
   "isolate",
@@ -938,8 +990,7 @@ var BOOLEAN_SHORTHANDS = /* @__PURE__ */ new Set([
   "rotate3d",
   "translate3d",
   "transformGpu",
-  "transformCpu",
-  "transformNone"
+  "transformCpu"
 ]);
 var BOOLEAN_TO_CLASS = {
   inlineBlock: "inline-block",
@@ -977,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: {
@@ -1011,6 +1063,8 @@ var NEGATIVE_ALLOWED = /* @__PURE__ */ new Set([
   "my",
   "ms",
   "me",
+  "mbs",
+  "mbe",
   "top",
   "right",
   "bottom",
@@ -1018,8 +1072,11 @@ var NEGATIVE_ALLOWED = /* @__PURE__ */ new Set([
   "inset",
   "inset-x",
   "inset-y",
-  "start",
-  "end",
+  // TW v4.2: start/end now map to inset-s/inset-e
+  "inset-s",
+  "inset-e",
+  "inset-bs",
+  "inset-be",
   "z",
   "order",
   "col",
@@ -1029,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",
@@ -1072,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)
@@ -1113,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
@@ -1569,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;
     }
@@ -1688,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;
       }
@@ -1759,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}]`;
         }
@@ -1881,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);
@@ -1906,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}]`;
@@ -2057,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) {
@@ -2071,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 += "!";
       }
@@ -2135,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, {
@@ -2154,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;
                 }
@@ -2169,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]) => {
@@ -2207,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()) {
@@ -2235,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;
@@ -2250,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;
@@ -2276,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) {
@@ -2519,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>;
 };
 
 /**
@@ -530,7 +531,7 @@ type SpacingValue = SpacingScale | 'px' | 'auto' | (number & {}) | (string & {})
 /** Negative spacing value */
 type NegativeSpacingValue = SpacingValue | number;
 /** Tailwind color names */
-type ColorName = 'inherit' | 'current' | 'transparent' | 'black' | 'white' | 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose';
+type ColorName = 'inherit' | 'current' | 'transparent' | 'black' | 'white' | 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'mauve' | 'olive' | 'mist' | 'taupe';
 /** Tailwind color shades */
 type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
 /** Color value (string-based) */
@@ -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 */
@@ -642,6 +645,14 @@ interface LayoutProps {
     left?: NegativeSpacingValue;
     start?: SpacingValue;
     end?: SpacingValue;
+    /** inset-inline-start (camelCase alias for start, emits inset-s-*) */
+    insetS?: SpacingValue;
+    /** inset-inline-end (camelCase alias for end, emits inset-e-*) */
+    insetE?: SpacingValue;
+    /** inset-block-start */
+    insetBs?: SpacingValue;
+    /** inset-block-end */
+    insetBe?: SpacingValue;
     /** @see https://tailwindcss.com/docs/visibility */
     visibility?: 'visible' | 'hidden' | 'collapse';
     visible?: boolean;
@@ -729,6 +740,10 @@ interface SpacingProps {
     ps?: SpacingValue;
     /** Padding - inline end (logical) */
     pe?: SpacingValue;
+    /** Padding - block-start (logical) */
+    pbs?: SpacingValue;
+    /** Padding - block-end (logical) */
+    pbe?: SpacingValue;
     /** Margin - all sides */
     m?: NegativeSpacingValue;
     /** Margin - X axis (left/right) */
@@ -747,6 +762,10 @@ interface SpacingProps {
     ms?: NegativeSpacingValue;
     /** Margin - inline end (logical) */
     me?: NegativeSpacingValue;
+    /** Margin - block-start (logical) */
+    mbs?: NegativeSpacingValue;
+    /** Margin - block-end (logical) */
+    mbe?: NegativeSpacingValue;
     /** Space between child elements - X axis */
     spaceX?: NegativeSpacingValue;
     /** Space between child elements - Y axis */
@@ -774,6 +793,18 @@ interface SizingProps {
     maxH?: SpacingScale | 'px' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | (string & {});
     /** @see https://tailwindcss.com/docs/size */
     size?: SpacingScale | 'px' | 'auto' | 'full' | 'min' | 'max' | 'fit' | (string & {});
+    /** @see https://tailwindcss.com/docs/block-size — block-size (logical height) */
+    blockSize?: SpacingScale | 'px' | 'auto' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
+    /** @see https://tailwindcss.com/docs/min-block-size */
+    minBlockSize?: SpacingScale | 'px' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | (string & {});
+    /** @see https://tailwindcss.com/docs/max-block-size */
+    maxBlockSize?: SpacingScale | 'px' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | (string & {});
+    /** @see https://tailwindcss.com/docs/inline-size — inline-size (logical width) */
+    inlineSize?: SpacingScale | 'px' | 'auto' | 'full' | 'screen' | 'svw' | 'lvw' | 'dvw' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
+    /** @see https://tailwindcss.com/docs/min-inline-size */
+    minInlineSize?: SpacingScale | 'px' | 'full' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
+    /** @see https://tailwindcss.com/docs/max-inline-size */
+    maxInlineSize?: SpacingScale | 'px' | 'full' | 'none' | 'prose' | 'min' | 'max' | 'fit' | ContainerSize | FractionValue | (string & {});
 }
 /**
  *
@@ -858,6 +889,8 @@ interface TypographyProps {
     hyphens?: 'none' | 'manual' | 'auto';
     /** @see https://tailwindcss.com/docs/content — also handles align-content */
     content?: 'none' | 'normal' | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'baseline' | 'stretch' | (string & {});
+    /** @see https://tailwindcss.com/docs/font-feature-settings */
+    fontFeatures?: string & {};
     /** @see https://tailwindcss.com/docs/forced-color-adjust */
     forcedColorAdjust?: 'auto' | 'none';
 }
@@ -926,6 +959,10 @@ interface BorderProps {
     borderL?: boolean | 0 | 2 | 4 | 8 | (string & {});
     borderS?: boolean | 0 | 2 | 4 | 8 | (string & {});
     borderE?: boolean | 0 | 2 | 4 | 8 | (string & {});
+    /** border-block-start width */
+    borderBs?: boolean | 0 | 2 | 4 | 8 | (string & {});
+    /** border-block-end width */
+    borderBe?: boolean | 0 | 2 | 4 | 8 | (string & {});
     /** @see https://tailwindcss.com/docs/border-color */
     borderColor?: ColorPropValue;
     /** @see https://tailwindcss.com/docs/border-style */
@@ -1032,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 */
@@ -1051,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 & {});
@@ -1087,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 */
@@ -1111,6 +1163,14 @@ interface InteractivityProps {
     scrollPl?: SpacingValue;
     scrollPs?: SpacingValue;
     scrollPe?: SpacingValue;
+    /** scroll-padding-block-start */
+    scrollPbs?: SpacingValue;
+    /** scroll-padding-block-end */
+    scrollPbe?: SpacingValue;
+    /** scroll-margin-block-start */
+    scrollMbs?: SpacingValue;
+    /** scroll-margin-block-end */
+    scrollMbe?: SpacingValue;
     /** @see https://tailwindcss.com/docs/scroll-snap-align */
     snapAlign?: 'start' | 'end' | 'center' | 'align-none';
     /** @see https://tailwindcss.com/docs/scroll-snap-stop */

package/dist/index.d.ts

@@ -61,6 +61,7 @@ declare function transformSourceCode(source: string): {
     transformed: boolean;
     usesRuntime: boolean;
     usesColorVar: boolean;
+    classes: Set<string>;
 };
 
 /**
@@ -530,7 +531,7 @@ type SpacingValue = SpacingScale | 'px' | 'auto' | (number & {}) | (string & {})
 /** Negative spacing value */
 type NegativeSpacingValue = SpacingValue | number;
 /** Tailwind color names */
-type ColorName = 'inherit' | 'current' | 'transparent' | 'black' | 'white' | 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose';
+type ColorName = 'inherit' | 'current' | 'transparent' | 'black' | 'white' | 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'mauve' | 'olive' | 'mist' | 'taupe';
 /** Tailwind color shades */
 type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
 /** Color value (string-based) */
@@ -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 */
@@ -642,6 +645,14 @@ interface LayoutProps {
     left?: NegativeSpacingValue;
     start?: SpacingValue;
     end?: SpacingValue;
+    /** inset-inline-start (camelCase alias for start, emits inset-s-*) */
+    insetS?: SpacingValue;
+    /** inset-inline-end (camelCase alias for end, emits inset-e-*) */
+    insetE?: SpacingValue;
+    /** inset-block-start */
+    insetBs?: SpacingValue;
+    /** inset-block-end */
+    insetBe?: SpacingValue;
     /** @see https://tailwindcss.com/docs/visibility */
     visibility?: 'visible' | 'hidden' | 'collapse';
     visible?: boolean;
@@ -729,6 +740,10 @@ interface SpacingProps {
     ps?: SpacingValue;
     /** Padding - inline end (logical) */
     pe?: SpacingValue;
+    /** Padding - block-start (logical) */
+    pbs?: SpacingValue;
+    /** Padding - block-end (logical) */
+    pbe?: SpacingValue;
     /** Margin - all sides */
     m?: NegativeSpacingValue;
     /** Margin - X axis (left/right) */
@@ -747,6 +762,10 @@ interface SpacingProps {
     ms?: NegativeSpacingValue;
     /** Margin - inline end (logical) */
     me?: NegativeSpacingValue;
+    /** Margin - block-start (logical) */
+    mbs?: NegativeSpacingValue;
+    /** Margin - block-end (logical) */
+    mbe?: NegativeSpacingValue;
     /** Space between child elements - X axis */
     spaceX?: NegativeSpacingValue;
     /** Space between child elements - Y axis */
@@ -774,6 +793,18 @@ interface SizingProps {
     maxH?: SpacingScale | 'px' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | (string & {});
     /** @see https://tailwindcss.com/docs/size */
     size?: SpacingScale | 'px' | 'auto' | 'full' | 'min' | 'max' | 'fit' | (string & {});
+    /** @see https://tailwindcss.com/docs/block-size — block-size (logical height) */
+    blockSize?: SpacingScale | 'px' | 'auto' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
+    /** @see https://tailwindcss.com/docs/min-block-size */
+    minBlockSize?: SpacingScale | 'px' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | (string & {});
+    /** @see https://tailwindcss.com/docs/max-block-size */
+    maxBlockSize?: SpacingScale | 'px' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit' | (string & {});
+    /** @see https://tailwindcss.com/docs/inline-size — inline-size (logical width) */
+    inlineSize?: SpacingScale | 'px' | 'auto' | 'full' | 'screen' | 'svw' | 'lvw' | 'dvw' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
+    /** @see https://tailwindcss.com/docs/min-inline-size */
+    minInlineSize?: SpacingScale | 'px' | 'full' | 'min' | 'max' | 'fit' | FractionValue | (string & {});
+    /** @see https://tailwindcss.com/docs/max-inline-size */
+    maxInlineSize?: SpacingScale | 'px' | 'full' | 'none' | 'prose' | 'min' | 'max' | 'fit' | ContainerSize | FractionValue | (string & {});
 }
 /**
  *
@@ -858,6 +889,8 @@ interface TypographyProps {
     hyphens?: 'none' | 'manual' | 'auto';
     /** @see https://tailwindcss.com/docs/content — also handles align-content */
     content?: 'none' | 'normal' | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'baseline' | 'stretch' | (string & {});
+    /** @see https://tailwindcss.com/docs/font-feature-settings */
+    fontFeatures?: string & {};
     /** @see https://tailwindcss.com/docs/forced-color-adjust */
     forcedColorAdjust?: 'auto' | 'none';
 }
@@ -926,6 +959,10 @@ interface BorderProps {
     borderL?: boolean | 0 | 2 | 4 | 8 | (string & {});
     borderS?: boolean | 0 | 2 | 4 | 8 | (string & {});
     borderE?: boolean | 0 | 2 | 4 | 8 | (string & {});
+    /** border-block-start width */
+    borderBs?: boolean | 0 | 2 | 4 | 8 | (string & {});
+    /** border-block-end width */
+    borderBe?: boolean | 0 | 2 | 4 | 8 | (string & {});
     /** @see https://tailwindcss.com/docs/border-color */
     borderColor?: ColorPropValue;
     /** @see https://tailwindcss.com/docs/border-style */
@@ -1032,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 */
@@ -1051,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 & {});
@@ -1087,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 */
@@ -1111,6 +1163,14 @@ interface InteractivityProps {
     scrollPl?: SpacingValue;
     scrollPs?: SpacingValue;
     scrollPe?: SpacingValue;
+    /** scroll-padding-block-start */
+    scrollPbs?: SpacingValue;
+    /** scroll-padding-block-end */
+    scrollPbe?: SpacingValue;
+    /** scroll-margin-block-start */
+    scrollMbs?: SpacingValue;
+    /** scroll-margin-block-end */
+    scrollMbe?: SpacingValue;
     /** @see https://tailwindcss.com/docs/scroll-snap-align */
     snapAlign?: 'start' | 'end' | 'center' | 'align-none';
     /** @see https://tailwindcss.com/docs/scroll-snap-stop */

package/dist/index.js

@@ -31,6 +31,8 @@ var PROPERTY_CATEGORY_MAP = {
   py: 0 /* SPACING */,
   ps: 0 /* SPACING */,
   pe: 0 /* SPACING */,
+  pbs: 0 /* SPACING */,
+  pbe: 0 /* SPACING */,
   m: 0 /* SPACING */,
   mt: 0 /* SPACING */,
   mr: 0 /* SPACING */,
@@ -40,6 +42,8 @@ var PROPERTY_CATEGORY_MAP = {
   my: 0 /* SPACING */,
   ms: 0 /* SPACING */,
   me: 0 /* SPACING */,
+  mbs: 0 /* SPACING */,
+  mbe: 0 /* SPACING */,
   spaceX: 0 /* SPACING */,
   spaceY: 0 /* SPACING */,
   gap: 0 /* SPACING */,
@@ -54,6 +58,10 @@ var PROPERTY_CATEGORY_MAP = {
   left: 0 /* SPACING */,
   start: 0 /* SPACING */,
   end: 0 /* SPACING */,
+  insetS: 0 /* SPACING */,
+  insetE: 0 /* SPACING */,
+  insetBs: 0 /* SPACING */,
+  insetBe: 0 /* SPACING */,
   w: 0 /* SPACING */,
   minW: 0 /* SPACING */,
   maxW: 0 /* SPACING */,
@@ -61,6 +69,12 @@ var PROPERTY_CATEGORY_MAP = {
   minH: 0 /* SPACING */,
   maxH: 0 /* SPACING */,
   size: 0 /* SPACING */,
+  blockSize: 0 /* SPACING */,
+  minBlockSize: 0 /* SPACING */,
+  maxBlockSize: 0 /* SPACING */,
+  inlineSize: 0 /* SPACING */,
+  minInlineSize: 0 /* SPACING */,
+  maxInlineSize: 0 /* SPACING */,
   basis: 0 /* SPACING */,
   indent: 0 /* SPACING */,
   scrollM: 0 /* SPACING */,
@@ -81,6 +95,10 @@ var PROPERTY_CATEGORY_MAP = {
   scrollPe: 0 /* SPACING */,
   scrollPx: 0 /* SPACING */,
   scrollPy: 0 /* SPACING */,
+  scrollPbs: 0 /* SPACING */,
+  scrollPbe: 0 /* SPACING */,
+  scrollMbs: 0 /* SPACING */,
+  scrollMbe: 0 /* SPACING */,
   translateX: 0 /* SPACING */,
   translateY: 0 /* SPACING */,
   borderSpacing: 0 /* SPACING */,
@@ -148,6 +166,8 @@ var PROPERTY_CATEGORY_MAP = {
   borderY: 3 /* UNITLESS */,
   borderS: 3 /* UNITLESS */,
   borderE: 3 /* UNITLESS */,
+  borderBs: 3 /* UNITLESS */,
+  borderBe: 3 /* UNITLESS */,
   ring: 3 /* UNITLESS */,
   outline: 3 /* UNITLESS */,
   leading: 3 /* UNITLESS */,
@@ -292,6 +312,8 @@ var PROPERTY_MAP = {
   borderY: "border-y",
   borderS: "border-s",
   borderE: "border-e",
+  borderBs: "border-bs",
+  borderBe: "border-be",
   // Divide
   divideX: "divide-x",
   divideY: "divide-y",
@@ -317,6 +339,8 @@ var PROPERTY_MAP = {
   py: "py",
   ps: "ps",
   pe: "pe",
+  pbs: "pbs",
+  pbe: "pbe",
   m: "m",
   mt: "mt",
   mr: "mr",
@@ -326,6 +350,8 @@ var PROPERTY_MAP = {
   my: "my",
   ms: "ms",
   me: "me",
+  mbs: "mbs",
+  mbe: "mbe",
   // Space between
   spaceX: "space-x",
   spaceY: "space-y",
@@ -337,6 +363,12 @@ var PROPERTY_MAP = {
   minH: "min-h",
   maxH: "max-h",
   size: "size",
+  blockSize: "block",
+  minBlockSize: "min-block",
+  maxBlockSize: "max-block",
+  inlineSize: "inline",
+  minInlineSize: "min-inline",
+  maxInlineSize: "max-inline",
   // Layout
   aspect: "aspect",
   columns: "columns",
@@ -366,14 +398,20 @@ var PROPERTY_MAP = {
   right: "right",
   bottom: "bottom",
   left: "left",
-  start: "start",
-  end: "end",
+  // TW v4.2: start/end now emit inset-s-*/inset-e-* (same CSS, deprecated old class names)
+  start: "inset-s",
+  end: "inset-e",
+  insetS: "inset-s",
+  insetE: "inset-e",
+  insetBs: "inset-bs",
+  insetBe: "inset-be",
   // Visibility
   visibility: "visibility",
   // Typography
   color: "text",
   text: "text",
   fontWeight: "font",
+  weight: "font",
   fontFamily: "font",
   fontStretch: "font-stretch",
   textAlign: "text",
@@ -395,6 +433,7 @@ var PROPERTY_MAP = {
   leading: "leading",
   tracking: "tracking",
   lineClamp: "line-clamp",
+  fontFeatures: "font-features",
   list: "list",
   listPos: "list",
   listImg: "list-image",
@@ -464,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",
@@ -474,6 +518,7 @@ var PROPERTY_MAP = {
   perspective: "perspective",
   perspectiveOrigin: "perspective-origin",
   transformStyle: "transform",
+  transform: "transform",
   // Transitions & Animation
   transition: "transition",
   transitionBehavior: "transition",
@@ -491,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",
@@ -511,6 +558,10 @@ var PROPERTY_MAP = {
   scrollPe: "scroll-pe",
   scrollPx: "scroll-px",
   scrollPy: "scroll-py",
+  scrollPbs: "scroll-pbs",
+  scrollPbe: "scroll-pbe",
+  scrollMbs: "scroll-mbs",
+  scrollMbe: "scroll-mbe",
   snapAlign: "snap",
   snapStop: "snap",
   snapType: "snap",
@@ -860,6 +911,7 @@ var BOOLEAN_SHORTHANDS = /* @__PURE__ */ new Set([
   // Misc
   "container",
   "prose",
+  "proseInvert",
   "srOnly",
   "notSrOnly",
   "isolate",
@@ -886,8 +938,7 @@ var BOOLEAN_SHORTHANDS = /* @__PURE__ */ new Set([
   "rotate3d",
   "translate3d",
   "transformGpu",
-  "transformCpu",
-  "transformNone"
+  "transformCpu"
 ]);
 var BOOLEAN_TO_CLASS = {
   inlineBlock: "inline-block",
@@ -925,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: {
@@ -959,6 +1011,8 @@ var NEGATIVE_ALLOWED = /* @__PURE__ */ new Set([
   "my",
   "ms",
   "me",
+  "mbs",
+  "mbe",
   "top",
   "right",
   "bottom",
@@ -966,8 +1020,11 @@ var NEGATIVE_ALLOWED = /* @__PURE__ */ new Set([
   "inset",
   "inset-x",
   "inset-y",
-  "start",
-  "end",
+  // TW v4.2: start/end now map to inset-s/inset-e
+  "inset-s",
+  "inset-e",
+  "inset-bs",
+  "inset-be",
   "z",
   "order",
   "col",
@@ -977,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",
@@ -1020,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)
@@ -1061,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
@@ -1517,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;
     }
@@ -1636,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;
       }
@@ -1707,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}]`;
         }
@@ -1829,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);
@@ -1854,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}]`;
@@ -2005,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) {
@@ -2019,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 += "!";
       }
@@ -2083,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, {
@@ -2102,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;
                 }
@@ -2117,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]) => {
@@ -2155,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()) {
@@ -2183,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;
@@ -2198,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;
@@ -2224,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) {
@@ -2467,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.1.3",
+  "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.1.3"
+    "@csszyx/core": "0.3.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",