collectCSSWithOrder() — astro Function Reference

Architecture documentation for the collectCSSWithOrder() function in index.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine called by 1

Entity Profile

CoreAstro→ RenderingEngine→ collectCSSWithOrder() — astro Function Reference

Dependency Diagram

graph TD
  d5fbea20_994d_07a1_64a6_3e18fbcb71d8["collectCSSWithOrder()"]
  940bf6b8_08dc_39d6_8acd_921dccfcc472["index.ts"]
  d5fbea20_994d_07a1_64a6_3e18fbcb71d8 -->|defined in| 940bf6b8_08dc_39d6_8acd_921dccfcc472
  fa31e14c_740d_1e67_d586_57c6d5b48d97["astroDevCssPlugin()"]
  fa31e14c_740d_1e67_d586_57c6d5b48d97 -->|calls| d5fbea20_994d_07a1_64a6_3e18fbcb71d8
  style d5fbea20_994d_07a1_64a6_3e18fbcb71d8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/vite-plugin-css/index.ts lines 41–82

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);

	// Check if this module is CSS and should be collected
	if (isBuildableCSSRequest(id)) {
		yield {
			id: wrapId(mod.id ?? mod.url),
			idKey: id,
			content: '',
			url: prependForwardSlash(wrapId(mod.url)),
		};
		return;
	}
	// ?raw imports the underlying css but is handled as a string in the JS.
	else if (id.endsWith('?raw')) {
		return;
	}

	// Recursively walk imported modules (depth-first)
	for (const imp of imported) {
		if (imp.id && !seen.has(imp?.id)) {
			yield* collectCSSWithOrder(imp.id, imp, seen);
		}
	}
}