wip

packages/astro/src/vite-plugin-astro/index.ts

@@ -280,13 +280,14 @@ export default function astro({ settings, logger }: AstroPluginOptions): vite.Pl
 
 	const normalPlugin: vite.Plugin = {
 		name: 'astro:build:normal',
-		resolveId(id) {
-			// If Vite resolver can't resolve the Astro request, it's likely a virtual Astro file, fallback here instead
-			const parsedId = parseAstroRequest(id);
-			if (parsedId.query.astro) {
-				return id;
-			}
-		},
+		// TODO: check if this is useful. This just passes the id through AFAIK
+		// resolveId(id) {
+		// 	// If Vite resolver can't resolve the Astro request, it's likely a virtual Astro file, fallback here instead
+		// 	const parsedId = parseAstroRequest(id);
+		// 	if (parsedId.query.astro) {
+		// 		return id;
+		// 	}
+		// },
 	};
 
 	return [prePlugin, normalPlugin];

packages/astro/src/vite-plugin-config-alias/index.ts

@@ -136,26 +136,34 @@ export default function configAliasVitePlugin({
 		configResolved(config) {
 			patchCreateResolver(config, plugin);
 		},
-		async resolveId(id, importer, options) {
-			if (isVirtualId(id)) return;
-
-			// Handle aliases found from `compilerOptions.paths`. Unlike Vite aliases, tsconfig aliases
-			// are best effort only, so we have to manually replace them here, instead of using `vite.resolve.alias`
-			for (const alias of configAlias) {
-				if (alias.find.test(id)) {
-					const updatedId = id.replace(alias.find, alias.replacement);
-
-					// Vite may pass an id with "*" when resolving glob import paths
-					// Returning early allows Vite to handle the final resolution
-					// See https://github.com/withastro/astro/issues/9258#issuecomment-1838806157
-					if (updatedId.includes('*')) {
-						return updatedId;
+		resolveId: {
+			filter: {
+				// Everything but ids that start with virtual: or astro: OR contains \0
+				// TODO: check it works for null bytes
+				id: /^(?!virtual:|astro:)[^\0]*$/,
+			},
+			async handler(id, importer, options) {
+				// Handle aliases found from `compilerOptions.paths`. Unlike Vite aliases, tsconfig aliases
+				// are best effort only, so we have to manually replace them here, instead of using `vite.resolve.alias`
+				for (const alias of configAlias) {
+					if (alias.find.test(id)) {
+						const updatedId = id.replace(alias.find, alias.replacement);
+
+						// Vite may pass an id with "*" when resolving glob import paths
+						// Returning early allows Vite to handle the final resolution
+						// See https://github.com/withastro/astro/issues/9258#issuecomment-1838806157
+						if (updatedId.includes('*')) {
+							return updatedId;
+						}
+
+						const resolved = await this.resolve(updatedId, importer, {
+							skipSelf: true,
+							...options,
+						});
+						if (resolved) return resolved;
 					}
-
-					const resolved = await this.resolve(updatedId, importer, { skipSelf: true, ...options });
-					if (resolved) return resolved;
 				}
-			}
+			},
 		},
 	};
 
@@ -208,7 +216,3 @@ function patchCreateResolver(config: ResolvedConfig, postPlugin: VitePlugin) {
 		};
 	};
 }
-
-function isVirtualId(id: string) {
-	return id.includes('\0') || id.startsWith('virtual:') || id.startsWith('astro:');
-}

packages/astro/src/vite-plugin-css/index.ts

@@ -56,7 +56,7 @@ function* collectCSSWithOrder(
 		return;
 	}
 	// ?raw imports the underlying css but is handled as a string in the JS.
-	else if(id.endsWith('?raw')) {
+	else if (id.endsWith('?raw')) {
 		return;
 	}
 
@@ -83,110 +83,133 @@ export function astroDevCssPlugin({ routesList, command }: AstroVitePluginOption
 	// Cache CSS content by module ID to avoid re-reading
 	const cssContentCache = new Map<string, string>();
 
-	return [{
-		name: MODULE_DEV_CSS,
-
-		async configureServer(server) {
-			environment = server.environments[ASTRO_VITE_ENVIRONMENT_NAMES.ssr] as RunnableDevEnvironment;
-		},
-
-		resolveId(id) {
-			if (id === MODULE_DEV_CSS) {
-				return RESOLVED_MODULE_DEV_CSS;
-			}
-			if (id.startsWith(MODULE_DEV_CSS_PREFIX)) {
-				return RESOLVED_MODULE_DEV_CSS_PREFIX + id.slice(MODULE_DEV_CSS_PREFIX.length);
-			}
-		},
-
-		async load(id) {
-			if (id === RESOLVED_MODULE_DEV_CSS) {
-				return {
-					code: `export const css = new Set()`,
-				};
-			}
-			if (id.startsWith(RESOLVED_MODULE_DEV_CSS_PREFIX)) {
-				const componentPath = getComponentFromVirtualModuleCssName(
-					RESOLVED_MODULE_DEV_CSS_PREFIX,
-					id,
-				);
-
-				// Collect CSS by walking the dependency tree from the component
-				const cssWithOrder = new Map<string, ImportedDevStyle>();
-
-				// The virtual module name for this page, like virtual:astro:dev-css:index@_@astro
-				const componentPageId = getVirtualModulePageNameForComponent(componentPath);
-
-				// Ensure the page module is loaded. This will populate the graph and allow us to walk through. 
-				await environment?.runner?.import(componentPageId);
-				const resolved = await environment?.pluginContainer.resolveId(componentPageId);
-
-				if(!resolved?.id) {
-					return {
-						code: 'export const css = new Set()'
-					};
-				}
-
-				// the vite.EnvironmentModuleNode has all of the info we need
-				const mod = environment?.moduleGraph.getModuleById(resolved.id);
+	return [
+		{
+			name: MODULE_DEV_CSS,
+
+			async configureServer(server) {
+				environment = server.environments[
+					ASTRO_VITE_ENVIRONMENT_NAMES.ssr
+				] as RunnableDevEnvironment;
+			},
+
+			resolveId: {
+				filter: {
+					id: new RegExp(`^(${MODULE_DEV_CSS}|${MODULE_DEV_CSS_PREFIX}.*)$`),
+				},
+				handler(id) {
+					if (id === MODULE_DEV_CSS) {
+						return RESOLVED_MODULE_DEV_CSS;
+					}
+					return RESOLVED_MODULE_DEV_CSS_PREFIX + id.slice(MODULE_DEV_CSS_PREFIX.length);
+				},
+			},
+
+			load: {
+				filter: {
+					id: new RegExp(`^(${RESOLVED_MODULE_DEV_CSS}|${RESOLVED_MODULE_DEV_CSS_PREFIX}.*)$`),
+				},
+				async handler(id) {
+					if (id === RESOLVED_MODULE_DEV_CSS) {
+						return {
+							code: `export const css = new Set()`,
+						};
+					}
+					if (id.startsWith(RESOLVED_MODULE_DEV_CSS_PREFIX)) {
+						const componentPath = getComponentFromVirtualModuleCssName(
+							RESOLVED_MODULE_DEV_CSS_PREFIX,
+							id,
+						);
+
+						// Collect CSS by walking the dependency tree from the component
+						const cssWithOrder = new Map<string, ImportedDevStyle>();
+
+						// The virtual module name for this page, like virtual:astro:dev-css:index@_@astro
+						const componentPageId = getVirtualModulePageNameForComponent(componentPath);
+
+						// Ensure the page module is loaded. This will populate the graph and allow us to walk through.
+						await environment?.runner?.import(componentPageId);
+						const resolved = await environment?.pluginContainer.resolveId(componentPageId);
+
+						if (!resolved?.id) {
+							return {
+								code: 'export const css = new Set()',
+							};
+						}
+
+						// the vite.EnvironmentModuleNode has all of the info we need
+						const mod = environment?.moduleGraph.getModuleById(resolved.id);
+
+						if (!mod) {
+							return {
+								code: 'export const css = new Set()',
+							};
+						}
+
+						// Walk through the graph depth-first
+						for (const collected of collectCSSWithOrder(componentPageId, mod!)) {
+							// Use the CSS file ID as the key to deduplicate while keeping best ordering
+							if (!cssWithOrder.has(collected.idKey)) {
+								// Look up actual content from cache if available
+								const content = cssContentCache.get(collected.id) || collected.content;
+								cssWithOrder.set(collected.idKey, { ...collected, content });
+							}
+						}
+
+						const cssArray = Array.from(cssWithOrder.values());
+						// Remove the temporary fields added during collection
+						const cleanedCss = cssArray.map(({ content, id: cssId, url }) => ({
+							content,
+							id: cssId,
+							url,
+						}));
+						return {
+							code: `export const css = new Set(${JSON.stringify(cleanedCss)})`,
+						};
+					}
+				},
+			},
 
-				if(!mod) {
-					return {
-						code: 'export const css = new Set()'
-					};
+			async transform(code, id) {
+				if (command === 'build') {
+					return;
 				}
 
-				// Walk through the graph depth-first
-				for (const collected of collectCSSWithOrder(componentPageId, mod!)) {
-					// Use the CSS file ID as the key to deduplicate while keeping best ordering
-					if (!cssWithOrder.has(collected.idKey)) {
-						// Look up actual content from cache if available
-						const content = cssContentCache.get(collected.id) || collected.content;
-						cssWithOrder.set(collected.idKey, { ...collected, content });
+				// Cache CSS content as we see it
+				if (isBuildableCSSRequest(id)) {
+					const mod = environment?.moduleGraph.getModuleById(id);
+					if (mod) {
+						cssContentCache.set(id, code);
 					}
 				}
-
-				const cssArray = Array.from(cssWithOrder.values());
-				// Remove the temporary fields added during collection
-				const cleanedCss = cssArray.map(({ content, id: cssId, url }) => ({ content, id: cssId, url }));
-				return {
-					code: `export const css = new Set(${JSON.stringify(cleanedCss)})`,
-				};
-			}
-		},
-
-		async transform(code, id) {
-			if (command === 'build') {
-				return;
-			}
-
-			// Cache CSS content as we see it
-			if (isBuildableCSSRequest(id)) {
-				const mod = environment?.moduleGraph.getModuleById(id);
-				if (mod) {
-					cssContentCache.set(id, code);
-				}
-			}
+			},
 		},
-	}, {
-		name: MODULE_DEV_CSS_ALL,
-		resolveId(id) {
-			if(id === MODULE_DEV_CSS_ALL) {
-				return RESOLVED_MODULE_DEV_CSS_ALL
-			}
+		{
+			name: MODULE_DEV_CSS_ALL,
+			resolveId: {
+				filter: {
+					id: new RegExp(`^${MODULE_DEV_CSS_ALL}$`),
+				},
+				handler() {
+					return RESOLVED_MODULE_DEV_CSS_ALL;
+				},
+			},
+			load: {
+				filter: {
+					id: new RegExp(`^${RESOLVED_MODULE_DEV_CSS_ALL}$`),
+				},
+				handler() {
+					// Creates a map of the component name to a function to import it
+					let code = `export const devCSSMap = new Map([`;
+					for (const route of routesList.routes) {
+						code += `\n\t[${JSON.stringify(route.component)}, () => import(${JSON.stringify(getDevCSSModuleName(route.component))})],`;
+					}
+					code += ']);';
+					return {
+						code,
+					};
+				},
+			},
 		},
-		load(id) {
-			if(id === RESOLVED_MODULE_DEV_CSS_ALL) {
-				// Creates a map of the component name to a function to import it
-				let code = `export const devCSSMap = new Map([`;
-				for(const route of routesList.routes) {
-					code += `\n\t[${JSON.stringify(route.component)}, () => import(${JSON.stringify(getDevCSSModuleName(route.component))})],`
-				}
-				code += ']);'
-				return {
-					code
-				};
-			}
-		}
-	}];
+	];
 }