fix(deps): upgrade tailwindcss to v4 and eslint to v10 - #206
Merged
jplanckeel merged 1 commit intoOct 1, 2026
Merged
Conversation
Replaces BananaOps#204, which bumps both majors in package.json only: the lockfile is left out of sync (npm ci fails) and Tailwind 4 needs a migration. Tailwind 4, migrated with @tailwindcss/upgrade then checked page by page against main (light and dark screenshots of the static build): - config moved from tailwind.config.js to @theme in index.css, PostCSS now uses @tailwindcss/postcss (autoprefixer is built in); - templates renamed to the v4 utilities (shadow-sm to shadow-xs, rounded to rounded-sm, outline-none to outline-hidden...); - dark mode overrides of the legacy gray classes kept as plain CSS, with the variant selectors (dark:, hover:, dark:hover:) Tailwind 3 used to generate for them listed explicitly; - FontAwesome CSS imported into the base layer instead of injected at runtime, otherwise its unlayered height beats every sizing utility; - v3 line heights and placeholder color restored for identical rendering; - two rewrites of the upgrade tool reverted: a color token argument turned into outline-solid, and text-[#E8580A] swapped for a utility that changes color in dark mode. The remaining visual difference is the v4 default palette (OKLCH). ESLint 10 requires eslint-plugin-react-hooks 7, whose recommended preset now includes the React Compiler rules; the two classic rules are kept so the lint scope does not change. One no-useless-assignment hit fixed.
This was referenced Sep 28, 2026
TartanLeGrand
added a commit
to TartanLeGrand/tracker
that referenced
this pull request
Oct 2, 2026
main moved to Tailwind 4 (BananaOps#206): rounded becomes rounded-sm and outline-none becomes outline-hidden in the user menu and the API key dialog.
This was referenced Oct 2, 2026
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
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.
Why
#204 (Snyk) bumps
tailwindcss3 to 4 andeslint9 to 10 inpackage.jsononly:package-lock.jsonis not updated, sonpm cifails on it (lockfile out of sync);tailwind.config.js+ thetailwindcssPostCSS plugin, so the build breaks without a migration;eslint-plugin-react-hooks5 (peer range stops at 9).The advisory it targets (
braces, uncontrolled recursion) only reaches us through Tailwind 3 (chokidar,micromatch) at build time, andbraceshas no patched release: dropping Tailwind 3 is the fix.urijsis not in the dependency tree.This PR does the full upgrade and supersedes #204.
What
Tailwind 4, migrated with
@tailwindcss/upgrade, then compared page by page withmain:@themeinsrc/index.css; PostCSS uses@tailwindcss/postcss(autoprefixer is built in);shadow-smtoshadow-xs,roundedtorounded-sm,outline-nonetooutline-hidden, ...);dark:text-gray-300,dark:hover:bg-gray-800, ...) because they sat in@layer utilities; v4 does not, so the exact selector list v3 generated is written out;baselayer (config.autoAddCss = false): injected unlayered at runtime, it beats every v4 utility and icons sized withw-8 h-8collapsed to1em;a('outline', ...)turned intooutline-solid(caught bytsc), and the active nav icontext-[#E8580A]swapped foricon-gradient-yellow, which turns yellow in dark mode.ESLint 10 with
@eslint/js10 andeslint-plugin-react-hooks7. Itsrecommendedpreset now bundles the React Compiler rules (33 new errors); the two classic rules are configured explicitly so the lint scope is unchanged. One newno-useless-assignmenthit fixed inThemeContext.tsx.Checks
npm ciandnpm audit: 0 vulnerabilities.npm run buildandnpm run build:static: green.tsc --noEmit: 122 errors, same asmain.eslint .: 78 errors / 165 warnings, same asmain.main: 11 pages (dashboard, timeline, calendar, catalog, drifts, RPA, locks, links, insights, docs, theme test) in light and dark mode, pixel diff. Remaining differences are the v4 default palette (OKLCH, slightly more saturated: banners, a few links and chart bars).Notes
web/package.jsonand a few templates; whichever merges second needs a rebase.Supersedes #204