`hsla(var(--primary))` with a percentage alpha reaches native as a string `processColor` refuses

Start with src/compiler/declarations.ts and src/native/styles/resolve.ts, then run the reproducer test src/__tests__/native/hsla-theme-variable.test.tsx. Trace how a color function containing var() is resolved and compare it with the directly written color case. Done means the variable case produces a color accepted by React Native's processColor and both tests pass.

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

When a colour function's arguments come from a var(), lightningcss cannot type it, so the compiler hands it to the runtime as a function, and the runtime prints it as name(argument, argument, …). React Native's processColor reads that string with @react-native/normalize-colors, which takes no percentage alpha, so a theme colour such as --primary: 0 84.2% 60.2% / 60%; color: hsla(var(--primary)) reaches it as hsla(0, 84.2%, 60.2%, 60%) and processColor returns undefined: the colour is dropped. The compiler folds a custom property declared once into its readers, so this happens when the variable is kept, as a :root value with a .dark override keeps it.

The first case fails, receiving { color: "hsla(0, 84.2%, 60.2%, 60%)", processed: undefined }; the second, the same colour written directly, passes.

parseUnparsed (src/compiler/declarations.ts) sends an hsl, hsla, rgb or rgba function that holds a var() to unparsedFunction, and at runtime resolveValue (src/native/styles/resolve.ts) gives a function with no resolver of its own the string ${name}(${args}). The compiler converts a typed colour through colorjs.io in parseColor, which a resolved function could go through too.

Library version

main at 2421ea7 (0.0.0-nightly.2421ea7)

Environment info

System:
  OS: Windows 11 10.0.26300
  CPU: "(32) x64 AMD Ryzen 9 9950X3D 16-Core Processor          "
  Memory: 155.26 GB / 255.67 GB
Binaries:
  Node:
    version: 26.12.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 4.9.2
    path: C:\Users\<user>\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 12.2.1
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "33"
      - "35"
      - "35"
      - "35"
      - "36"
      - "37"
    Build Tools:
      - 35.0.0
      - 36.0.0
      - 36.1.0
      - 37.0.0
    System Images:
      - android-26 | Google APIs Intel x86_64 Atom
      - android-28 | Google APIs Intel x86_64 Atom
      - android-29 | Google APIs Intel x86_64 Atom
      - android-30 | Google APIs Intel x86_64 Atom
      - android-31 | Google APIs Intel x86_64 Atom
      - android-32 | Google APIs Intel x86_64 Atom
      - android-33 | Google APIs Intel x86_64 Atom
      - android-34 | Google APIs Intel x86_64 Atom
      - android-35 | Google APIs Intel x86_64 Atom
      - android-36.1 | Google Play Intel x86_64 Atom
      - android-36.1 | Pre-Release 16 KB Page Size Google Play Intel x86_64 Atom
      - android-37.0 | Google APIs Intel x86_64 Atom
    Android NDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-262.9437.185.2621.16467767
  Visual Studio: Not Found
Languages:
  Java:
    version: 17.0.20.1
    path: C:\Program Files\Microsoft\jdk-17.0.20.101-hotspot\bin\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.2.3
    wanted: 19.2.3
  react-native:
    installed: 0.86.3
    wanted: 0.86.3
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

1. Clone the reproducer branch, which is main at 2421ea7 with one file added, src/__tests__/native/hsla-theme-variable.test.tsx, and install:

   git clone --branch repro/520-runtime-colour-function-printed-as-a-string https://github.com/YevheniiKotyrlo/react-native-css
   cd react-native-css
   yarn install
   

2. Run yarn jest src/__tests__/native/hsla-theme-variable.test.tsx.

src/__tests__/native/hsla-theme-variable.test.tsx:

import { processColor } from "react-native";

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("an hsla() alpha read through a theme variable keeps its colour", () => {
  registerCSS(`
    :root { --primary: 0 84.2% 60.2% / 60%; }
    .dark { --primary: 0 72.2% 50.6% / 60%; }
    .a { color: hsla(var(--primary)); }
  `);

  render(<View testID={testID} className="a" />);
  const { color } = screen.getByTestId(testID).props.style;

  expect({ color, processed: processColor(color) }).toEqual({
    color: "#ef444499",
    processed: expect.any(Number),
  });
});

test("the same colour written directly", () => {
  registerCSS(`.a { color: hsla(0 84.2% 60.2% / 60%); }`);

  render(<View testID={testID} className="a" />);
  const { color } = screen.getByTestId(testID).props.style;

  expect({ color, processed: processColor(color) }).toEqual({
    color: "#ef444499",
    processed: expect.any(Number),
  });
});

Expected: hsla(var(--primary)) over a percentage alpha reaches React Native as a colour processColor reads.

Actual: it reaches it as hsla(0, 84.2%, 60.2%, 60%), which processColor turns into undefined, so the colour is dropped.

FAIL src/__tests__/native/hsla-theme-variable.test.tsx
  × an hsla() alpha read through a theme variable keeps its colour (22 ms)
  √ the same colour written directly (5 ms)
  ● an hsla() alpha read through a theme variable keeps its colour
    expect(received).toEqual(expected) // deep equality
    - Expected  - 2
    + Received  + 2
      Object {
    -   "color": "#ef444499",
    -   "processed": Any<Number>,
    +   "color": "hsla(0, 84.2%, 60.2%, 60%)",
    +   "processed": undefined,
      }
      15 |   const { color } = screen.getByTestId(testID).props.style;
      16 |
    > 17 |   expect({ color, processed: processColor(color) }).toEqual({
         |                                                     ^
      18 |     color: "#ef444499",
      19 |     processed: expect.any(Number),
      20 |   });
      at Object.toEqual (src/__tests__/native/hsla-theme-variable.test.tsx:17:53)
Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        1.154 s, estimated 2 s
Ran all test suites matching /src\\__tests__\\native\\hsla-theme-variable.test.tsx/i.

Reproducible example repository

https://github.com/YevheniiKotyrlo/react-native-css/tree/repro/520-runtime-colour-function-printed-as-a-string