feat(fonts)!: local provider unification

packages/astro/components/Font.astro

@@ -4,8 +4,8 @@ import { filterPreloads } from 'astro/assets/fonts/runtime';
 import { AstroError, AstroErrorData } from '../dist/core/errors/index.js';
 
 // TODO: remove check when fonts are stabilized
-const { internalConsumableMap } = mod;
-if (!internalConsumableMap) {
+const { componentDataByCssVariable } = mod;
+if (!componentDataByCssVariable) {
 	throw new AstroError(AstroErrorData.ExperimentalFontsNotEnabled);
 }
 
@@ -17,15 +17,15 @@ interface Props {
 }
 
 const { cssVariable, preload = false } = Astro.props as Props;
-const data = internalConsumableMap.get(cssVariable);
+const data = componentDataByCssVariable.get(cssVariable);
 if (!data) {
 	throw new AstroError({
 		...AstroErrorData.FontFamilyNotFound,
 		message: AstroErrorData.FontFamilyNotFound.message(cssVariable),
 	});
 }
 
-const filteredPreloadData = filterPreloads(data.preloadData, preload);
+const filteredPreloadData = filterPreloads(data.preloads, preload);
 ---
 
 <style set:html={data.css}></style>

packages/astro/dev-only.d.ts

@@ -7,8 +7,8 @@ declare module 'virtual:astro:env/internal' {
 }
 
 declare module 'virtual:astro:assets/fonts/internal' {
-	export const internalConsumableMap: import('./src/assets/fonts/types.js').InternalConsumableMap;
-	export const consumableMap: import('./src/assets/fonts/types.js').ConsumableMap;
+	export const componentDataByCssVariable: import('./src/assets/fonts/types.js').ComponentDataByCssVariable;
+	export const fontDataByCssVariable: import('./src/assets/fonts/types.js').FontDataByCssVariable;
 }
 
 declare module 'virtual:astro:adapter-config/client' {

packages/astro/src/assets/fonts/README.md

@@ -3,7 +3,7 @@
 Here is an overview of the architecture of the fonts in Astro:
 
 - [`orchestrate()`](./orchestrate.ts) combines sub steps and takes care of getting useful data from the config
-  - It resolves font families (eg. import remote font providers)
+  - It resolves font families (eg. deduplication)
   - It initializes the font resolver
   - For each family, it resolves fonts data and normalizes them
   - For each family, optimized fallbacks (and related CSS) are generated if applicable

packages/astro/src/assets/fonts/config.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { FONT_TYPES, LOCAL_PROVIDER_NAME } from './constants.js';
+import { FONT_TYPES } from './constants.js';
 import type { FontProvider } from './types.js';
 
 export const weightSchema = z.union([z.string(), z.number()]);
@@ -26,34 +26,6 @@ const requiredFamilyAttributesSchema = z.object({
 	cssVariable: z.string(),
 });
 
-const entrypointSchema = z.union([z.string(), z.instanceof(URL)]);
-
-export const localFontFamilySchema = z
-	.object({
-		...requiredFamilyAttributesSchema.shape,
-		...fallbacksSchema.shape,
-		provider: z.literal(LOCAL_PROVIDER_NAME),
-		variants: z
-			.array(
-				z
-					.object({
-						...familyPropertiesSchema.shape,
-						src: z
-							.array(
-								z.union([
-									entrypointSchema,
-									z.object({ url: entrypointSchema, tech: z.string().optional() }).strict(),
-								]),
-							)
-							.nonempty(),
-						// TODO: find a way to support subsets (through fontkit?)
-					})
-					.strict(),
-			)
-			.nonempty(),
-	})
-	.strict();
-
 export const fontProviderSchema = z
 	.object({
 		name: z.string(),
@@ -64,7 +36,7 @@ export const fontProviderSchema = z
 	})
 	.strict();
 
-export const remoteFontFamilySchema = z
+export const fontFamilySchema = z
 	.object({
 		...requiredFamilyAttributesSchema.shape,
 		...fallbacksSchema.shape,

packages/astro/src/assets/fonts/constants.ts

@@ -1,7 +1,5 @@
 import type { Defaults, FontType } from './types.js';
 
-export const LOCAL_PROVIDER_NAME = 'local';
-
 export const DEFAULTS: Defaults = {
 	weights: ['400'],
 	styles: ['normal', 'italic'],

packages/astro/src/assets/fonts/core/collect-component-data.ts

@@ -0,0 +1,72 @@
+import type { CssRenderer } from '../definitions.js';
+import type {
+	Collaborator,
+	ComponentDataByCssVariable,
+	Defaults,
+	FontFamilyAssets,
+} from '../types.js';
+import { unifontFontFaceDataToProperties } from '../utils.js';
+import type { optimizeFallbacks as _optimizeFallbacks } from './optimize-fallbacks.js';
+
+export async function collectComponentData({
+	fontFamilyAssets,
+	cssRenderer,
+	defaults,
+	optimizeFallbacks,
+}: {
+	fontFamilyAssets: Array<FontFamilyAssets>;
+	cssRenderer: CssRenderer;
+	defaults: Pick<Defaults, 'fallbacks' | 'optimizedFallbacks'>;
+	optimizeFallbacks: Collaborator<
+		typeof _optimizeFallbacks,
+		'family' | 'fallbacks' | 'collectedFonts'
+	>;
+}) {
+	const componentDataByCssVariable: ComponentDataByCssVariable = new Map();
+
+	for (const { family, fonts, collectedFontsForMetricsByUniqueKey, preloads } of fontFamilyAssets) {
+		let css = '';
+
+		for (const data of fonts) {
+			css += cssRenderer.generateFontFace(
+				family.uniqueName,
+				unifontFontFaceDataToProperties({
+					src: data.src,
+					weight: data.weight,
+					style: data.style,
+					// User settings override the generated font settings
+					display: data.display ?? family.display,
+					unicodeRange: data.unicodeRange ?? family.unicodeRange,
+					stretch: data.stretch ?? family.stretch,
+					featureSettings: data.featureSettings ?? family.featureSettings,
+					variationSettings: data.variationSettings ?? family.variationSettings,
+				}),
+			);
+		}
+
+		const fallbacks = family.fallbacks ?? defaults.fallbacks;
+		const cssVarValues = [family.uniqueName];
+		const optimizeFallbacksResult =
+			(family.optimizedFallbacks ?? defaults.optimizedFallbacks)
+				? await optimizeFallbacks({
+						family,
+						fallbacks,
+						collectedFonts: Array.from(collectedFontsForMetricsByUniqueKey.values()),
+					})
+				: null;
+
+		if (optimizeFallbacksResult) {
+			css += optimizeFallbacksResult.css;
+			cssVarValues.push(...optimizeFallbacksResult.fallbacks);
+		} else {
+			// If there are no optimized fallbacks, we pass the provided fallbacks as is.
+			cssVarValues.push(...fallbacks);
+		}
+
+		css += cssRenderer.generateCssVariable(family.cssVariable, cssVarValues);
+
+		componentDataByCssVariable.set(family.cssVariable, { preloads, css });
+	}
+
+	return componentDataByCssVariable;
+}

packages/astro/src/assets/fonts/core/collect-font-assets-from-faces.ts

@@ -0,0 +1,96 @@
+import type * as unifont from 'unifont';
+import { FONT_FORMATS } from '../constants.js';
+import type { FontFileIdGenerator, Hasher } from '../definitions.js';
+import type { Defaults, FontFileById, PreloadData, ResolvedFontFamily } from '../types.js';
+import { renderFontWeight } from '../utils.js';
+import type { CollectedFontForMetrics } from './optimize-fallbacks.js';
+
+export function collectFontAssetsFromFaces({
+	fonts,
+	fontFileIdGenerator,
+	family,
+	fontFilesIds,
+	collectedFontsIds,
+	hasher,
+	defaults,
+}: {
+	fonts: Array<unifont.FontFaceData>;
+	fontFileIdGenerator: FontFileIdGenerator;
+	family: Pick<ResolvedFontFamily, 'cssVariable' | 'fallbacks'>;
+	fontFilesIds: Set<string>;
+	collectedFontsIds: Set<string>;
+	hasher: Hasher;
+	defaults: Pick<Defaults, 'fallbacks'>;
+}) {
+	const fontFileById: FontFileById = new Map();
+	const collectedFontsForMetricsByUniqueKey = new Map<string, CollectedFontForMetrics>();
+	const preloads: Array<PreloadData> = [];
+
+	for (const font of fonts) {
+		// The index keeps track of encountered URLs. We can't use a regular for loop
+		// below because it may contain sources without urls, which would prevent preloading completely
+		let index = 0;
+		for (const source of font.src) {
+			if ('name' in source) {
+				continue;
+			}
+			const format = FONT_FORMATS.find((e) => e.format === source.format)!;
+			const originalUrl = source.originalURL!;
+			const id = fontFileIdGenerator.generate({
+				cssVariable: family.cssVariable,
+				font,
+				originalUrl,
+				type: format.type,
+			});
+
+			if (!fontFilesIds.has(id) && !fontFileById.has(id)) {
+				fontFileById.set(id, { url: source.url, init: font.meta?.init });
+				// We only collect the first URL to avoid preloading fallback sources (eg. we only
+				// preload woff2 if woff is available)
+				if (index === 0) {
+					preloads.push({
+						style: font.style,
+						subset: font.meta?.subset,
+						type: format.type,
+						url: source.url,
+						weight: renderFontWeight(font.weight),
+					});
+				}
+			}
+
+			const collected: CollectedFontForMetrics = {
+				hash: id,
+				url: originalUrl,
+				init: font.meta?.init,
+				data: {
+					weight: font.weight,
+					style: font.style,
+					meta: {
+						subset: font.meta?.subset,
+					},
+				},
+			};
+			const collectedKey = hasher.hashObject(collected.data);
+			const fallbacks = family.fallbacks ?? defaults.fallbacks;
+			if (
+				fallbacks.length > 0 &&
+				// If the same data has already been sent for this family, we don't want to have
+				// duplicated fallbacks. Such scenario can occur with unicode ranges.
+				!collectedFontsIds.has(collectedKey) &&
+				!collectedFontsForMetricsByUniqueKey.has(collectedKey)
+			) {
+				// If a family has fallbacks, we store the first url we get that may
+				// be used for the fallback generation.
+				collectedFontsForMetricsByUniqueKey.set(collectedKey, collected);
+			}
+
+			index++;
+		}
+	}
+
+	return {
+		fontFileById,
+		preloads,
+		collectedFontsForMetricsByUniqueKey,
+	};
+}

packages/astro/src/assets/fonts/core/collect-font-data.ts

@@ -0,0 +1,31 @@
+import type { FontData, FontDataByCssVariable, FontFamilyAssets } from '../types.js';
+import { renderFontWeight } from '../utils.js';
+
+export function collectFontData(
+	fontFamilyAssets: Array<
+		Pick<FontFamilyAssets, 'fonts'> & { family: Pick<FontFamilyAssets['family'], 'cssVariable'> }
+	>,
+) {
+	const fontDataByCssVariable: FontDataByCssVariable = new Map();
+
+	for (const { family, fonts } of fontFamilyAssets) {
+		const fontData: Array<FontData> = [];
+		for (const data of fonts) {
+			fontData.push({
+				weight: renderFontWeight(data.weight),
+				style: data.style,
+				src: data.src
+					.filter((src) => 'url' in src)
+					.map((src) => ({
+						url: src.url,
+						format: src.format,
+						tech: src.tech,
+					})),
+			});
+		}
+
+		fontDataByCssVariable.set(family.cssVariable, fontData);
+	}
+
+	return fontDataByCssVariable;
+}