fix(fonts): lighter fallbacks

.changeset/red-parents-tease.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Updates fallback font generation to always read font files returned by font providers

packages/astro/package.json

@@ -123,7 +123,6 @@
     "@astrojs/internal-helpers": "workspace:*",
     "@astrojs/markdown-remark": "workspace:*",
     "@astrojs/telemetry": "workspace:*",
-    "@capsizecss/metrics": "^3.5.0",
     "@capsizecss/unpack": "^2.4.0",
     "@oslojs/encoding": "^1.1.0",
     "@rollup/pluginutils": "^5.1.4",

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

@@ -48,7 +48,7 @@ export async function loadFonts({
 	for (const family of families) {
 		const preloadData: PreloadData = [];
 		let css = '';
-		let fallbackFontData: GetMetricsForFamilyFont = null;
+		let fallbackFontData: GetMetricsForFamilyFont | null = null;
 
 		// When going through the urls/filepaths returned by providers,
 		// We save the hash and the associated original value so we can use

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

@@ -1,11 +1,5 @@
-// Adapted from https://github.com/unjs/fontaine/
-import { fontFamilyToCamelCase } from '@capsizecss/metrics';
 import { type Font, fromBuffer } from '@capsizecss/unpack';
 
-const QUOTES_RE = /^["']|["']$/g;
-
-const withoutQuotes = (str: string) => str.trim().replace(QUOTES_RE, '');
-
 export type FontFaceMetrics = Pick<
 	Font,
 	'ascent' | 'descent' | 'lineGap' | 'unitsPerEm' | 'xWidthAvg'
@@ -29,30 +23,6 @@ function filterRequiredMetrics({
 	};
 }
 
-export async function getMetricsForFamily(family: string) {
-	family = withoutQuotes(family);
-
-	if (family in metricCache) return metricCache[family];
-
-	try {
-		const name = fontFamilyToCamelCase(family);
-		const { entireMetricsCollection } = await import('@capsizecss/metrics/entireMetricsCollection');
-		const metrics = entireMetricsCollection[name as keyof typeof entireMetricsCollection];
-
-		if (!('descent' in metrics)) {
-			metricCache[family] = null;
-			return null;
-		}
-
-		const filteredMetrics = filterRequiredMetrics(metrics);
-		metricCache[family] = filteredMetrics;
-		return filteredMetrics;
-	} catch {
-		metricCache[family] = null;
-		return null;
-	}
-}
-
 export async function readMetrics(family: string, buffer: Buffer) {
 	const metrics = await fromBuffer(buffer);
 

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

@@ -78,14 +78,14 @@ export async function cache(
 	storage: Storage,
 	key: string,
 	cb: () => Promise<Buffer>,
-): Promise<{ cached: boolean; data: Buffer }> {
+): Promise<Buffer> {
 	const existing = await storage.getItemRaw(key);
 	if (existing) {
-		return { cached: true, data: existing };
+		return existing;
 	}
 	const data = await cb();
 	await storage.setItemRaw(key, data);
-	return { cached: false, data };
+	return data;
 }
 
 export interface ProxyURLOptions {
@@ -133,13 +133,13 @@ export function isGenericFontFamily(str: string): str is keyof typeof DEFAULT_FA
 export type GetMetricsForFamilyFont = {
 	hash: string;
 	url: string;
-} | null;
+};
 
 export type GetMetricsForFamily = (
 	name: string,
 	/** A remote url or local filepath to a font file. Used if metrics can't be resolved purely from the family name */
 	font: GetMetricsForFamilyFont,
-) => Promise<FontFaceMetrics | null>;
+) => Promise<FontFaceMetrics>;
 
 /**
  * Generates CSS for a given family fallbacks if possible.
@@ -157,7 +157,7 @@ export async function generateFallbacksCSS({
 	family: Pick<ResolvedFontFamily, 'name' | 'nameWithHash'>;
 	/** The family fallbacks */
 	fallbacks: Array<string>;
-	font: GetMetricsForFamilyFont;
+	font: GetMetricsForFamilyFont | null;
 	metrics: {
 		getMetricsForFamily: GetMetricsForFamily;
 		generateFontFace: typeof generateFallbackFontFace;
@@ -171,7 +171,7 @@ export async function generateFallbacksCSS({
 
 	let css = '';
 
-	if (!metrics) {
+	if (!fontData || !metrics) {
 		return { css, fallbacks };
 	}
 

packages/astro/src/assets/fonts/vite-plugin-fonts.ts

@@ -20,7 +20,7 @@ import {
 	VIRTUAL_MODULE_ID,
 } from './constants.js';
 import { loadFonts } from './load.js';
-import { generateFallbackFontFace, getMetricsForFamily, readMetrics } from './metrics.js';
+import { generateFallbackFontFace, readMetrics } from './metrics.js';
 import type { ResolveMod } from './providers/utils.js';
 import type { PreloadData, ResolvedFontFamily } from './types.js';
 import { cache, extractFontType, resolveFontFamily, sortObjectByKey } from './utils.js';
@@ -130,12 +130,7 @@ export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
 			hashString: h64ToString,
 			generateFallbackFontFace,
 			getMetricsForFamily: async (name, font) => {
-				let metrics = await getMetricsForFamily(name);
-				if (font && !metrics) {
-					const { data } = await cache(storage!, font.hash, () => fetchFont(font.url));
-					metrics = await readMetrics(name, data);
-				}
-				return metrics;
+				return await readMetrics(name, await cache(storage!, font.hash, () => fetchFont(font.url)));
 			},
 			log: (message) => logger.info('assets', message),
 		});
@@ -200,7 +195,7 @@ export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
 					// Storage should be defined at this point since initialize it called before registering
 					// the middleware. hashToUrlMap is defined at the same time so if it's not set by now,
 					// no url will be matched and this line will not be reached.
-					const { data } = await cache(storage!, hash, () => fetchFont(url));
+					const data = await cache(storage!, hash, () => fetchFont(url));
 
 					res.setHeader('Content-Length', data.length);
 					res.setHeader('Content-Type', `font/${extractFontType(hash)}`);
@@ -249,7 +244,7 @@ export function fontsPlugin({ settings, sync, logger }: Options): Plugin {
 					logger.info('assets', 'Copying fonts...');
 					await Promise.all(
 						Array.from(hashToUrlMap.entries()).map(async ([hash, url]) => {
-							const { data } = await cache(storage!, hash, () => fetchFont(url));
+							const data = await cache(storage!, hash, () => fetchFont(url));
 							try {
 								writeFileSync(new URL(hash, fontsDir), data);
 							} catch (cause) {

packages/astro/test/units/assets/fonts/utils.test.js

@@ -7,53 +7,12 @@ import {
 	extractFontType,
 	familiesToUnifontProviders,
 	generateFallbacksCSS,
-	cache as internalCache,
 	isFontType,
 	isGenericFontFamily,
 	proxyURL,
 	resolveFontFamily,
 } from '../../../../dist/assets/fonts/utils.js';
 
-function createSpyCache() {
-	/** @type {Map<string, Buffer>} */
-	const store = new Map();
-
-	const storage = {
-		/**
-		 * @param {string} key
-		 * @returns {Promise<Buffer | null>}
-		 */
-		getItemRaw: async (key) => {
-			return store.get(key) ?? null;
-		},
-		/**
-		 * @param {string} key
-		 * @param {Buffer} value
-		 * @returns {Promise<void>}
-		 */
-		setItemRaw: async (key, value) => {
-			store.set(key, value);
-		},
-	};
-
-	return {
-		/**
-		 *
-		 * @param {Parameters<typeof internalCache>[1]} key
-		 * @param {Parameters<typeof internalCache>[2]} cb
-		 * @returns
-		 */
-		cache: (key, cb) =>
-			internalCache(
-				// @ts-expect-error we only mock the required hooks
-				storage,
-				key,
-				cb,
-			),
-		getKeys: () => Array.from(store.keys()),
-	};
-}
-
 /**
  *
  * @param {string} id
@@ -120,25 +79,6 @@ describe('fonts utils', () => {
 		}
 	});
 
-	it('cache()', async () => {
-		const { cache, getKeys } = createSpyCache();
-
-		assert.deepStrictEqual(getKeys(), []);
-
-		let buffer = Buffer.from('foo');
-		let res = await cache('foo', async () => buffer);
-		assert.equal(res.cached, false);
-		assert.equal(res.data, buffer);
-
-		assert.deepStrictEqual(getKeys(), ['foo']);
-
-		res = await cache('foo', async () => buffer);
-		assert.equal(res.cached, true);
-		assert.equal(res.data, buffer);
-
-		assert.deepStrictEqual(getKeys(), ['foo']);
-	});
-
 	it('proxyURL()', () => {
 		let { url, collected } = proxyURLSpy(
 			'foo',