feat(PROJ-79): tailwindcss v3 -> v4 + tailwind-merge v3 Upgrade
Offizielles @tailwindcss/upgrade-Tool durchgelaufen: tailwind.config.ts entfernt, Theme nach globals.css als @theme-Block (CSS-first-Config), PostCSS auf @tailwindcss/postcss umgestellt. tailwind-merge im selben Schritt auf v3 (Pflicht-Kopplung an Tailwind v4). Codemod-Bug korrigiert: variant="outline" (Prop-Wert) wurde faelschlich als CSS-Klasse zu "outline-solid" umbenannt in 4 Call-Sites - zurueckgesetzt. Neue Lint-Regel (no-restricted-syntax) gegen *-opacity-* Utilities, die in v4 nicht mehr existieren und von tailwind-merge v3 lautlos verschluckt wuerden statt einen Fehler zu werfen. tsc/lint/build gruen. Visueller Regressionstest offen (kein Browser-Tool in dieser Session) - folgt auf 132 vor 131-Deploy.
This commit is contained in:
@@ -261,8 +261,45 @@ laufenden Dienst geprüft.
|
||||
identisch. Also kein Sprung auf ^26 (das würde Typen vor die tatsächlich
|
||||
laufende Node-Runtime setzen) — stattdessen nur Patch-Update innerhalb
|
||||
^20: `@types/node` `^20` → `^20.19.43`. `npx tsc --noEmit` 0 Fehler,
|
||||
`npm run build` erfolgreich, alle Routen generiert. Noch nicht deployed
|
||||
(folgt zusammen mit den übrigen Schritten oder separat, klein/risikoarm).
|
||||
`npm run build` erfolgreich, alle Routen generiert. Deployed auf 132 und
|
||||
131 am 2026-08-06 (Commit fa8c5dd), Backend ✓ / Frontend ✓ auf beiden
|
||||
Servern, Health-Check ok.
|
||||
|
||||
### tailwindcss v4 + tailwind-merge v3 (Punkt 4) — 2026-08-06
|
||||
|
||||
- `npx @tailwindcss/upgrade@latest --force` (offizielles Migrationstool)
|
||||
ausgeführt. Umbau: `tailwind.config.ts` **entfernt**, Theme (Farben,
|
||||
Border-Radius, Keyframes/Animation) nach `src/app/globals.css` als
|
||||
`@theme`-Block überführt (v4-Standard: CSS-first-Config). `@tailwind
|
||||
base/components/utilities` → `@import 'tailwindcss'` +
|
||||
`@custom-variant dark (&:is(.dark *))`. PostCSS-Config auf
|
||||
`@tailwindcss/postcss` umgestellt, `autoprefixer` entfernt (in v4
|
||||
eingebaut). 31 Komponenten-/Seiten-Dateien automatisch migriert
|
||||
(`outline-hidden` statt `outline-none`, u.a.).
|
||||
- `tailwind-merge` 2.6.0 → **3.x** im selben Schritt (Pflicht-Kopplung,
|
||||
siehe Problem-Abschnitt).
|
||||
- **Codemod-Bug gefunden + gefixt:** das Migrationstool hat `variant="outline"`
|
||||
(Prop-*Wert*, kein CSS-Klassenname) blind textuell zu `outline-solid`
|
||||
umbenannt — Verwechslung mit der v4-Umbenennung der `outline`-Utility-Klasse.
|
||||
Betraf 4 Call-Sites (`pagination.tsx:52`, `ServicesTab.tsx:100`,
|
||||
`DSGVOTab.tsx:46/56/71/480`, `DashboardTab.tsx:448`), dort als
|
||||
`tsc`-Fehler sichtbar geworden (`"outline-solid"` nicht Teil des
|
||||
`variant`-Union-Typs von `badgeVariants`/`buttonVariants`). Manuell auf
|
||||
`"outline"` zurückgesetzt — `badge.tsx`/`button.tsx` selbst (die
|
||||
tatsächliche Variant-Definition) waren vom Bug nicht betroffen.
|
||||
- **`*-opacity-*`-Lint-Regel ergänzt** (`eslint.config.mjs`): `no-restricted-syntax`
|
||||
gegen `bg-/text-/border-/ring-/divide-/placeholder-opacity-\d+`-Literale,
|
||||
da diese Utilities in v4 nicht mehr existieren und von `tailwind-merge`
|
||||
v3 lautlos verschluckt werden statt einen Build-Fehler zu werfen (siehe
|
||||
Problem-Abschnitt). Gegen echten Bestand getestet: 0 Treffer (Codebase
|
||||
nutzt bereits nur reines `opacity-*`, keine `*-opacity-*`-Utilities).
|
||||
Funktionstest mit synthetischer Testdatei bestätigt: Regel schlägt
|
||||
korrekt an.
|
||||
- Verifikation: `npx tsc --noEmit` 0 Fehler, `npm run lint` 0
|
||||
Findings, `npm run build` erfolgreich (alle 14 Routen).
|
||||
- **Visueller Regressionstest: nicht in dieser Session durchgeführt**
|
||||
(kein Browser-Tool verfügbar) — offen, folgt vor 131-Deploy anhand
|
||||
echter Screenshots auf 132.
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
|
||||
Reference in New Issue
Block a user