Skip to content

fix(native): handle omitted percentages in color-mix and register color spaces - #457

Open
Wadiou wants to merge 1 commit into
nativewind:mainfrom
Wadiou:fix/color-mix-oklch
Open

Wadiou wants to merge 1 commit into
nativewind:mainfrom
Wadiou:fix/color-mix-oklch

Conversation

@Wadiou

@Wadiou Wadiou commented Sep 19, 2026

Copy link
Copy Markdown

Summary

Handle omitted percentages in colorMix runtime evaluation and register OKLCH, HSL, Lab, and LCH color spaces with colorjs.io.

Problem and Reproduction

When percentages are omitted in color-mix() (such as color-mix(in oklab, var(--color) 50%, transparent)), the compiled descriptor tuple contains trailing null values:

["oklab", "#060606", "50%", "transparent", null]

At runtime in color-mix.ts, percentage() returned undefined without shifting null, leaving args = [null]. The subsequent if (args.length) return; check failed and evaluated to undefined.

Reproduction

const { colorMix } = require("react-native-css/dist/commonjs/native/styles/functions/color-mix.js");

const desc = [{}, "colorMix", ["oklab", "#060606", "50%", "transparent", null]];
const result = colorMix((v) => v, desc);
// Before: undefined
// After:  "rgba(6, 6, 6, 0.5)"

Key Changes

Runtime

  • src/native/styles/functions/color-mix.ts: Consume trailing null/undefined descriptor values before args.length check.
  • Register OKLCH, HSL, Lab, and LCH color spaces with colorjs.io.

Tests

  • src/__tests__/native/color-mix.test.tsx: Add test coverage for hsl and oklch color spaces.

…or spaces

When percentages are omitted in color-mix(), the descriptor contains trailing null
values that were not consumed, causing args.length validation to fail. Consume
trailing null/undefined values and register OKLCH, HSL, Lab, and LCH color spaces.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant