astroDevCssPlugin() — astro Function Reference

Source Code

packages/astro/src/vite-plugin-css/index.ts lines 94–246

export function astroDevCssPlugin({ routesList, command }: AstroVitePluginOptions): Plugin[] {
	let ssrEnvironment: undefined | DevEnvironment = undefined;
	// Cache CSS content by module ID to avoid re-reading
	const cssContentCache = new Map<string, string>();

	return [
		{
			name: MODULE_DEV_CSS,

			async configureServer(server) {
				ssrEnvironment = server.environments[ASTRO_VITE_ENVIRONMENT_NAMES.ssr];
			},
			applyToEnvironment(env) {
				return (
					env.name === ASTRO_VITE_ENVIRONMENT_NAMES.ssr ||
					env.name === ASTRO_VITE_ENVIRONMENT_NAMES.client
				);
			},

			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 ssrEnvironment?.fetchModule(componentPageId);
						const resolved = await ssrEnvironment?.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 = ssrEnvironment?.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 });
							}
						}