From 6a13965ac415ff6d07d591cfc9cf5652bb9466e8 Mon Sep 17 00:00:00 2001
From: Jon Thompson <660222+jonthomp@users.noreply.github.com>
Date: Wed, 11 Nov 2026 00:24:38 +0000
Subject: [PATCH] fix(compiler): keep a custom property declared as auto

parseUnparsed rejects `auto` for every property outside allowAutoProperties,
so `--my-var: auto` compiled to a warning and no declaration. A var() reading
it fell through to the inherited value, the :root value or its fallback, even
where the reading property takes `auto`.

A custom property's value is any token list, so custom properties now keep
`auto` and a var() substitutes it as written.
---
 src/__tests__/native/variables.test.tsx | 14 ++++++++++++++
 src/compiler/declarations.ts            |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/__tests__/native/variables.test.tsx b/src/__tests__/native/variables.test.tsx
index 25ac30f5..40f677a9 100644
--- a/src/__tests__/native/variables.test.tsx
+++ b/src/__tests__/native/variables.test.tsx
@@ -351,3 +351,17 @@ test("variable overriding with classes", () => {
   const component = screen.getByTestId(testID);
   expect(component.props.style).toStrictEqual({ color: "#f00" });
 });
+
+test("a custom property declared as auto keeps its value", () => {
+  // Two definitions, so the compiler cannot inline `--my-var`.
+  registerCSS(`
+    .auto { --my-var: auto; }
+    .fixed { --my-var: 10px; }
+    .test { width: var(--my-var, 5px); }
+  `);
+
+  render(<View testID={testID} className="test auto" />);
+
+  const component = screen.getByTestId(testID);
+  expect(component.props.style).toStrictEqual({ width: "auto" });
+});
diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts
index 2f0b8a4a..7fa27b30 100644
--- a/src/compiler/declarations.ts
+++ b/src/compiler/declarations.ts
@@ -1169,7 +1169,7 @@ export function parseUnparsed(
     | null,
   builder: StylesheetBuilder,
   property: string,
-  allowAuto = allowAutoProperties.has(property),
+  allowAuto = allowAutoProperties.has(property) || property.startsWith("--"),
 ): StyleDescriptor {
   if (tokenOrValue === undefined || tokenOrValue === null) {
     return;