feat: add parseColor runtime and metro support for it

[Brentlok]

fixes #305

Summary by CodeRabbit

• New Features

  • Added color parsing support for custom color functions (hsl, oklch).
  • Enhanced color handling to parse and convert color values via theme variables.

• Tests

  • Added test coverage for custom color parsing functionality.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

A new color parsing utility function is introduced that handles custom color formats through color functions like hsl() and oklch(), integrated into the runtime and consumed by the color processor to resolve CSS variable-based colors.

Changes

Cohort / File(s)	Summary
Core Color Parsing Utilities packages/uniwind/src/core/native/native-utils.ts	New parseColor(type: string, color: string) utility function that uses culori to parse color values. Constructs a type-based color string (e.g., "rgb(color)"), returns hex without alpha if alpha is 1 or undefined, otherwise returns 8-digit hex with alpha. Falls back to '#000000' on parse failure.
Runtime Integration packages/uniwind/src/core/native/runtime.ts, packages/uniwind/src/core/types.ts	Exposes parseColor function on UniwindRuntime type and initializes it in the runtime object. Adds new type member parseColor: (type: string, color: string) => string to UniwindRuntimeType.
Color Processing packages/uniwind/src/metro/processor/color.ts	Updates Color.processColor to detect color function names (e.g., hsl, oklch) in unparseable color strings using regex. When detected, extracts the function and inner color value, then delegates parsing to rt.parseColor(). Maintains previous black fallback if no function is found.
Tests & Configuration packages/uniwind/tests/styles-parsing/colors.test.tsx, packages/uniwind/tests/test.css	Adds CSS custom properties --foo and --bar and a @theme block mapping --color-foo and --color-bar via hsl/oklch functions. Introduces two new test cases verifying background colors resolve to expected hex values (#40bf40, #7bae73).

Sequence Diagram(s)

sequenceDiagram
    participant ColorProcessor as Color.processColor<br/>(Processor)
    participant Runtime as rt.parseColor<br/>(Runtime)
    participant NativeUtil as parseColor<br/>(Utility)
    participant Culori as Culori Library
    
    ColorProcessor->>ColorProcessor: Detect function name<br/>via regex (hsl, oklch, etc.)
    ColorProcessor->>Runtime: Call parseColor(type, value)
    Runtime->>NativeUtil: Delegate to parseColor()
    NativeUtil->>NativeUtil: Build color string<br/>e.g., "hsl(color)"
    NativeUtil->>Culori: Parse with culori
    Culori->>NativeUtil: Return parsed color
    NativeUtil->>NativeUtil: Select output format<br/>(hex vs hex + alpha)
    NativeUtil->>Runtime: Return hex color string
    Runtime->>ColorProcessor: Return hex result
    ColorProcessor->>ColorProcessor: Use resolved color

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A splash of hue through culori's gate,
Where hsl and oklch colors wait,
The parseColor charm makes variables sing,
And hex returns from every spring! 🌈✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: adding a parseColor function to the runtime and implementing metro support for it across multiple files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@packages/uniwind/src/core/native/native-utils.ts`:
- Around line 43-58: parseColor currently returns the raw input string when
parse(...) yields undefined, which can leak non-hex values; change parseColor so
that it always returns a hex/hex8 string by replacing the "if (parsedColor ===
undefined) return color" branch with a consistent hex fallback (e.g., return
'#000000'), and keep the existing catch returning '#000000'; refer to the
parseColor function and the helpers parse, formatHex, and formatHex8 when making
this change.