fix: styles using variables not being delayed (#85)

Author: marklawlor

src/compiler/stylesheet.ts

@@ -614,7 +614,7 @@ function postProcessStyleFunction(value: StyleDescriptor): [
   let [shouldDelay, usesVariables] = postProcessStyleFunction(value[2]);
 
   usesVariables ||= value[1] === "var";
-  shouldDelay ||= value[3] === 1;
+  shouldDelay ||= value[3] === 1 || usesVariables;
 
   if (shouldDelay) {
     return [true, usesVariables];

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

@@ -135,3 +135,33 @@ describe("hsla", () => {
     });
   });
 });
+
+describe("currentcolor", () => {
+  test("currentcolor and global variables", () => {
+    registerCSS(`
+      @layer theme {
+        :root {
+          --color-red-500: red;
+        }
+      }
+      @layer utilities {
+        .bg-current {
+          background-color: currentcolor;
+        }
+        .text-red-500 {
+          color: var(--color-red-500);
+        }
+      }
+    `);
+
+    render(<View testID={testID} className="bg-current text-red-500" />);
+    const component = screen.getByTestId(testID);
+
+    expect(component.type).toBe("View");
+    expect(component.props).toStrictEqual({
+      children: undefined,
+      style: { color: "red", backgroundColor: "red" },
+      testID,
+    });
+  });
+});