fix: variables with ratio values (#88)

Author: marklawlor

src/compiler/declarations.ts

@@ -1210,7 +1210,7 @@ export function parseUnparsed(
         case "comma":
           return CommaSeparator as unknown as StyleDescriptor;
         case "delim": {
-          if (property === "aspect-ratio" && tokenOrValue.value.value === "/") {
+          if (tokenOrValue.value.value === "/") {
             return tokenOrValue.value.value;
           }
           return;

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

@@ -217,3 +217,17 @@ test("useUnsafeVariable", () => {
 
   expect(component.props.style).toStrictEqual({ color: "red" });
 });
+
+test("ratio values", () => {
+  registerCSS(`
+    :root { --my-var: 16 / 9; }
+    .test { aspect-ratio: var(--my-var); }
+  `);
+
+  // Since we can't directly test the hook in isolation with the render approach,
+  // we'll test that a component using the variable gets the correct value
+  render(<View testID={testID} className="test" />);
+  const component = screen.getByTestId(testID);
+
+  expect(component.props.style).toStrictEqual({ aspectRatio: "16 / 9" });
+});

src/runtime/native/styles/resolve.ts

@@ -178,6 +178,7 @@ export function resolveValue(
               }
               return arg;
             })
+            .filter((value) => value !== "/")
             .join(", ");
 
           if (name === "radial-gradient") {