Skip to content

fix: apply effective rem to calc function using variables#345

Open
Jin-Byun wants to merge 1 commit into
nativewind:mainfrom
Jin-Byun:fix/tailwind-v4-rem-variables-in-calc
Open

fix: apply effective rem to calc function using variables#345
Jin-Byun wants to merge 1 commit into
nativewind:mainfrom
Jin-Byun:fix/tailwind-v4-rem-variables-in-calc

Conversation

@Jin-Byun
Copy link
Copy Markdown

Summary

Fix for a bug: Custom effectiveRem value not being applied in Tailwind V4.

  • Tailwind V4 uses calc function with rem-based variables (e.g --spacing: 0.25rem) for dynamic values (e.g. w-1 px-17 h-1.5) and more. (e.g. .rounded-4xl { border-radius: calc(var(--radius-xl) * 4})
  • Length visitor in the compiler cannot update calc function with rem-based variable directly into px value.
  • Update in the Declaration visitor using remToPx transformation similar to Length visitor catches and convert rem-based variables to px-based variables.

Test Plan

  • Added test to check whether the effectiveRem set by :root { font-size: 16px; } is applied to border-width: calc(var(--spacing) * 4)
  • Tests Passed, typechecked and linted.

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