Update to Vite 5.1 (#10120)

.changeset/empty-carrots-film.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Updates and supports Vite 5.1

packages/astro/package.json

@@ -175,7 +175,7 @@
     "tsconfck": "^3.0.0",
     "unist-util-visit": "^5.0.0",
     "vfile": "^6.0.1",
-    "vite": "^5.0.12",
+    "vite": "^5.1.2",
     "vitefu": "^0.2.5",
     "which-pm": "^2.1.1",
     "yargs-parser": "^21.1.1",

packages/astro/src/core/build/plugins/plugin-css.ts

@@ -1,5 +1,5 @@
 import type { GetModuleInfo } from 'rollup';
-import { type ResolvedConfig, type Plugin as VitePlugin } from 'vite';
+import type { BuildOptions, ResolvedConfig, Plugin as VitePlugin } from 'vite';
 import { isBuildableCSSRequest } from '../../../vite-plugin-astro-server/util.js';
 import type { BuildInternals } from '../internal.js';
 import type { AstroBuildPlugin, BuildTarget } from '../plugin.js';
@@ -15,7 +15,7 @@ import {
 	getPageDatasByHoistedScriptId,
 	isHoistedScript,
 } from '../internal.js';
-import { extendManualChunks } from './util.js';
+import { extendManualChunks, shouldInlineAsset } from './util.js';
 
 interface PluginOptions {
 	internals: BuildInternals;
@@ -202,13 +202,15 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
 		},
 	};
 
