From 3de117b9a1e0cc78d2e583e732045e5cdff0c071 Mon Sep 17 00:00:00 2001
From: Ethan <ethan@zolplay.com>
Date: Wed, 23 Sep 2026 01:02:51 +0800
Subject: [PATCH] fix(compiler): omit absent color-mix weights from serialized
 descriptors

---
 src/__tests__/compiler/declarations.test.tsx | 42 ++++++++++++++++++++
 src/compiler/declarations.ts                 | 19 ++++-----
 2 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/src/__tests__/compiler/declarations.test.tsx b/src/__tests__/compiler/declarations.test.tsx
index c2e18378..a39123b9 100644
--- a/src/__tests__/compiler/declarations.test.tsx
+++ b/src/__tests__/compiler/declarations.test.tsx
@@ -1,3 +1,4 @@
+import { compile } from "react-native-css/compiler";
 import { compileWithAutoDebug } from "react-native-css/jest";
 
 // prettier-ignore
@@ -29,3 +30,44 @@ test.each(tests)("declarations for %s", (declarations, expected) => {
 
   expect(myClassDeclarations).toStrictEqual(expected);
 });
+
+test.each([
+  [
+    "left weight only",
+    "color-mix(in oklab, var(--left) 90%, transparent)",
+    ["oklab", [{}, "var", "left", 1], "90%", "transparent"],
+  ],
+  [
+    "right weight only",
+    "color-mix(in srgb, var(--left), var(--right) 25%)",
+    ["srgb", [{}, "var", "left", 1], [{}, "var", "right", 1], "25%"],
+  ],
+  [
+    "neither weight",
+    "color-mix(in srgb, var(--left), var(--right))",
+    ["srgb", [{}, "var", "left", 1], [{}, "var", "right", 1]],
+  ],
+] as const)(
+  "color-mix serializes without absent weights: %s",
+  (_, value, expected) => {
+    const stylesheet = JSON.parse(
+      JSON.stringify(
+        compile(`.test { background-color: ${value}; }`, {
+          inlineVariables: false,
+        }).stylesheet(),
+      ),
+    ) as ReturnType<ReturnType<typeof compile>["stylesheet"]>;
+    const declaration = stylesheet.s?.[0]?.[1]?.[0]?.d?.find(
+      (entry) =>
+        Array.isArray(entry) &&
+        Array.isArray(entry[0]) &&
+        entry[0][1] === "colorMix",
+    );
+
+    expect(
+      Array.isArray(declaration) && Array.isArray(declaration[0])
+        ? declaration[0][2]
+        : undefined,
+    ).toStrictEqual(expected);
+  },
+);
diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts
index 9ca2aab8..45b74d5f 100644
--- a/src/compiler/declarations.ts
+++ b/src/compiler/declarations.ts
@@ -2801,17 +2801,14 @@ export function parseColorMix(
     return;
   }
 
-  return [
-    {},
-    "colorMix",
-    [
-      colorSpaceArg,
-      leftColorArg,
-      leftColorPercentage,
-      rightColorArg,
-      rightColorPercentage,
-    ],
-  ];
+  // Optional weights must not leave undefined array entries: Metro serializes
+  // them as null, which the native colorMix resolver cannot consume.
+  const args: StyleDescriptor[] = [colorSpaceArg, leftColorArg];
+  if (leftColorPercentage !== undefined) args.push(leftColorPercentage);
+  args.push(rightColorArg);
+  if (rightColorPercentage !== undefined) args.push(rightColorPercentage);
+
+  return [{}, "colorMix", args];
 }
 
 export function parseCalcArguments(