Skip to content

feat(compiler): evaluate calc and math expressions with units in parseLength - #458

Open
Wadiou wants to merge 1 commit into
nativewind:mainfrom
Wadiou:feat/calc-units
Open

Wadiou wants to merge 1 commit into
nativewind:mainfrom
Wadiou:feat/calc-units

Conversation

@Wadiou

@Wadiou Wadiou commented Sep 20, 2026

Copy link
Copy Markdown

Summary

Evaluate calc(), min(), max(), and clamp() expressions containing length units (rem, px) during compile-time length parsing in react-native-css.

Key Changes

Compiler

  • src/compiler/declarations.ts: Replace the calc stub in parseLength with evaluateCalc().
  • Implement evaluation for number, dimension, value, sum, product, and function (calc, min, max, clamp) nodes.
  • Resolve rem values to pixels using configured inlineRem (default 14).
  • Fold static operations into numeric values at compile time.
  • Guard against unsupported mixed percentage and length combinations, returning undefined for React Native.

Tests

  • src/__tests__/native/calc.test.tsx: Add test coverage for calc(var(--radius) + 8px), calc(1rem - 4px), min and max with mixed units, and clamp with mixed units.

…eLength

Evaluate calc(), min(), max(), and clamp() expressions at compile-time in parseLength.
Resolves rem units against inlineRem and folds static operations into numbers while
guarding against mixed percentage and length combinations unsupported by React Native.
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