+	let assetsInlineLimit: NonNullable<BuildOptions['assetsInlineLimit']>;
 	const inlineStylesheetsPlugin: VitePlugin = {
 		name: 'astro:rollup-plugin-inline-stylesheets',
 		enforce: 'post',
+		configResolved(config) {
+			assetsInlineLimit = config.build.assetsInlineLimit;
+		},
 		async generateBundle(_outputOptions, bundle) {
 			const inlineConfig = settings.config.build.inlineStylesheets;
-			const { assetsInlineLimit = 4096 } = settings.config.vite?.build ?? {};
-
 			Object.entries(bundle).forEach(([id, stylesheet]) => {
 				if (
 					stylesheet.type !== 'asset' ||
@@ -217,14 +219,12 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
 				)
 					return;
 
-				const assetSize = new TextEncoder().encode(stylesheet.source).byteLength;
-
 				const toBeInlined =
 					inlineConfig === 'always'
 						? true
 						: inlineConfig === 'never'
 							? false
-							: assetSize <= assetsInlineLimit;
+							: shouldInlineAsset(stylesheet.source, stylesheet.fileName, assetsInlineLimit);
 
 				// there should be a single js object for each stylesheet,
 				// allowing the single reference to be shared and checked for duplicates

packages/astro/src/core/build/plugins/plugin-hoisted-scripts.ts

@@ -1,10 +1,11 @@
-import type { Plugin as VitePlugin } from 'vite';
+import type { BuildOptions, Plugin as VitePlugin } from 'vite';
 import type { AstroSettings } from '../../../@types/astro.js';
 import { viteID } from '../../util.js';
 import type { BuildInternals } from '../internal.js';
 import { getPageDataByViteID } from '../internal.js';
 import type { AstroBuildPlugin } from '../plugin.js';
 import type { OutputChunk, StaticBuildOptions } from '../types.js';
+import { shouldInlineAsset } from './util.js';
 
 function virtualHoistedEntry(id: string) {
 	return id.startsWith('/astro/hoisted.js?q=');
@@ -14,9 +15,15 @@ export function vitePluginHoistedScripts(
 	settings: AstroSettings,
 	internals: BuildInternals
 ): VitePlugin {
+	let assetsInlineLimit: NonNullable<BuildOptions['assetsInlineLimit']>;
+
 	return {
 		name: '@astro/rollup-plugin-astro-hoisted-scripts',
 
+		configResolved(config) {
+			assetsInlineLimit = config.build.assetsInlineLimit;
+		},
+
 		resolveId(id) {
 			if (virtualHoistedEntry(id)) {
 				return id;
@@ -42,14 +49,6 @@ export function vitePluginHoistedScripts(
 		},
 
 		async generateBundle(_options, bundle) {
-			let assetInlineLimit = 4096;
-			if (
-				settings.config.vite?.build &&
-				settings.config.vite.build.assetsInlineLimit !== undefined
-			) {
-				assetInlineLimit = settings.config.vite?.build.assetsInlineLimit;
-			}
-
 			const considerInlining = new Map<string, OutputChunk>();
 			const importedByOtherScripts = new Set<string>();
 
@@ -71,7 +70,7 @@ export function vitePluginHoistedScripts(
 					importedByOtherScripts.has(output.fileName) === false &&
 					output.imports.length === 0 &&
 					output.dynamicImports.length === 0 &&
-					Buffer.byteLength(output.code) <= assetInlineLimit;
+					shouldInlineAsset(output.code, output.fileName, assetsInlineLimit);
 				let removeFromBundle = false;
 				const facadeId = output.facadeModuleId!;
 				const pages = internals.hoistedScriptIdToPagesMap.get(facadeId)!;

packages/astro/src/core/build/plugins/util.ts

@@ -1,5 +1,5 @@
 import { extname } from 'node:path';
-import type { Rollup, Plugin as VitePlugin } from 'vite';
+import type { BuildOptions, Rollup, Plugin as VitePlugin } from 'vite';
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 type OutputOptionsHook = Extract<VitePlugin['outputOptions'], Function>;
@@ -69,3 +69,20 @@ export function getPathFromVirtualModulePageName(virtualModulePrefix: string, id
 	const pageName = id.slice(virtualModulePrefix.length);
 	return pageName.replace(ASTRO_PAGE_EXTENSION_POST_PATTERN, '.');
 }
+
+export function shouldInlineAsset(
+	assetContent: string,
+	assetPath: string,
+	assetsInlineLimit: NonNullable<BuildOptions['assetsInlineLimit']>
+) {
+	if (typeof assetsInlineLimit === 'number') {
+		return Buffer.byteLength(assetContent) < assetsInlineLimit;
+	}
+
+	const result = assetsInlineLimit(assetPath, Buffer.from(assetContent));
+	if (result != null) {
+		return result;
+	}
+
+	return Buffer.byteLength(assetContent) < 4096; // Fallback to 4096kb by default (same as Vite)
+}

packages/integrations/alpinejs/package.json

@@ -41,7 +41,7 @@
     "@playwright/test": "1.40.0",
     "astro": "workspace:*",
     "astro-scripts": "workspace:*",
-    "vite": "^5.0.10"
+    "vite": "^5.1.2"
   },
   "publishConfig": {
     "provenance": true

packages/integrations/markdoc/package.json

@@ -83,7 +83,7 @@
     "astro-scripts": "workspace:*",
     "devalue": "^4.3.2",
     "linkedom": "^0.16.4",
-    "vite": "^5.0.12"
+    "vite": "^5.1.2"
   },
   "engines": {
     "node": ">=18.14.1"

packages/integrations/mdx/package.json

@@ -72,7 +72,7 @@
     "remark-shiki-twoslash": "^3.1.3",
     "remark-toc": "^9.0.0",
     "unified": "^11.0.4",
-    "vite": "^5.0.12"
+    "vite": "^5.1.2"
   },
   "engines": {
     "node": ">=18.14.1"

packages/integrations/react/package.json

@@ -57,7 +57,7 @@
     "cheerio": "1.0.0-rc.12",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "vite": "^5.0.12"
+    "vite": "^5.1.2"
   },
   "peerDependencies": {
     "@types/react": "^17.0.50 || ^18.0.21",

packages/integrations/svelte/package.json

@@ -49,7 +49,7 @@
     "astro": "workspace:*",
     "astro-scripts": "workspace:*",
     "svelte": "^4.2.5",
-    "vite": "^5.0.12"
+    "vite": "^5.1.2"
   },
   "peerDependencies": {
     "astro": "^4.0.0",

packages/integrations/tailwind/package.json

@@ -34,14 +34,14 @@
   },
   "dependencies": {
     "autoprefixer": "^10.4.15",
-    "postcss": "^8.4.28",
+    "postcss": "^8.4.35",
     "postcss-load-config": "^4.0.2"
   },
   "devDependencies": {
     "astro": "workspace:*",
     "astro-scripts": "workspace:*",
     "tailwindcss": "^3.3.5",
-    "vite": "^5.0.12"
+    "vite": "^5.1.2"
   },
   "peerDependencies": {
     "astro": "^3.0.0 || ^4.0.0",

packages/integrations/vue/package.json

@@ -51,7 +51,7 @@
     "astro-scripts": "workspace:*",
     "cheerio": "1.0.0-rc.12",
     "linkedom": "^0.16.4",
-    "vite": "^5.0.12",
+    "vite": "^5.1.2",
     "vue": "^3.3.8"
   },
   "peerDependencies": {