Skip to content

Clean up DaisyUI v4 → v5 class drift (dead classes across ~29 files) #150

Description

@TortoiseWolfe

Summary

The project runs DaisyUI beta (5.0.0-beta.9) but a number of components still use DaisyUI v4 class names that were renamed or removed in v5. These are dead classes — DaisyUI v5 doesn't emit any CSS for them, so they're silently ignored. The layouts still render because the base classes (.card, .input, .label) and Tailwind utilities carry the visual weight. Nothing is broken today, but the markup is accumulating no-op classes that mislead readers and will rot further as DaisyUI evolves.

Surfaced while building the /design-sync design-system bundle (PR #149): the bundle's coverage check flagged these classes as having no rule in compiled DaisyUI v5. The generator's manifest already uses the v5 names; the app source does not.

The drift

v4 class (dead in v5) v5 replacement Notes
card-bordered card-border renamed
card-compact card-sm replaced by size modifiers (card-sm / card-xs)
input-bordered (remove) .input is bordered by default in v5
form-control (remove) form-control system removed; use fieldset / flex wrappers
label-text / label-text-alt (remove) replaced; v5 uses .label + plain text utilities (text-sm, text-base-content/85, etc.)

All v5 replacement classes (card-border, card-sm, input, label, fieldset) confirmed present in compiled DaisyUI v5.

Scope

~29 unique files under src/ use at least one dead class. Counts by class (unique files):

  • card-bordered — 3 files
  • card-compact — 4 files
  • input-bordered — 20 files
  • form-control — 21 files
  • label-text / label-text-alt — 19 files

Highest-traffic areas: the auth forms (SignInForm, SignUpForm, ForgotPasswordForm, ResetPasswordForm, ReAuthModal, AccountSettings), forms/ (FormField, ValidatedInput, ContactForm), and several molecular/organism components (DateRangePicker, UserSearch, CreateGroupModal, ConversationList, PaymentHistory, etc.). Also one stylesheet ref: src/styles/colorblind-patterns.css (card-bordered).

Find them all:

grep -rln -E "card-bordered|card-compact|input-bordered|form-control|label-text" src/

Suggested approach

  • card-borderedcard-border, card-compactcard-sm (mechanical replace).
  • Drop input-bordered entirely (no-op; .input is already bordered).
  • The form-control / label-text removals are not pure deletes — the wrapper/label markup needs converting to the v5 pattern (.label + text utilities, or fieldset). The form components in PR feat(design-sync): generator for claude.ai design-system bundle #149's design-sync manifest show the converted pattern as a reference. Do these per-component and eyeball each form (the .label spacing differs slightly from form-control).
  • Run the gates after: type-check, lint, test, and the relevant Pa11y / E2E for any touched form (contrast on labels must stay AA).

Why p3

Zero visual/functional impact today — pure tech-debt cleanup. Worth doing before/with any future DaisyUI v5 stable upgrade so the drift doesn't compound.

🤖 Generated with Claude Code

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestpriority:p3Low — defer (heavy work, polish, nice-to-haves)

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions