createStylePreprocessor() — astro Function Reference

Architecture documentation for the createStylePreprocessor() function in style.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine calls 2

Entity Profile

CoreAstro→ RenderingEngine→ createStylePreprocessor() — astro Function Reference

Dependency Diagram

graph TD
  0160d787_c349_53b5_38f7_e3c1aa80c392["createStylePreprocessor()"]
  b49b1fb8_9e6f_4c97_cf66_98d4fd2b7754["style.ts"]
  0160d787_c349_53b5_38f7_e3c1aa80c392 -->|defined in| b49b1fb8_9e6f_4c97_cf66_98d4fd2b7754
  94f7ea92_ecd9_fcad_1576_0bd69df25391["rewriteCssUrls()"]
  0160d787_c349_53b5_38f7_e3c1aa80c392 -->|calls| 94f7ea92_ecd9_fcad_1576_0bd69df25391
  9a23543d_a158_1ce7_2b6e_5866fa1c8f6e["enhanceCSSError()"]
  0160d787_c349_53b5_38f7_e3c1aa80c392 -->|calls| 9a23543d_a158_1ce7_2b6e_5866fa1c8f6e
  style 0160d787_c349_53b5_38f7_e3c1aa80c392 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/core/compile/style.ts lines 81–130

export function createStylePreprocessor({
	filename,
	viteConfig,
	astroConfig,
	cssPartialCompileResults,
	cssTransformErrors,
}: {
	filename: string;
	viteConfig: ResolvedConfig;
	astroConfig: AstroConfig;
	cssPartialCompileResults: Partial<CompileCssResult>[];
	cssTransformErrors: Error[];
}): TransformOptions['preprocessStyle'] {
	let processedStylesCount = 0;

	return async (content, attrs) => {
		const index = processedStylesCount++;
		const lang = `.${attrs?.lang || 'css'}`.toLowerCase();
		const id = `${filename}?astro&type=style&index=${index}&lang${lang}`;
		try {
			const result = await preprocessCSS(content, id, viteConfig);

			// Rewrite CSS URLs to include the base path
			// This is necessary because preprocessCSS doesn't handle URL rewriting
			const rewrittenCode = rewriteCssUrls(result.code, astroConfig.base);

			cssPartialCompileResults[index] = {
				isGlobal: !!attrs['is:global'],
				dependencies: result.deps ? [...result.deps].map((dep) => normalizePath(dep)) : [],
			};

			let map: string | undefined;
			if (result.map) {
				if (typeof result.map === 'string') {
					map = result.map;
				} else if (result.map.mappings) {
					map = result.map.toString();
				}
			}

			return { code: rewrittenCode, map };
		} catch (err: any) {
			try {
				err = enhanceCSSError(err, filename, content);
			} catch {}
			cssTransformErrors.push(err);
			return { error: err + '' };
		}
	};
}