index.ts — astro Source File

Source Code

import { prependForwardSlash } from '@astrojs/internal-helpers/path';
import type * as vite from 'vite';
import type { DevEnvironment, Plugin } from 'vite';
import { ASTRO_VITE_ENVIRONMENT_NAMES } from '../core/constants.js';
import { wrapId } from '../core/util.js';
import type { ImportedDevStyle, RoutesList } from '../types/astro.js';
import { inlineRE, isBuildableCSSRequest, rawRE } from '../vite-plugin-astro-server/util.js';
import { getVirtualModulePageNameForComponent } from '../vite-plugin-pages/util.js';
import { getDevCSSModuleName } from './util.js';
import { CSS_LANGS_RE } from '../core/viteUtils.js';
import { PROPAGATED_ASSET_QUERY_PARAM } from '../content/consts.js';
import {
	ASTRO_CSS_EXTENSION_POST_PATTERN,
	MODULE_DEV_CSS,
	MODULE_DEV_CSS_ALL,
	MODULE_DEV_CSS_PREFIX,
	RESOLVED_MODULE_DEV_CSS,
	RESOLVED_MODULE_DEV_CSS_ALL,
	RESOLVED_MODULE_DEV_CSS_PREFIX,
} from './const.js';

interface AstroVitePluginOptions {
	routesList: RoutesList;
	command: 'dev' | 'build';
}

/**
 * Extract the original component path from a masked virtual module name.
 * Inverse function of getVirtualModulePageName().
 */
function getComponentFromVirtualModuleCssName(virtualModulePrefix: string, id: string): string {
	return id
		.slice(virtualModulePrefix.length)
		.replace(new RegExp(ASTRO_CSS_EXTENSION_POST_PATTERN, 'g'), '.');
}

/**
 * Walk down the dependency tree to collect CSS with depth/order.
 * Performs depth-first traversal to ensure correct CSS ordering based on import order.
 */
function* collectCSSWithOrder(
	id: string,
	mod: vite.EnvironmentModuleNode,
	seen = new Set<string>(),
): Generator<ImportedDevStyle & { id: string; idKey: string }, void, unknown> {
	seen.add(id);

	// Stop traversing if we reach an asset propagation stopping point to ensure we only collect CSS
	// relevant to a content collection entry, if any. Not doing so could cause CSS from other
	// entries to potentially be collected and bleed into the CSS included on the page, causing
	// unexpected styles, for example when a module shared between 2 pages would import
	// `astro:content` and thus potentially adding multiple content collection entry assets to the
	// module graph.
	if (id.includes(PROPAGATED_ASSET_QUERY_PARAM)) {
		return;
	}

	// Keep all of the imported modules into an array so we can go through them one at a time
	const imported = Array.from(mod.importedModules);

// ... (187 more lines)