Upgrade to Next.js 16 + React 19 + Tailwind 4#12
Merged
Conversation
Bumps the framework stack to match the rest of the PolicyEngine portfolio (cost-dashboard, council-tax-ctr-map, cbo-baseline-tracker): - next 14 -> 16, react 18 -> 19, tailwind 3 -> 4 - Adds @policyengine/ui-kit ^0.9.0 with theme tokens loaded via @import "@policyengine/ui-kit/theme.css" - Replaces tailwindcss postcss plugin with @tailwindcss/postcss - Drops autoprefixer (vendored into Tailwind v4) - Deletes tailwind.config.ts in favor of @theme {} CSS blocks - Converts @layer utilities to @Utility directives (Tailwind v4 syntax) - Aliases the legacy pe-* Tailwind classes (bg-pe-teal, text-pe-500, etc.) through to ui-kit's teal scale so the 370+ existing slide markup references still resolve without rewriting every slide - Restores the text-5xl..9xl scale that ui-kit's theme.css resets - Adds eslint.config.mjs and a .github/workflows/pr.yaml CI workflow (build / test / lint) matching the cbo-baseline-tracker pattern - Bumps tsconfig target to ES2022 and adds .next/dev/types include - Converts next.config.js to TypeScript and pins the Turbopack root Slide content, MDX/TSX deck logic, basePath /slides routing, the PDF export script, and all public assets are unchanged.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Sorry @MaxGhenis, only members of the PolicyEngine/core-developers team can invoke Claude Code. |
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
Bumps the framework stack to match the rest of the PolicyEngine portfolio (cost-dashboard, council-tax-ctr-map, cbo-baseline-tracker).
This re-does the work from the closed #2 cleanly on top of current
main.What bumped
next14 -> 16,react18 -> 19,tailwindcss3 -> 4@policyengine/ui-kit^0.9.0(theme tokens loaded via@import "@policyengine/ui-kit/theme.css")tailwindcssPostCSS plugin with@tailwindcss/postcss; dropsautoprefixer(vendored into Tailwind v4)tsconfigtarget ES2017 -> ES2022,jsxpreserve->react-jsx(Next 16 auto-applies this),.next/dev/types/**/*.tsadded to includesnext.config.jstonext.config.tsand pins the Turbopack root, matching cbo-baseline-trackerTailwind v3 -> v4 migration
@tailwind base; @tailwind components; @tailwind utilities;->@import "tailwindcss"; @import "@policyengine/ui-kit/theme.css";inapp/globals.csstailwind.config.tsdeleted; design tokens moved into@theme {}CSS blocks@layer utilities { .gradient-bg { ... } }rewritten as@utility gradient-bg { ... }(Tailwind v4 syntax). The associated::beforeand::afterselectors stay as plain CSS rules@layer components { ... }blocks unwrapped to plain CSS (Tailwind v4 layers correctly without the wrapper, and@applystill works)theme.cssresets the text size scale with--text-*: initial;and only definestext-xs..text-4xl. Slide titles usetext-5xl..text-7xl, so those sizes are restored in the local@theme {}blockLegacy
pe-*class aliasingThe slides codebase has 370+ references to
pe-*Tailwind classes (bg-pe-teal,text-pe-500,border-pe-600, etc.). Rather than rewrite every slide, the@theme {}block inapp/globals.cssaliases--color-pe-{50..900}to ui-kit's teal scale and--color-pe-teal/--color-pe-dark/--color-pe-lightto their semantic counterparts. CSS-variable consumers (var(--pe-teal), etc. in:root) are also aliased to ui-kit tokens.CI / tooling
.github/workflows/pr.yamlwithbuild+test+lintjobs (oven-sh/setup-bun@v2,bun install --frozen-lockfile)eslint.config.mjsmatching cbo-baseline-tracker's flat-config shapelintandtypecheckscripts topackage.jsonanyin some legacy slide props) are downgraded to warnings so the upgrade itself can land cleanly. Cleanup is a follow-up task.What's preserved
slideshows/registry, the PDF export script, the password-gate flow, the/slidesbasePath routing, all public assets, and the existing tests (lib/base-path-image.test.ts,lib/slide-url.test.ts).Test plan
bun installsucceeds with the new depsbun run buildpasses (Next 16 + Turbopack)bun run typecheckcleanbun run testpasses (12/12)bun run lintclean (0 errors, 14 warnings flagging pre-existing slide content patterns)Closes the gap left by #2 (closed stale).