feat(revamp): phase 4 — deps, Tailwind v4 CSS migration, theme switcher#119
Merged
Conversation
Packages upgraded: - react-router + @react-router/* 7.13.0 → 7.15.1 - react + react-dom 19.2.4 → 19.2.6 - @types/react + @types/react-dom (latest) - @vitejs/plugin-react 4.7.0 → 6.0.2 - @headlessui/react 2.2.9 → 2.2.10 - eslint 9 → 10, typescript 5 → 6, vitest 3 → 4 - @tailwindcss/typography (latest), removed @tailwindcss/aspect-ratio Fixes: - Replace non-existent H5/H6 with H4 in blog-title and writing slug route - Convert aspect-h/w plugin classes to native Tailwind v4 aspect-[3/4] / aspect-[3/2] Typography migration (v4 approach): - Register plugin via @plugin directive in tailwind.css - Migrate prose-light / prose-dark color modifiers from JS config to @Utility with --tw-prose-* CSS variables (v4-native approach) - Keep structural DEFAULT overrides (grid, spacing, font sizes) in tailwind.config.ts via @config directive
…nfig.ts Move all typography plugin customization out of tailwind.config.ts and into prose.css as plain CSS selectors (Kent C. Dodds approach): - Structural overrides (grid layout, spacing, font sizes) now live as .prose * rules at the top of prose.css — hard-coded values, no theme() - Light mode colors use .prose.prose-light compound selectors - Dark mode colors use .dark .dark\:prose-dark escaped selectors — plain CSS targeting the literal class name, no Tailwind utility needed - Remove @Utility prose-light / prose-dark and @config directive from tailwind.css; only @plugin "@tailwindcss/typography" remains - Delete tailwind.config.ts entirely — prose.css is now the single source of truth for all prose styling
- Upgrade react-router v7, react/react-dom v19, typescript, eslint, vitest, vite, and related type packages - Delete tailwind.config.ts; migrate prose customization to plain CSS in prose.css following a CSS-first approach - Remove @tailwindcss/aspect-ratio; migrate to native Tailwind v4 aspect-[w/h] syntax - Add client hints system (client-hints.tsx, request-info.ts, theme.tsx) for OS-preference-aware theme detection - Remove theme-provider.tsx in favour of the new client hints approach - Add ThemeSwitcher with icon animation driven by .dark class - Fix theme toggle: remove "system" cycle so dark/light toggle in one click - Fix H5/H6 typography imports replaced with H4 across blog components
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
tailwind.config.ts; rewriteprose.csswith plain CSS selectors (.prose.prose-light/.dark .dark\:prose-dark) following a CSS-first approach; remove@tailwindcss/aspect-ratioplugin and migrate to nativeaspect-[w/h]syntaxtheme-provider.tsxwith a new client hints system (client-hints.tsx,request-info.ts,theme.tsx) for OS-preference-aware theme detection on first visit; addThemeSwitchercomponent with icon animation driven by the.darkclass instead of hover; simplify toggle cycle to direct dark↔light with no "system" intermediate stepTest plan
npm run dev)npm run typecheck)npm run test)