style.ts — astro Source File

Source Code

import fs from 'node:fs';
import type { TransformOptions } from '@astrojs/compiler';
import { preprocessCSS, type ResolvedConfig } from 'vite';
import type { AstroConfig } from '../../types/public/config.js';
import { AstroErrorData, CSSError, positionAt } from '../errors/index.js';
import { normalizePath } from '../viteUtils.js';
import type { CompileCssResult } from './types.js';

export type PartialCompileCssResult = Pick<CompileCssResult, 'isGlobal' | 'dependencies'>;

/**
 * Rewrites absolute URLs in CSS to include the base path.
 *
 * Vite's `preprocessCSS` function explicitly does NOT resolve URLs in `url()` or `image-set()`
 * (https://vite.dev/guide/api-javascript.html#preprocesscss). During build, Vite's CSS plugin handles URL rewriting through its
 * full transform pipeline, but during dev, Astro calls `preprocessCSS` directly through the
 * compiler, bypassing that pipeline.
 *
 * Only absolute URLs starting with `/` (e.g., `/fonts/font.woff`, `/images/bg.png`) are rewritten
 *
 * Uses Vite's cssUrlRE regex pattern for reliable URL matching.
 * See: https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/css.ts
 *
 * @param css - The CSS string to process
 * @param base - The base path to prepend (e.g., `/my-base`)
 * @returns The CSS with rewritten URLs
 */
function rewriteCssUrls(css: string, base: string): string {
	// Only rewrite if base is not the default '/'
	if (!base || base === '/') {
		return css;
	}

	// Normalize base path (remove trailing slash for consistent joining)
	const normalizedBase = base.endsWith('/') ? base.slice(0, -1) : base;

	// Safety check: base should start with '/' (already normalized by Astro config)
	if (!normalizedBase.startsWith('/')) {
		return css;
	}

	// Vite's production-tested regex for matching url() in CSS
	// Matches url(...) while handling quotes, unquoted URLs, and edge cases
	// Excludes @import statements via negative lookbehind
	// Matches Vite's cssUrlRE pattern exactly - capturing groups preserved for compatibility
	const cssUrlRE =
		// eslint-disable-next-line regexp/no-unused-capturing-group
		/(?<!@import\s+)(?<=^|[^\w\-\u0080-\uffff])url\((\s*('[^']+'|"[^"]+")\s*|(?:\\.|[^'")\\])+)\)/g;

	return css.replace(cssUrlRE, (match, rawUrl: string) => {
		// Extract URL value, removing quotes if present
		let url = rawUrl.trim();
		let quote = '';

		// Check if URL is quoted (single or double)
		if ((url.startsWith("'") && url.endsWith("'")) || (url.startsWith('"') && url.endsWith('"'))) {
			quote = url[0];
			url = url.slice(1, -1);
		}

// ... (127 more lines)