Allow decimal values in aspect ratio utilities#19680
Allow decimal values in aspect ratio utilities#19680veeceey wants to merge 1 commit intotailwindlabs:mainfrom
Conversation
The `aspect-*` utility only accepted integer ratios like `aspect-4/3`, rejecting valid decimal ratios like `aspect-8.5/11`. This is because the bare value handler used `isPositiveInteger` to validate both sides of the fraction. CSS `aspect-ratio` accepts any positive number ratio, so this adds an `isPositiveNumber` helper and uses it for the aspect utility validation, allowing classes like `aspect-8.5/11` to generate `aspect-ratio: 8.5 / 11`. Fixes tailwindlabs#19663
WalkthroughThe pull request extends aspect ratio utility support in Tailwind CSS by enabling decimal values in ratios. A new 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. No actionable comments were generated in the recent review. 🎉 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. Comment |
Fixes #19663
The
aspect-*utility currently only accepts integer ratios (e.g.aspect-4/3) becausehandleBareValuevalidates both sides of the fraction withisPositiveInteger. This means perfectly valid ratios likeaspect-8.5/11are silently dropped from the stylesheet.CSS
aspect-ratiosupports any positive number ratio, so there's no reason to restrict it to integers. This PR adds anisPositiveNumbercheck and uses it for the aspect utility, soaspect-8.5/11now correctly generates:Tested by adding
aspect-8.5/11to the existing aspect-ratio test case and confirming the output. All 382 utility tests pass, no regressions.