Merge pull request #8 from e-simpson/size-pr

feat: Add size-* support

Author: mgcrea

docs/src/content/docs/reference/sizing.md

@@ -5,6 +5,80 @@ description: Width and height utilities
 
 Control element dimensions with width and height utilities.
 
+## Size
+
+Sets both width and height to the same value simultaneously.
+
+### Numeric
+
+```tsx
+// Before (Tailwind)
+<View className="size-0" />
+<View className="size-4" />
+<View className="size-8" />
+<View className="size-16" />
+<View className="size-32" />
+<View className="size-64" />
+<View className="size-96" />
+
+// After (React Native style object)
+<View style={{ width: 0, height: 0 }} />
+<View style={{ width: 16, height: 16 }} />
+<View style={{ width: 32, height: 32 }} />
+<View style={{ width: 64, height: 64 }} />
+<View style={{ width: 128, height: 128 }} />
+<View style={{ width: 256, height: 256 }} />
+<View style={{ width: 384, height: 384 }} />
+```
+
+### Fractional
+
+```tsx
+// Before (Tailwind)
+<View className="size-1/2" />
+<View className="size-1/3" />
+<View className="size-2/3" />
+<View className="size-1/4" />
+<View className="size-3/4" />
+<View className="size-1/5" />
+
+// After (React Native style object)
+<View style={{ width: '50%', height: '50%' }} />
+<View style={{ width: '33.333333%', height: '33.333333%' }} />
+<View style={{ width: '66.666667%', height: '66.666667%' }} />
+<View style={{ width: '25%', height: '25%' }} />
+<View style={{ width: '75%', height: '75%' }} />
+<View style={{ width: '20%', height: '20%' }} />
+```
+
+### Special
+
+```tsx
+// Before (Tailwind)
+<View className="size-full" />
+<View className="size-auto" />
+
+// After (React Native style object)
+<View style={{ width: '100%', height: '100%' }} />
+<View style={{ width: 'auto', height: 'auto' }} />
+```
+
+### Arbitrary
+
+```tsx
+// Before (Tailwind)
+<View className="size-[123px]" />
+<View className="size-[200px]" />
+<View className="size-[50%]" />
+<View className="size-[75%]" />
+
+// After (React Native style object)
+<View style={{ width: 123, height: 123 }} />
+<View style={{ width: 200, height: 200 }} />
+<View style={{ width: '50%', height: '50%' }} />
+<View style={{ width: '75%', height: '75%' }} />
+```
+
 ## Width
 
 ### Numeric
