tailwindcss

0 Fork 0

mirror of https://github.com/aphrody-labs/tailwindcss.git synced 2026-10-13 21:30:00 +00:00

T

Alexandre KohlerandRobin Malfait 9833b487a8 Recognize missing viewport and font-relative length units (#20516 )

## Summary

`isLength` in `packages/tailwindcss/src/utils/infer-data-type.ts` checks
arbitrary values against a fixed list of units. That list was carried
over from v3 and is missing several CSS length units: the small, large,
and dynamic viewport units `svi`, `svb`, `svmin`, `svmax`, `lvi`, `lvb`,
`lvmin`, `lvmax`, `dvi`, `dvb`, `dvmin`, `dvmax`, and the font-relative
units `cap`, `ic`, `rex`, `rch`, `rcap`, `ric`.

Because these values are not detected as lengths, utilities that choose
a property based on the value type fall back to the color branch. For
example `text-[10dvmin]` generates `color: 10dvmin` instead of
`font-size: 10dvmin` (while `text-[10dvw]` already works), and
`border-[1dvmin]` generates `border-color: 1dvmin`. Today the only
workaround is an explicit type hint like `text-[length:10dvmin]`.

This adds the missing units, all of which are `<length>` units defined
in CSS Values and Units Level 4, to the list. Values that were already
detected are unaffected.

## Test plan

- Added a test to `packages/tailwindcss/src/utilities.test.ts` that
compiles `text-[1<unit>]` for each of the 18 new units and compares the
full generated rule. It fails without the change (the rules are emitted
as `color: 1<unit>`) and passes with it.
- `vitest run src/utilities.test.ts -t "viewport and font-relative"` (in
`packages/tailwindcss`)
- `vitest run` (in `packages/tailwindcss`): 42 files, 5016 tests passed
- `prettier --check` on the changed files

---------

Co-authored-by: Robin Malfait <robin.malfait@shopify.com>

2026-10-13 13:17:03 +00:00