feat: support aspectRatio (#195)

Co-authored-by: Brano Zavracky <branislav.zavracky@brackets.sk>

docs/styles.md

@@ -227,7 +227,6 @@
 
 | Name   | Style(s)                |
 | ------ | ----------------------- |
-| h-auto | `{ height: "auto" }`    |
 | h-0    | `{ height: 0 }`         |
 | h-1    | `{ height: rem(0.25) }` |
 | h-10   | `{ height: rem(2.5) }`  |
@@ -246,6 +245,7 @@
 | h-6    | `{ height: rem(1.5) }`  |
 | h-64   | `{ height: rem(16) }`   |
 | h-8    | `{ height: rem(2) }`    |
+| h-auto | `{ height: "auto" }`    |
 | h-full | `{ height: "100%" }`    |
 | h-px   | `{ height: 1 }`         |
 
@@ -259,7 +259,6 @@
 
 | Name    | Style(s)                  |
 | ------- | ------------------------- |
-| w-auto  | `{ width: "auto" }`       |
 | w-0     | `{ width: 0 }`            |
 | w-1     | `{ width: rem(0.25) }`    |
 | w-1/12  | `{ width: "8.333333%" }`  |
@@ -304,6 +303,7 @@
 | w-8     | `{ width: rem(2) }`       |
 | w-8/12  | `{ width: "66.666667%" }` |
 | w-9/12  | `{ width: "75%" }`        |
+| w-auto  | `{ width: "auto" }`       |
 | w-full  | `{ width: "100%" }`       |
 | w-px    | `{ width: 1 }`            |
 
@@ -1426,6 +1426,18 @@
 | overflow-scroll  | `{ overflow: "scroll" }`  |
 | overflow-visible | `{ overflow: "visible" }` |
 
+### AspectRatio
+
+> _Tip:_ The following styles are generated based on `theme.aspectRatio` values.
+
+| Name        | Style(s)                              |
+| ----------- | ------------------------------------- |
+| aspect-1/1  | `{ aspectRatio: 1 }`                  |
+| aspect-16/9 | `{ aspectRatio: 1.7777777777777777 }` |
+| aspect-2/1  | `{ aspectRatio: 2 }`                  |
+| aspect-3/2  | `{ aspectRatio: 1.5 }`                |
+| aspect-4/3  | `{ aspectRatio: 1.3333333333333333 }` |
+
 ### Opacity
 
 > _Tip:_ The following styles are generated based on `theme.opacity` values.

scripts/docs-gen.ts

@@ -56,6 +56,8 @@ const Data = [
 
 	{ name: 'Overflow' },
 
+	{ name: 'AspectRatio', theme: true },
+
 	{ name: 'Opacity', theme: true },
 
 	{ name: 'Rotate', theme: true },

src/lib/style/__tests__/__snapshots__/style.test.ts.snap.android

@@ -1078,6 +1078,21 @@ Object {
   "absolute": Object {
     "position": "absolute",
   },
+  "aspect-1/1": Object {
+    "aspectRatio": 1,
+  },
+  "aspect-16/9": Object {
+    "aspectRatio": 1.7777777777777777,
+  },
+  "aspect-2/1": Object {
+    "aspectRatio": 2,
+  },
+  "aspect-3/2": Object {
+    "aspectRatio": 1.5,
+  },
+  "aspect-4/3": Object {
+    "aspectRatio": 1.3333333333333333,
+  },
   "bg-black": Object {
     "backgroundColor": "black",
   },

src/lib/style/__tests__/__snapshots__/style.test.ts.snap.ios

@@ -1078,6 +1078,21 @@ Object {
   "absolute": Object {
     "position": "absolute",
   },
+  "aspect-1/1": Object {
+    "aspectRatio": 1,
+  },
+  "aspect-16/9": Object {
+    "aspectRatio": 1.7777777777777777,
+  },
+  "aspect-2/1": Object {
+    "aspectRatio": 2,
+  },
+  "aspect-3/2": Object {
+    "aspectRatio": 1.5,
+  },
+  "aspect-4/3": Object {
+    "aspectRatio": 1.3333333333333333,
+  },
   "bg-black": Object {
     "backgroundColor": "black",
   },

src/lib/style/__tests__/__snapshots__/style.test.ts.snap.node

@@ -1078,6 +1078,21 @@ Object {
   "absolute": Object {
     "position": "absolute",
   },
+  "aspect-1/1": Object {
+    "aspectRatio": 1,
+  },
+  "aspect-16/9": Object {
+    "aspectRatio": 1.7777777777777777,
+  },
+  "aspect-2/1": Object {
+    "aspectRatio": 2,
+  },
+  "aspect-3/2": Object {
+    "aspectRatio": 1.5,
+  },
+  "aspect-4/3": Object {
+    "aspectRatio": 1.3333333333333333,
+  },
   "bg-black": Object {
     "backgroundColor": "black",
   },

src/lib/style/__tests__/__snapshots__/style.test.ts.snap.web

@@ -1078,6 +1078,21 @@ Object {
   "absolute": Object {
     "position": "absolute",
   },
+  "aspect-1/1": Object {
+    "aspectRatio": 1,
+  },
+  "aspect-16/9": Object {
+    "aspectRatio": 1.7777777777777777,
+  },
+  "aspect-2/1": Object {
+    "aspectRatio": 2,
+  },
+  "aspect-3/2": Object {
+    "aspectRatio": 1.5,
+  },
+  "aspect-4/3": Object {
+    "aspectRatio": 1.3333333333333333,
+  },
   "bg-black": Object {
     "backgroundColor": "black",
   },

src/lib/style/aspectRatio.ts

@@ -0,0 +1,20 @@
+// Ours
+import { Theme } from '../theme';
+import { merge } from '../utils/merge';
+import { id, StyleName } from '../utils/id';
+
+type AspectRatioStyle = Record<
+	StyleName<'aspect', keyof Theme['aspectRatio']>,
+	{
+		aspectRatio: number;
+	}
+>;
+
+export const aspectRatio = (theme: Theme) =>
+	Object.keys(theme.aspectRatio)
+		.map((key) => ({
+			[id('aspect', key)]: {
+				aspectRatio: theme.aspectRatio[key],
+			},
+		}))
+		.reduce(merge, {}) as AspectRatioStyle;

src/lib/style/index.ts

@@ -3,6 +3,7 @@ import { Theme } from '../theme';
 import { alignContent } from './alignContent';
 import { alignItems } from './alignItems';
 import { alignSelf } from './alignSelf';
+import { aspectRatio } from './aspectRatio';
 import { backgroundColor } from './backgroundColor';
 import { borderColor } from './borderColor';
 import { borderRadius } from './borderRadius';
@@ -51,6 +52,7 @@ export default (theme: Theme) =>
 		alignContent(),
 		alignItems(),
 		alignSelf(),
+		aspectRatio(theme),
 		backgroundColor(theme),
 		borderColor(theme),
 		borderRadius(theme),

src/lib/theme/base.ts

@@ -297,6 +297,13 @@ export const baseTheme = {
 		'11/12': '91.666667%',
 		'full': '100%',
 	},
+	aspectRatio: {
+		'1/1': 1 / 1,
+		'2/1': 2 / 1,
+		'3/2': 3 / 2,
+		'4/3': 4 / 3,
+		'16/9': 16 / 9,
+	},
 	zIndex: {
 		'0': 0,
 		'10': 10,