fix: runtime box shadows from nested css variables (#145)

* fix: box shadow from css variables

* chore: move tests into seperate file

---------

Co-authored-by: Mark Lawlor <mwlawlor@gmail.com>

Author: JirakLu

src/__tests__/native/box-shadow.test.tsx

@@ -0,0 +1,95 @@
+import { render, screen } from "@testing-library/react-native";
+import { View } from "react-native-css/components/View";
+import { registerCSS, testID } from "react-native-css/jest";
+
+test("shadow values - single nested variables", () => {
+  registerCSS(`
+    :root { 
+      --color: #fb2c36; 
+      --my-var: 0 20px 25px -5px var(--color); 
+    }
+
+    .test { box-shadow: var(--my-var); }
+  `);
+
+  render(<View testID={testID} className="test" />);
+  const component = screen.getByTestId(testID);
+
+  expect(component.props.style).toStrictEqual({
+    boxShadow: [
+      {
+        blurRadius: 25,
+        color: "#fb2c36",
+        offsetX: 0,
+        offsetY: 20,
+        spreadDistance: -5,
+      },
+    ],
+  });
+});
+
+test("shadow values - multiple nested variables", () => {
+  registerCSS(`
+    :root {
+      --my-var: 0 20px 0 0 red, 0 30px 0 0 green;
+      --my-var-2: var(--my-var), 0 40px 0 0 purple;
+      --my-var-3: 0 50px 0 0 yellow, 0 60px 0 0 orange;
+      --my-var-4: var(--my-var-3), 0 70px 0 0 gray;
+    }
+
+    .test {
+      box-shadow: var(--my-var-2), var(--my-var-4);
+    }
+  `);
+
+  render(<View testID={testID} className="test" />);
+  const component = screen.getByTestId(testID);
+
+  expect(component.props.style).toStrictEqual({
+    boxShadow: [
+      {
+        blurRadius: 0,
+        color: "red",
+        offsetX: 0,
+        offsetY: 20,
+        spreadDistance: 0,
+      },
+
+      {
+        blurRadius: 0,
+        color: "green",
+        offsetX: 0,
+        offsetY: 30,
+        spreadDistance: 0,
+      },
+      {
+        blurRadius: 0,
+        color: "purple",
+        offsetX: 0,
+        offsetY: 40,
+        spreadDistance: 0,
+      },
+      {
+        blurRadius: 0,
+        color: "yellow",
+        offsetX: 0,
+        offsetY: 50,
+        spreadDistance: 0,
+      },
+      {
+        blurRadius: 0,
+        color: "orange",
+        offsetX: 0,
+        offsetY: 60,
+        spreadDistance: 0,
+      },
+      {
+        blurRadius: 0,
+        color: "gray",
+        offsetX: 0,
+        offsetY: 70,
+        spreadDistance: 0,
+      },
+    ],
+  });
+});

src/__tests__/native/variables.test.tsx

@@ -209,8 +209,6 @@ test("useUnsafeVariable", () => {
     .test { color: 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);
 
@@ -223,8 +221,6 @@ test("ratio values", () => {
     .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);
 

src/runtime/native/styles/shorthands/box-shadow.ts

@@ -1,3 +1,4 @@
+import type { StyleDescriptor } from "../../../../compiler";
 import { isStyleDescriptorArray } from "../../../utils";
 import type { StyleFunctionResolver } from "../resolve";
 import { shorthandHandler } from "./_handler";
@@ -9,6 +10,27 @@ const blurRadius = ["blurRadius", "number"] as const;
 const spreadDistance = ["spreadDistance", "number"] as const;
 // const inset = ["inset", "string"] as const;
 
+function deepFlattenToArrayOfStyleDescriptors(
+  arr: StyleDescriptor[],
+): StyleDescriptor[] {
+  const result: StyleDescriptor[] = [];
+  const stack = [arr];
+  while (stack.length > 0) {
+    const current = stack.pop();
+    if (Array.isArray(current)) {
+      if (current.length > 0 && Array.isArray(current[0])) {
+        for (let i = current.length - 1; i >= 0; i--) {
+          const elem = current[i];
+          if (isStyleDescriptorArray(elem)) stack.push(elem);
+        }
+      } else {
+        result.push(current);
+      }
+    }
+  }
+  return result;
+}
+
 const handler = shorthandHandler(
   [
     [offsetX, offsetY, blurRadius, spreadDistance, color],
@@ -33,26 +55,10 @@ export const boxShadow: StyleFunctionResolver = (
   if (!isStyleDescriptorArray(args)) {
     return args;
   } else {
-    return args
-      .flatMap((shadows) => {
+    return deepFlattenToArrayOfStyleDescriptors(args)
+      .map((shadows) => {
         if (shadows === undefined) {
           return [];
-        } else if (isStyleDescriptorArray(shadows)) {
-          if (shadows.length === 0) {
-            return [];
-          } else if (Array.isArray(shadows[0])) {
-            return shadows
-              .map((shadow) => {
-                return omitTransparentShadows(
-                  handler(resolveValue, shadow, get, options),
-                );
-              })
-              .filter((v) => v !== undefined);
-          } else {
-            return omitTransparentShadows(
-              handler(resolveValue, shadows, get, options),
-            );
-          }
         } else {
           return omitTransparentShadows(
             handler(resolveValue, shadows, get, options),