Environment
Vuetify Version: 4.1.2
Vue Version: 3.5.22
OS: macOS 10.15.7 (current)
Steps to reproduce
- Add a custom
$rounded token whose name contains a digit, e.g. 2xl (the playground fakes this with a .rounded-2xl { border-radius: 40px } rule).
- Render one (prop) and one (class).
- Observe the prop card keeps only VCard's default radius (~4px) β the
rounded-2xl class is never emitted β while the class card is rounded 40px.
Expected Behavior
<v-card rounded="2xl"> should apply the custom 2xl rounded token (i.e. emit the rounded-2xl class), the same as it did in v3.
Actual Behavior
The rounded="2xl" prop emits neither a class nor an inline style, so the card falls back to the default radius. Every custom $rounded token whose name contains a digit (2xl/3xl/4xl) is affected. The equivalent utility class (class="rounded-2xl") still works, so only the prop path is broken.
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
Cause β useRounded (composables/rounded.ts):
roundedClasses only emits rounded-<token> when !/[0-9%]/.test(rounded), so any value containing a digit (e.g. "2xl") is excluded β no class.
roundedStyles returns {} when the value includes('xl'), so "2xl" also gets no inline border-radius.
The includes('xl') guard in roundedStyles is clearly meant to route xl-containing values to the class path rather than treat them as numbers β but roundedClasses' digit check then refuses to emit that class, so digit+xl tokens fall through both branches to nothing.
Regression: in v3 (through 3.12.8), roundedClasses had no digit check (any string β rounded-) and there was no roundedStyles. The numeric-radius feature added in v4 (rounded="8" β inline border-radius) introduced the digit disambiguation that broke digit-named custom tokens.
Possible fix: make the class path agree with the style-path guard, e.g. ... || !/[0-9%]/.test(rounded) || rounded.includes('xl'), or disambiguate by number-ness (take the style path only when !isNaN(Number(rounded)), otherwise emit a class).
Environment
Vuetify Version: 4.1.2
Vue Version: 3.5.22
OS: macOS 10.15.7 (current)
Steps to reproduce
$roundedtoken whose name contains a digit, e.g.2xl(the playground fakes this with a.rounded-2xl { border-radius: 40px }rule).rounded-2xlclass is never emitted β while the class card is rounded 40px.Expected Behavior
<v-card rounded="2xl">should apply the custom2xlrounded token (i.e. emit therounded-2xlclass), the same as it did in v3.Actual Behavior
The
rounded="2xl"prop emits neither a class nor an inline style, so the card falls back to the default radius. Every custom$roundedtoken whose name contains a digit (2xl/3xl/4xl) is affected. The equivalent utility class (class="rounded-2xl") still works, so only the prop path is broken.Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
Cause β useRounded (composables/rounded.ts):
roundedClassesonly emitsrounded-<token>when!/[0-9%]/.test(rounded), so any value containing a digit (e.g. "2xl") is excluded β no class.roundedStylesreturns{}when the valueincludes('xl'), so "2xl" also gets no inline border-radius.The
includes('xl')guard inroundedStylesis clearly meant to route xl-containing values to the class path rather than treat them as numbers β but roundedClasses' digit check then refuses to emit that class, so digit+xl tokens fall through both branches to nothing.Regression: in v3 (through 3.12.8), roundedClasses had no digit check (any string β rounded-) and there was no
roundedStyles. The numeric-radius feature added in v4 (rounded="8" β inline border-radius) introduced the digit disambiguation that broke digit-named custom tokens.Possible fix: make the class path agree with the style-path guard, e.g.
... || !/[0-9%]/.test(rounded) || rounded.includes('xl'), or disambiguate by number-ness (take the style path only when!isNaN(Number(rounded)), otherwise emit a class).