Skip to content

[Bug Report][4.1.2] rounded prop ignores custom tokens containing a digit (2xl/3xl/4xl)Β #22978

Description

@mdoesburg

Environment

Vuetify Version: 4.1.2
Vue Version: 3.5.22
OS: macOS 10.15.7 (current)

Steps to reproduce

  1. 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).
  2. Render one (prop) and one (class).
  3. 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).

Metadata

Metadata

Assignees

Labels

E: roundedRounded composableT: bugFunctionality that does not work as intended/expected

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions