fix: <ratio> parsing

Author: marklawlor

src/compiler/declarations.ts

@@ -996,6 +996,8 @@ export function reduceParseUnparsed(
     }
   }
 
+  // Groups are the tokens grouped together by comma location
+  // If a group only has 1 item, it shouldn't be an array
   groups = groups.flatMap((group): StyleDescriptor[] => {
     if (!Array.isArray(group)) {
       return [];
@@ -1011,6 +1013,16 @@ export function reduceParseUnparsed(
       } else {
         return [first];
       }
+    } else if (
+      // This is a special case for <ratio> values
+      group.every((item) =>
+        typeof item === "string" && item === "/"
+          ? item
+          : typeof item === "number",
+      )
+    ) {
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
+      return [group.join(" ")];
     } else {
       return [group];
     }
@@ -1188,11 +1200,16 @@ export function parseUnparsed(
           return parseDimension(tokenOrValue.value, builder);
         case "comma":
           return CommaSeparator as unknown as StyleDescriptor;
+        case "delim": {
+          if (tokenOrValue.value.value === "/") {
+            return tokenOrValue.value.value;
+          }
+          return;
+        }
         case "at-keyword":
         case "hash":
         case "id-hash":
         case "unquoted-url":
-        case "delim":
         case "white-space":
         case "comment":
         case "colon":

src/runtime/native/__tests__/units.test.tsx

@@ -170,3 +170,16 @@ test("rem - dynamic", () => {
     style: { fontSize: 100 },
   });
 });
+
+test("<ratio>", () => {
+  registerCSS(`.my-class { aspect-ratio: 16 / 9; }`);
+
+  const { result } = renderHook(() => {
+    return useNativeCss(View, { className: "my-class" });
+  });
+
+  expect(result.current.type).toBe(View);
+  expect(result.current.props).toStrictEqual({
+    style: { aspectRatio: "16/9" },
+  });
+});