@@ -147,18 +221,15 @@ function FullScreenModal() {
 
 ```tsx
 // Input
-<View className="w-screen h-screen bg-white" />
+<View className="w-screen h-screen bg-white" />;
 
 // Generated output
-import { useWindowDimensions } from 'react-native';
+import { useWindowDimensions } from "react-native";
 
 function Component() {
   const _twDimensions = useWindowDimensions();
 
-  return <View style={[
-    styles._bg_white,
-    { width: _twDimensions.width, height: _twDimensions.height }
-  ]} />;
+  return <View style={[styles._bg_white, { width: _twDimensions.width, height: _twDimensions.height }]} />;
 }
 ```
 
@@ -234,7 +305,11 @@ You can combine screen dimensions with **static utility classes only** (no modif
 ### Fixed Size Square
 
 ```tsx
+// Using separate width and height
 <View className="w-16 h-16 bg-gray-200 rounded" />
+
+// Using size shorthand (width + height)
+<View className="size-16 bg-gray-200 rounded" />
 ```
 
 ### Responsive Grid
@@ -265,6 +340,7 @@ You can combine screen dimensions with **static utility classes only** (no modif
 ## Note
 
 Arbitrary sizing supports:
+
 - Pixel values: `[123px]` or `[123]`
 - Percentages: `[50%]`
 

src/parser/sizing.test.ts

@@ -310,3 +310,85 @@ describe("parseSizing - custom spacing", () => {
     expect(parseSizing("h-8")).toEqual({ height: 32 }); // Default behavior
   });
 });
+
+describe("parseSizing - size (width + height)", () => {
+  it("should parse size with numeric values", () => {
+    expect(parseSizing("size-0")).toEqual({ width: 0, height: 0 });
+    expect(parseSizing("size-4")).toEqual({ width: 16, height: 16 });
+    expect(parseSizing("size-8")).toEqual({ width: 32, height: 32 });
+    expect(parseSizing("size-96")).toEqual({ width: 384, height: 384 });
+  });
+
+  it("should parse size with fractional values", () => {
+    expect(parseSizing("size-0.5")).toEqual({ width: 2, height: 2 });
+    expect(parseSizing("size-1.5")).toEqual({ width: 6, height: 6 });
+    expect(parseSizing("size-2.5")).toEqual({ width: 10, height: 10 });
+  });
+
+  it("should parse size with percentage values", () => {
+    expect(parseSizing("size-full")).toEqual({ width: "100%", height: "100%" });
+    expect(parseSizing("size-1/2")).toEqual({ width: "50%", height: "50%" });
+    expect(parseSizing("size-1/3")).toEqual({ width: "33.333333%", height: "33.333333%" });
+    expect(parseSizing("size-2/3")).toEqual({ width: "66.666667%", height: "66.666667%" });
+    expect(parseSizing("size-1/4")).toEqual({ width: "25%", height: "25%" });
+    expect(parseSizing("size-3/4")).toEqual({ width: "75%", height: "75%" });
+  });
+
+  it("should parse size with special values", () => {
+    expect(parseSizing("size-auto")).toEqual({ width: "auto", height: "auto" });
+  });
+
+  it("should parse size with arbitrary pixel values", () => {
+    expect(parseSizing("size-[123px]")).toEqual({ width: 123, height: 123 });
+    expect(parseSizing("size-[200]")).toEqual({ width: 200, height: 200 });
+    expect(parseSizing("size-[50px]")).toEqual({ width: 50, height: 50 });
+  });
+
+  it("should parse size with arbitrary percentage values", () => {
+    expect(parseSizing("size-[50%]")).toEqual({ width: "50%", height: "50%" });
+    expect(parseSizing("size-[33.333%]")).toEqual({ width: "33.333%", height: "33.333%" });
+    expect(parseSizing("size-[85%]")).toEqual({ width: "85%", height: "85%" });
+  });
+
+  it("should support custom spacing values for size", () => {
+    const customSpacing = { sm: 8, md: 16, lg: 32, xl: 64 };
+    expect(parseSizing("size-sm", customSpacing)).toEqual({ width: 8, height: 8 });
+    expect(parseSizing("size-md", customSpacing)).toEqual({ width: 16, height: 16 });
+    expect(parseSizing("size-lg", customSpacing)).toEqual({ width: 32, height: 32 });
+    expect(parseSizing("size-xl", customSpacing)).toEqual({ width: 64, height: 64 });
+  });
+
+  it("should allow custom spacing to override preset values", () => {
+    const customSpacing = { "4": 20 }; // Override default (16)
+    expect(parseSizing("size-4", customSpacing)).toEqual({ width: 20, height: 20 });
+  });
+
+  it("should prefer arbitrary values over custom spacing", () => {
+    expect(parseSizing("size-[24px]", { "4": 20 })).toEqual({ width: 24, height: 24 });
+    expect(parseSizing("size-[50]", { sm: 8 })).toEqual({ width: 50, height: 50 });
+  });
+
+  it("should handle all fractional percentage variants", () => {
+    expect(parseSizing("size-1/5")).toEqual({ width: "20%", height: "20%" });
+    expect(parseSizing("size-2/5")).toEqual({ width: "40%", height: "40%" });
+    expect(parseSizing("size-3/5")).toEqual({ width: "60%", height: "60%" });
+    expect(parseSizing("size-4/5")).toEqual({ width: "80%", height: "80%" });
+    expect(parseSizing("size-1/6")).toEqual({ width: "16.666667%", height: "16.666667%" });
+    expect(parseSizing("size-5/6")).toEqual({ width: "83.333333%", height: "83.333333%" });
+  });
+
+  it("should handle edge case size values", () => {
+    expect(parseSizing("size-0")).toEqual({ width: 0, height: 0 });
+  });
+
+  it("should return null for invalid size values", () => {
+    expect(parseSizing("size-invalid")).toBeNull();
+    expect(parseSizing("size-999")).toBeNull();
+  });
+
+  it("should return null for arbitrary values with unsupported units", () => {
+    expect(parseSizing("size-[16rem]")).toBeNull();
+    expect(parseSizing("size-[2em]")).toBeNull();
+    expect(parseSizing("size-[50vh]")).toBeNull();
+  });
+});

src/parser/sizing.ts

@@ -102,6 +102,34 @@ export function parseSizing(cls: string, customSpacing?: Record<string, number>)
   // Merge custom spacing with defaults (custom takes precedence)
   const sizeMap = customSpacing ? { ...SIZE_SCALE, ...customSpacing } : SIZE_SCALE;
 
+  // Size (both width AND height)
+  if (cls.startsWith("size-")) {
+    const sizeKey = cls.substring(5); // "size-".length = 5
+
+    // Arbitrary values: size-[123px], size-[50%] (highest priority)
+    const arbitrarySize = parseArbitrarySize(sizeKey);
+    if (arbitrarySize !== null) {
+      return { width: arbitrarySize, height: arbitrarySize };
+    }
+
+    // Percentage sizes: size-full, size-1/2, etc.
+    const percentage = SIZE_PERCENTAGES[sizeKey];
+    if (percentage) {
+      return { width: percentage, height: percentage };
+    }
+
+    // Numeric sizes: size-4, size-8, etc. (includes custom spacing)
+    const numericSize = sizeMap[sizeKey];
+    if (numericSize !== undefined) {
+      return { width: numericSize, height: numericSize };
+    }
+
+    // Special values
+    if (sizeKey === "auto") {
+      return { width: "auto", height: "auto" };
+    }
+  }
+
   // Width
   if (cls.startsWith("w-")) {
     const sizeKey = cls.substring(2);