@mgcrea/react-native-tailwind 0.5.1 → 0.6.0

package/README.md

@@ -858,6 +858,108 @@ Use `aspect-[width/height]` for custom ratios:
 
 > **Note:** The aspect ratio is calculated as `width / height`. When combined with `w-full`, the height will be automatically calculated to maintain the ratio.
 
+### Transforms
+
+Apply 2D and 3D transformations to views with React Native's transform API. All transforms compile to optimized transform arrays at build time:
+
+**Scale:**
+
+- `scale-{value}` — Scale uniformly (both X and Y)
+- `scale-x-{value}`, `scale-y-{value}` — Scale on specific axis
+- **Values:** `0`, `50`, `75`, `90`, `95`, `100`, `105`, `110`, `125`, `150`, `200`
+- **Arbitrary:** `scale-[1.23]`, `scale-x-[0.5]`, `scale-y-[2.5]`
+
+**Rotate:**
+
+- `rotate-{degrees}`, `-rotate-{degrees}` — Rotate in 2D
+- `rotate-x-{degrees}`, `rotate-y-{degrees}`, `rotate-z-{degrees}` — Rotate on specific axis
+- **Values:** `0`, `1`, `2`, `3`, `6`, `12`, `45`, `90`, `180`
+- **Arbitrary:** `rotate-[37deg]`, `-rotate-[15deg]`, `rotate-x-[30deg]`
+
+**Translate:**
+
+- `translate-x-{spacing}`, `translate-y-{spacing}` — Move on specific axis
+- `-translate-x-{spacing}`, `-translate-y-{spacing}` — Negative translation
+- **Values:** Uses spacing scale (same as `m-*`, `p-*`)
+- **Arbitrary:** `translate-x-[50px]`, `translate-y-[100px]`, `translate-x-[50%]`
+
+**Skew:**
+
+- `skew-x-{degrees}`, `skew-y-{degrees}` — Skew on specific axis
+- `-skew-x-{degrees}`, `-skew-y-{degrees}` — Negative skew
+- **Values:** `0`, `1`, `2`, `3`, `6`, `12`
+- **Arbitrary:** `skew-x-[15deg]`, `-skew-y-[8deg]`
+
+**Perspective:**
+
+- `perspective-{value}` — Apply perspective transformation
+- **Values:** `0`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`, `1000`
+- **Arbitrary:** `perspective-[1500]`, `perspective-[2000]`
+
+**Examples:**
+
+```tsx
+// Scale
+<View className="scale-110 p-4">
+  {/* 110% scale (1.1x larger) */}
+  <Text>Scaled content</Text>
+</View>
+
+// Rotate
+<View className="rotate-45 w-16 h-16 bg-blue-500" />
+
+// Translate
+<View className="translate-x-4 translate-y-2 bg-red-500 p-4">
+  {/* Moved 16px right, 8px down */}
+</View>
+
+// Arbitrary values
+<View className="scale-[1.23] w-16 h-16 bg-green-500" />
+<View className="rotate-[37deg] w-16 h-16 bg-purple-500" />
+<View className="translate-x-[50px] bg-orange-500 p-4" />
+
+// Negative values
+<View className="-rotate-45 w-16 h-16 bg-pink-500" />
+<View className="-translate-x-4 -translate-y-2 bg-indigo-500 p-4" />
+
+// 3D rotation
+<View className="rotate-x-45 w-16 h-16 bg-yellow-500" />
+<View className="rotate-y-30 w-16 h-16 bg-teal-500" />
+
+// Skew
+<View className="skew-x-6 w-16 h-16 bg-cyan-500" />
+
+// Perspective
+<View className="perspective-500">
+  <View className="rotate-x-45 w-16 h-16 bg-blue-500" />
+</View>
+```
+
+**Multiple Transforms Limitation:**
+
+Due to the current architecture, multiple transform classes on the same element will overwrite each other. For example:
+
+```tsx
+// ❌ Only rotate-45 will apply (overwrites scale-110)
+<View className="scale-110 rotate-45 w-16 h-16 bg-blue-500" />
+
+// ✅ Workaround: Use nested Views for multiple transforms
+<View className="scale-110">
+  <View className="rotate-45">
+    <View className="w-16 h-16 bg-blue-500" />
+  </View>
+</View>
+```
+
+This limitation exists because the current parser architecture uses `Object.assign()` which overwrites the `transform` property when multiple transform classes are present. This will be addressed in a future update by modifying the Babel plugin to detect multiple transform classes and generate style arrays.
+
+**What's Not Supported:**
+
+- `transform-origin` — Not available in React Native (transforms always use center as origin)
+- Multiple transforms on one element — Use nested Views (see workaround above)
+
+> **Note:** All transform parsing happens at compile-time with zero runtime overhead. Each transform compiles to a React Native transform array: `transform: [{ scale: 1.1 }]`, `transform: [{ rotate: '45deg' }]`, etc.
+
 ### Sizing
 
 - `w-{size}`, `h-{size}` — Width/height
@@ -889,6 +991,12 @@ Use arbitrary values for custom sizes, spacing, and borders not in the preset sc
 - **Sizing:** `w-[...]`, `h-[...]`, `min-w-[...]`, `min-h-[...]`, `max-w-[...]`, `max-h-[...]` (px and %)
 - **Border width:** `border-[...]`, `border-t-[...]`, `border-r-[...]`, `border-b-[...]`, `border-l-[...]` (px only)
 - **Border radius:** `rounded-[...]`, `rounded-t-[...]`, `rounded-tl-[...]`, etc. (px only)
+- **Transforms:**
+  - **Scale:** `scale-[...]`, `scale-x-[...]`, `scale-y-[...]` (number only, e.g., `[1.23]`)
+  - **Rotate:** `rotate-[...]`, `rotate-x-[...]`, `rotate-y-[...]`, `rotate-z-[...]` (deg only, e.g., `[37deg]`)
+  - **Translate:** `translate-x-[...]`, `translate-y-[...]` (px or %, e.g., `[50px]` or `[50%]`)
+  - **Skew:** `skew-x-[...]`, `skew-y-[...]` (deg only, e.g., `[15deg]`)
+  - **Perspective:** `perspective-[...]` (number only, e.g., `[1500]`)
 
 **Formats:**
 

package/dist/babel/index.cjs

@@ -429,6 +429,9 @@ function parseColor(cls, customColors) {
   };
   if (cls.startsWith("bg-")) {
     const colorKey = cls.substring(3);
+    if (colorKey.startsWith("[") && !colorKey.startsWith("[#")) {
+      return null;
+    }
     const color = parseColorWithOpacity(colorKey);
     if (color) {
       return { backgroundColor: color };
@@ -436,6 +439,9 @@ function parseColor(cls, customColors) {
   }
   if (cls.startsWith("text-")) {
     const colorKey = cls.substring(5);
+    if (colorKey.startsWith("[") && !colorKey.startsWith("[#")) {
+      return null;
+    }
     const color = parseColorWithOpacity(colorKey);
     if (color) {
       return { color };
@@ -443,6 +449,9 @@ function parseColor(cls, customColors) {
   }
   if (cls.startsWith("border-") && !cls.match(/^border-[0-9]/)) {
     const colorKey = cls.substring(7);
+    if (colorKey.startsWith("[") && !colorKey.startsWith("[#")) {
+      return null;
+    }
     const color = parseColorWithOpacity(colorKey);
     if (color) {
       return { borderColor: color };
@@ -452,6 +461,40 @@ function parseColor(cls, customColors) {
 }
 
 // src/parser/layout.ts
+function parseArbitraryInset(value) {
+  const pxMatch = value.match(/^\[(-?\d+)(?:px)?\]$/);
+  if (pxMatch) {
+    return parseInt(pxMatch[1], 10);
+  }
+  const percentMatch = value.match(/^\[(-?\d+(?:\.\d+)?)%\]$/);
+  if (percentMatch) {
+    return `${percentMatch[1]}%`;
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Unsupported arbitrary inset unit: ${value}. Only px and % are supported.`
+      );
+    }
+    return null;
+  }
+  return null;
+}
+function parseArbitraryZIndex(value) {
+  const zMatch = value.match(/^\[(-?\d+)\]$/);
+  if (zMatch) {
+    return parseInt(zMatch[1], 10);
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Invalid arbitrary z-index: ${value}. Only integers are supported.`
+      );
+    }
+    return null;
+  }
+  return null;
+}
 var DISPLAY_MAP = {
   flex: { display: "flex" },
   hidden: { display: "none" }
@@ -550,6 +593,10 @@ var INSET_SCALE = {
 function parseLayout(cls) {
   if (cls.startsWith("z-")) {
     const zKey = cls.substring(2);
+    const arbitraryZ = parseArbitraryZIndex(zKey);
+    if (arbitraryZ !== null) {
+      return { zIndex: arbitraryZ };
+    }
     const zValue = Z_INDEX_SCALE[zKey];
     if (zValue !== void 0) {
       return { zIndex: zValue };
@@ -560,6 +607,10 @@ function parseLayout(cls) {
     if (topKey === "auto") {
       return {};
     }
+    const arbitraryTop = parseArbitraryInset(topKey);
+    if (arbitraryTop !== null) {
+      return { top: arbitraryTop };
+    }
     const topValue = INSET_SCALE[topKey];
     if (topValue !== void 0) {
       return { top: topValue };
@@ -570,6 +621,10 @@ function parseLayout(cls) {
     if (rightKey === "auto") {
       return {};
     }
+    const arbitraryRight = parseArbitraryInset(rightKey);
+    if (arbitraryRight !== null) {
+      return { right: arbitraryRight };
+    }
     const rightValue = INSET_SCALE[rightKey];
     if (rightValue !== void 0) {
       return { right: rightValue };
@@ -580,6 +635,10 @@ function parseLayout(cls) {
     if (bottomKey === "auto") {
       return {};
     }
+    const arbitraryBottom = parseArbitraryInset(bottomKey);
+    if (arbitraryBottom !== null) {
+      return { bottom: arbitraryBottom };
+    }
     const bottomValue = INSET_SCALE[bottomKey];
     if (bottomValue !== void 0) {
       return { bottom: bottomValue };
@@ -590,20 +649,21 @@ function parseLayout(cls) {
     if (leftKey === "auto") {
       return {};
     }
+    const arbitraryLeft = parseArbitraryInset(leftKey);
+    if (arbitraryLeft !== null) {
+      return { left: arbitraryLeft };
+    }
     const leftValue = INSET_SCALE[leftKey];
     if (leftValue !== void 0) {
       return { left: leftValue };
     }
   }
-  if (cls.startsWith("inset-")) {
-    const insetKey = cls.substring(6);
-    const insetValue = INSET_SCALE[insetKey];
-    if (insetValue !== void 0) {
-      return { top: insetValue, right: insetValue, bottom: insetValue, left: insetValue };
-    }
-  }
   if (cls.startsWith("inset-x-")) {
     const insetKey = cls.substring(8);
+    const arbitraryInset = parseArbitraryInset(insetKey);
+    if (arbitraryInset !== null) {
+      return { left: arbitraryInset, right: arbitraryInset };
+    }
     const insetValue = INSET_SCALE[insetKey];
     if (insetValue !== void 0) {
       return { left: insetValue, right: insetValue };
@@ -611,11 +671,26 @@ function parseLayout(cls) {
   }
   if (cls.startsWith("inset-y-")) {
     const insetKey = cls.substring(8);
+    const arbitraryInset = parseArbitraryInset(insetKey);
+    if (arbitraryInset !== null) {
+      return { top: arbitraryInset, bottom: arbitraryInset };
+    }
     const insetValue = INSET_SCALE[insetKey];
     if (insetValue !== void 0) {
       return { top: insetValue, bottom: insetValue };
     }
   }
+  if (cls.startsWith("inset-")) {
+    const insetKey = cls.substring(6);
+    const arbitraryInset = parseArbitraryInset(insetKey);
+    if (arbitraryInset !== null) {
+      return { top: arbitraryInset, right: arbitraryInset, bottom: arbitraryInset, left: arbitraryInset };
+    }
+    const insetValue = INSET_SCALE[insetKey];
+    if (insetValue !== void 0) {
+      return { top: insetValue, right: insetValue, bottom: insetValue, left: insetValue };
+    }
+  }
   return DISPLAY_MAP[cls] ?? FLEX_DIRECTION_MAP[cls] ?? FLEX_WRAP_MAP[cls] ?? FLEX_MAP[cls] ?? GROW_SHRINK_MAP[cls] ?? JUSTIFY_CONTENT_MAP[cls] ?? ALIGN_ITEMS_MAP[cls] ?? ALIGN_SELF_MAP[cls] ?? ALIGN_CONTENT_MAP[cls] ?? POSITION_MAP[cls] ?? OVERFLOW_MAP[cls] ?? null;
 }
 
@@ -984,6 +1059,284 @@ function getPaddingStyle(dir, value) {
   }
 }
 
+// src/parser/transforms.ts
+var SCALE_MAP = {
+  0: 0,
+  50: 0.5,
+  75: 0.75,
+  90: 0.9,
+  95: 0.95,
+  100: 1,
+  105: 1.05,
+  110: 1.1,
+  125: 1.25,
+  150: 1.5,
+  200: 2
+};
+var ROTATE_MAP = {
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  6: 6,
+  12: 12,
+  45: 45,
+  90: 90,
+  180: 180
+};
+var SKEW_MAP = {
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  6: 6,
+  12: 12
+};
+var PERSPECTIVE_SCALE = {
+  0: 0,
+  100: 100,
+  200: 200,
+  300: 300,
+  400: 400,
+  500: 500,
+  600: 600,
+  700: 700,
+  800: 800,
+  900: 900,
+  1e3: 1e3
+};
+function parseArbitraryScale(value) {
+  const scaleMatch = value.match(/^\[(-?\d+(?:\.\d+)?)\]$/);
+  if (scaleMatch) {
+    return parseFloat(scaleMatch[1]);
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Invalid arbitrary scale value: ${value}. Only numbers are supported (e.g., [1.5], [0.75]).`
+      );
+    }
+    return null;
+  }
+  return null;
+}
+function parseArbitraryRotation(value) {
+  const rotateMatch = value.match(/^\[(-?\d+(?:\.\d+)?)deg\]$/);
+  if (rotateMatch) {
+    return `${rotateMatch[1]}deg`;
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Invalid arbitrary rotation value: ${value}. Only deg unit is supported (e.g., [45deg], [-15deg]).`
+      );
+    }
+    return null;
+  }
+  return null;
+}
+function parseArbitraryTranslation(value) {
+  const pxMatch = value.match(/^\[(-?\d+)(?:px)?\]$/);
+  if (pxMatch) {
+    return parseInt(pxMatch[1], 10);
+  }
+  const percentMatch = value.match(/^\[(-?\d+(?:\.\d+)?)%\]$/);
+  if (percentMatch) {
+    return `${percentMatch[1]}%`;
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Unsupported arbitrary translation unit: ${value}. Only px and % are supported.`
+      );
+    }
+    return null;
+  }
+  return null;
+}
+function parseArbitraryPerspective(value) {
+  const perspectiveMatch = value.match(/^\[(-?\d+)\]$/);
+  if (perspectiveMatch) {
+    return parseInt(perspectiveMatch[1], 10);
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Invalid arbitrary perspective value: ${value}. Only integers are supported (e.g., [1500]).`
+      );
+    }
+    return null;
+  }
+  return null;
+}
+function parseTransform(cls) {
+  if (cls.startsWith("origin-")) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] transform-origin is not supported in React Native. Class "${cls}" will be ignored.`
+      );
+    }
+    return null;
+  }
+  if (cls.startsWith("scale-")) {
+    const scaleKey = cls.substring(6);
+    const arbitraryScale = parseArbitraryScale(scaleKey);
+    if (arbitraryScale !== null) {
+      return { transform: [{ scale: arbitraryScale }] };
+    }
+    const scaleValue = SCALE_MAP[scaleKey];
+    if (scaleValue !== void 0) {
+      return { transform: [{ scale: scaleValue }] };
+    }
+  }
+  if (cls.startsWith("scale-x-")) {
+    const scaleKey = cls.substring(8);
+    const arbitraryScale = parseArbitraryScale(scaleKey);
+    if (arbitraryScale !== null) {
+      return { transform: [{ scaleX: arbitraryScale }] };
+    }
+    const scaleValue = SCALE_MAP[scaleKey];
+    if (scaleValue !== void 0) {
+      return { transform: [{ scaleX: scaleValue }] };
+    }
+  }
+  if (cls.startsWith("scale-y-")) {
+    const scaleKey = cls.substring(8);
+    const arbitraryScale = parseArbitraryScale(scaleKey);
+    if (arbitraryScale !== null) {
+      return { transform: [{ scaleY: arbitraryScale }] };
+    }
+    const scaleValue = SCALE_MAP[scaleKey];
+    if (scaleValue !== void 0) {
+      return { transform: [{ scaleY: scaleValue }] };
+    }
+  }
+  if (cls.startsWith("rotate-") || cls.startsWith("-rotate-")) {
+    const isNegative = cls.startsWith("-");
+    const rotateKey = isNegative ? cls.substring(8) : cls.substring(7);
+    const arbitraryRotate = parseArbitraryRotation(rotateKey);
+    if (arbitraryRotate !== null) {
+      const degrees = isNegative ? `-${arbitraryRotate}` : arbitraryRotate;
+      return { transform: [{ rotate: degrees }] };
+    }
+    const rotateValue = ROTATE_MAP[rotateKey];
+    if (rotateValue !== void 0) {
+      const degrees = isNegative ? -rotateValue : rotateValue;
+      return { transform: [{ rotate: `${degrees}deg` }] };
+    }
+  }
+  if (cls.startsWith("rotate-x-") || cls.startsWith("-rotate-x-")) {
+    const isNegative = cls.startsWith("-");
+    const rotateKey = isNegative ? cls.substring(10) : cls.substring(9);
+    const arbitraryRotate = parseArbitraryRotation(rotateKey);
+    if (arbitraryRotate !== null) {
+      const degrees = isNegative ? `-${arbitraryRotate}` : arbitraryRotate;
+      return { transform: [{ rotateX: degrees }] };
+    }
+    const rotateValue = ROTATE_MAP[rotateKey];
+    if (rotateValue !== void 0) {
+      const degrees = isNegative ? -rotateValue : rotateValue;
+      return { transform: [{ rotateX: `${degrees}deg` }] };
+    }
+  }
+  if (cls.startsWith("rotate-y-") || cls.startsWith("-rotate-y-")) {
+    const isNegative = cls.startsWith("-");
+    const rotateKey = isNegative ? cls.substring(10) : cls.substring(9);
+    const arbitraryRotate = parseArbitraryRotation(rotateKey);
+    if (arbitraryRotate !== null) {
+      const degrees = isNegative ? `-${arbitraryRotate}` : arbitraryRotate;
+      return { transform: [{ rotateY: degrees }] };
+    }
+    const rotateValue = ROTATE_MAP[rotateKey];
+    if (rotateValue !== void 0) {
+      const degrees = isNegative ? -rotateValue : rotateValue;
+      return { transform: [{ rotateY: `${degrees}deg` }] };
+    }
+  }
+  if (cls.startsWith("rotate-z-") || cls.startsWith("-rotate-z-")) {
+    const isNegative = cls.startsWith("-");
+    const rotateKey = isNegative ? cls.substring(10) : cls.substring(9);
+    const arbitraryRotate = parseArbitraryRotation(rotateKey);
+    if (arbitraryRotate !== null) {
+      const degrees = isNegative ? `-${arbitraryRotate}` : arbitraryRotate;
+      return { transform: [{ rotateZ: degrees }] };
+    }
+    const rotateValue = ROTATE_MAP[rotateKey];
+    if (rotateValue !== void 0) {
+      const degrees = isNegative ? -rotateValue : rotateValue;
+      return { transform: [{ rotateZ: `${degrees}deg` }] };
+    }
+  }
+  if (cls.startsWith("translate-x-") || cls.startsWith("-translate-x-")) {
+    const isNegative = cls.startsWith("-");
+    const translateKey = isNegative ? cls.substring(13) : cls.substring(12);
+    const arbitraryTranslate = parseArbitraryTranslation(translateKey);
+    if (arbitraryTranslate !== null) {
+      const value = typeof arbitraryTranslate === "number" ? isNegative ? -arbitraryTranslate : arbitraryTranslate : isNegative ? `-${arbitraryTranslate}` : arbitraryTranslate;
+      return { transform: [{ translateX: value }] };
+    }
+    const translateValue = SPACING_SCALE[translateKey];
+    if (translateValue !== void 0) {
+      const value = isNegative ? -translateValue : translateValue;
+      return { transform: [{ translateX: value }] };
+    }
+  }
+  if (cls.startsWith("translate-y-") || cls.startsWith("-translate-y-")) {
+    const isNegative = cls.startsWith("-");
+    const translateKey = isNegative ? cls.substring(13) : cls.substring(12);
+    const arbitraryTranslate = parseArbitraryTranslation(translateKey);
+    if (arbitraryTranslate !== null) {
+      const value = typeof arbitraryTranslate === "number" ? isNegative ? -arbitraryTranslate : arbitraryTranslate : isNegative ? `-${arbitraryTranslate}` : arbitraryTranslate;
+      return { transform: [{ translateY: value }] };
+    }
+    const translateValue = SPACING_SCALE[translateKey];
+    if (translateValue !== void 0) {
+      const value = isNegative ? -translateValue : translateValue;
+      return { transform: [{ translateY: value }] };
+    }
+  }
+  if (cls.startsWith("skew-x-") || cls.startsWith("-skew-x-")) {
+    const isNegative = cls.startsWith("-");
+    const skewKey = isNegative ? cls.substring(8) : cls.substring(7);
+    const arbitrarySkew = parseArbitraryRotation(skewKey);
+    if (arbitrarySkew !== null) {
+      const degrees = isNegative ? `-${arbitrarySkew}` : arbitrarySkew;
+      return { transform: [{ skewX: degrees }] };
+    }
+    const skewValue = SKEW_MAP[skewKey];
+    if (skewValue !== void 0) {
+      const degrees = isNegative ? -skewValue : skewValue;
+      return { transform: [{ skewX: `${degrees}deg` }] };
+    }
+  }
+  if (cls.startsWith("skew-y-") || cls.startsWith("-skew-y-")) {
+    const isNegative = cls.startsWith("-");
+    const skewKey = isNegative ? cls.substring(8) : cls.substring(7);
+    const arbitrarySkew = parseArbitraryRotation(skewKey);
+    if (arbitrarySkew !== null) {
+      const degrees = isNegative ? `-${arbitrarySkew}` : arbitrarySkew;
+      return { transform: [{ skewY: degrees }] };
+    }
+    const skewValue = SKEW_MAP[skewKey];
+    if (skewValue !== void 0) {
+      const degrees = isNegative ? -skewValue : skewValue;
+      return { transform: [{ skewY: `${degrees}deg` }] };
+    }
+  }
+  if (cls.startsWith("perspective-")) {
+    const perspectiveKey = cls.substring(12);
+    const arbitraryPerspective = parseArbitraryPerspective(perspectiveKey);
+    if (arbitraryPerspective !== null) {
+      return { transform: [{ perspective: arbitraryPerspective }] };
+    }
+    const perspectiveValue = PERSPECTIVE_SCALE[perspectiveKey];
+    if (perspectiveValue !== void 0) {
+      return { transform: [{ perspective: perspectiveValue }] };
+    }
+  }
+  return null;
+}
+
 // src/parser/typography.ts
 var FONT_SIZES = {
   xs: 12,
@@ -1157,7 +1510,8 @@ function parseClass(cls, customColors) {
     parseTypography,
     parseSizing,
     parseShadow,
-    parseAspectRatio
+    parseAspectRatio,
+    parseTransform
   ];
   for (const parser of parsers) {
     const result = parser(cls);

package/dist/parser/__snapshots__/aspectRatio.test.js.snap

@@ -0,0 +1,9 @@
+// Bun Snapshot v1, https://bun.sh/docs/test/snapshots
+
+exports[`ASPECT_RATIO_PRESETS should export aspect ratio presets 1`] = `
+{
+  "aspect-auto": undefined,
+  "aspect-square": 1,
+  "aspect-video": 1.7777777777777777,
+}
+`;

package/dist/parser/__snapshots__/borders.test.js.snap

@@ -0,0 +1,23 @@
+// Bun Snapshot v1, https://bun.sh/docs/test/snapshots
+
+exports[`BORDER_WIDTH_SCALE should export complete border width scale 1`] = `
+{
+  "0": 0,
+  "2": 2,
+  "4": 4,
+  "8": 8,
+}
+`;
+
+exports[`BORDER_RADIUS_SCALE should export complete border radius scale 1`] = `
+{
+  "2xl": 16,
+  "3xl": 24,
+  "full": 9999,
+  "lg": 8,
+  "md": 6,
+  "none": 0,
+  "sm": 2,
+  "xl": 12,
+}
+`;