build: switch to Vite 8

[AlCalzone]

There are currently two vite plugins that are not fully compatible yet:

• Bug: with Vite 8 there is a build warning - esbuild option was specified by "vite-plugin-node-polyfills" plugin. This option is deprecated, please use oxc instead davidmyersdev/vite-plugin-node-polyfills#142
• Deprecation warning: inlineDynamicImports should be replaced with codeSplitting: false vite-pwa/vite-plugin-pwa#912

At first glance, I do not see any issues at runtime though.

[coveralls]

Pull Request Test Coverage Report for Build 23184849248

Details

• 0 of 1 (0.0%) changed or added relevant line in 1 file are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 18.3%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/plugins/vuetify.js	0	1	0.0%

Totals
Change from base Build 22992250849:	0.0%
Covered Lines:	4054
Relevant Lines:	23538

---

💛 - Coveralls

[robertsLando]

The only super weird thing I noticed is that the built version shows weird icons, seems like them are bigger and bolder ??

Kooha-2026-03-17-08-26-08.webm

[robertsLando]

The icon font rendering issue (icons appearing bigger/bolder in production builds) was caused by Vite 8's Rolldown bundler reordering CSS chunks, reversing the cascade between dev and production modes.

Reported upstream: vitejs/vite#21903

Workaround applied in b0607f8: wrap the material-design-icons-iconfont CSS import in a CSS @layer so Vuetify's component styles always take precedence regardless of source order.

[github-actions]

This pull-request is stale because it has been open 90 days with no activity. Remove the stale label or comment or this will be closed in 5 days. To ignore this pull-request entirely you can add the no-stale label

[robertsLando]

Follow-up on the Vite patch releases:

I bumped Vite to 8.0.16 in 7110b2f9 and retested the material icons production CSS ordering.

Result: latest Vite 8 does not remove the need for the @layer workaround in src/assets/css/material-icons.css.

Checks:

• Vite 8.0.0, direct material-design-icons-iconfont import: production build links VIcon-*.css before index-*.css. VIcon-*.css contains .v-icon / .v-icon--size-default; index-*.css contains .material-icons, so .material-icons still wins later in the cascade.
• Vite 8.0.16, direct import: same ordering remained. .material-icons still lands in index-*.css after VIcon-*.css.
• The conflicting declarations are still the original issue: Vuetify has display: inline-flex and icon size rules, while .material-icons later sets display: inline-block and font-size: 24px.
• Vite 8.0.16 with the current @layer(icon-fonts) wrapper builds successfully, and .material-icons remains layered, so unlayered Vuetify styles win regardless of stylesheet link order.

Builds run:

• npm run build:server
• npm run build:ui with Vite 8.0.0 and no layer
• npm run build:ui with Vite 8.0.16 and no layer
• npm run build:ui with Vite 8.0.16 plus the current layer workaround

Conclusion: keep the CSS layer patch.