support size-* convenience utility

src/UtilityParser.ts

@@ -12,7 +12,7 @@ import { border, borderRadius } from './resolve/borders';
 import * as h from './helpers';
 import { inset } from './resolve/inset';
 import { flexGrowShrink, flexBasis, flex, gap } from './resolve/flex';
-import { widthHeight, minMaxWidthHeight } from './resolve/width-height';
+import { widthHeight, size, minMaxWidthHeight } from './resolve/width-height';
 import { letterSpacing } from './resolve/letter-spacing';
 import { opacity } from './resolve/opacity';
 import { shadowOpacity, shadowOffset } from './resolve/shadow';
@@ -295,6 +295,11 @@ export default class UtilityParser {
       }
     }
 
+    if (this.consumePeeked(`size-`)) {
+      style = size(this.rest, this.context, theme);
+      if (style) return style;
+    }
+
     h.warn(`\`${this.rest}\` unknown or invalid utility`);
     return null;
   }

src/__tests__/width-height.spec.ts

@@ -38,6 +38,11 @@ describe(`width/height utilities`, () => {
     // arbitrary
     [`h-[333px]`, { height: 333 }],
 
+    // size-*
+    [`size-1`, { width: 4, height: 4 }],
+    [`size-3/4`, { width: `75%`, height: `75%` }],
+    [`size-[333px]`, { width: 333, height: 333 }],
+
     // not configged, use 0.25rem = 1 as formula
     [`h-81`, { height: (81 / 4) * 16 }],
 

src/resolve/width-height.ts

@@ -16,6 +16,19 @@ export function widthHeight(
   return unconfiggedStyle(type, value, context);
 }
 
+export function size(
+  value: string,
+  context: ParseContext = {},
+  theme?: TwTheme,
+): StyleIR | null {
+  const width = widthHeight(`width`, value, context, theme?.width);
+  const height = widthHeight(`height`, value, context, theme?.height);
+  if (width?.kind !== `complete` || height?.kind !== `complete`) {
+    return null;
+  }
+  return complete({ ...width.style, ...height.style });
+}
+
 export function minMaxWidthHeight(
   type: 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight',
   value: string,