@timber-js/app 0.2.0-alpha.65 → 0.2.0-alpha.67

package/dist/index.js

@@ -13491,6 +13491,48 @@ async function isCacheHit(metaPath, dataPath) {
 		return false;
 	}
 }
+/**
+* Generate @font-face descriptors for cached (production) Google Fonts.
+*
+* Each CachedFont gets a FontFaceDescriptor pointing to the
+* content-hashed URL under `/_timber/fonts/`.
+*/
+function generateProductionFontFaces(cachedFonts, display) {
+	return cachedFonts.map((cf) => ({
+		family: cf.face.family,
+		src: `url('/_timber/fonts/${cf.hashedFilename}') format('woff2')`,
+		weight: cf.face.weight,
+		style: cf.face.style,
+		display,
+		unicodeRange: cf.face.unicodeRange
+	}));
+}
+/**
+* Generate @font-face descriptors for dev mode (CDN-pointing).
+*
+* In dev mode, we query the Google Fonts API but use the CDN URLs
+* directly instead of downloading. This avoids the download/cache
+* step during `vite dev`.
+*/
+function generateDevFontFaces(faces, display) {
+	return faces.map((face) => ({
+		family: face.family,
+		src: `url('${face.url}') format('woff2')`,
+		weight: face.weight,
+		style: face.style,
+		display,
+		unicodeRange: face.unicodeRange
+	}));
+}
+/**
+* Resolve dev-mode font faces for an extracted font.
+*
+* Fetches the CSS from Google Fonts API and returns FontFaceDescriptors
+* pointing to CDN URLs. No files are downloaded.
+*/
+async function resolveDevFontFaces(font) {
+	return generateDevFontFaces(filterBySubsets(await fetchGoogleFontsCss(buildGoogleFontsUrl(font)), font.subsets), font.display);
+}
 //#endregion
 //#region src/plugins/fonts.ts
 var VIRTUAL_GOOGLE = "@timber/fonts/google";
@@ -13662,15 +13704,22 @@ function generateLocalVirtualModule() {
 /**
 * Generate CSS for a single extracted font.
 *
-* Includes @font-face rules (for local fonts), fallback @font-face,
+* Includes @font-face rules (for local and Google fonts), fallback @font-face,
 * and the scoped class rule.
+*
+* For Google fonts, pass the resolved FontFaceDescriptor[] from either
+* `generateProductionFontFaces()` (production) or `resolveDevFontFaces()` (dev).
 */
-function generateFontCss(font) {
+function generateFontCss(font, googleFaces) {
 	const cssParts = [];
 	if (font.provider === "local" && font.localSources) {
 		const faceCss = generateFontFaces(generateLocalFontFaces(font.family, font.localSources, font.display));
 		if (faceCss) cssParts.push(faceCss);
 	}
+	if (font.provider === "google" && googleFaces && googleFaces.length > 0) {
+		const faceCss = generateFontFaces(googleFaces);
+		if (faceCss) cssParts.push(faceCss);
+	}
 	const fallbackCss = generateFallbackCss(font.family);
 	if (fallbackCss) cssParts.push(fallbackCss);
 	if (font.variable) cssParts.push(generateVariableClass(font.className, font.variable, font.fontFamily));
@@ -13680,12 +13729,18 @@ function generateFontCss(font) {
 /**
 * Generate the CSS output for all extracted fonts.
 *
-* Includes @font-face rules for local fonts, fallback @font-face rules,
-* and scoped classes.
+* Includes @font-face rules for local and Google fonts, fallback @font-face
+* rules, and scoped classes.
+*
+* `googleFontFacesMap` provides pre-resolved FontFaceDescriptor[] for each
+* Google font ID (keyed by ExtractedFont.id).
 */
-function generateAllFontCss(registry) {
+function generateAllFontCss(registry, googleFontFacesMap) {
 	const cssParts = [];
-	for (const font of registry.values()) cssParts.push(generateFontCss(font));
+	for (const font of registry.values()) {
+		const googleFaces = googleFontFacesMap?.get(font.id);
+		cssParts.push(generateFontCss(font, googleFaces));
+	}
 	return cssParts.join("\n\n");
 }
 /**
@@ -13736,6 +13791,11 @@ function timberFonts(ctx) {
 	const registry = /* @__PURE__ */ new Map();
 	/** Fonts downloaded during buildStart (production only). */
 	let cachedFonts = [];
+	/**
+	* Pre-resolved @font-face descriptors for Google fonts, keyed by font ID.
+	* Populated in buildStart (production) or lazily in load (dev).
+	*/
+	const googleFontFacesMap = /* @__PURE__ */ new Map();
 	return {
 		name: "timber-fonts",
 		resolveId(id) {
@@ -13750,11 +13810,22 @@ function timberFonts(ctx) {
 			if (cleanId === VIRTUAL_FONT_CSS_REGISTER) return RESOLVED_FONT_CSS_REGISTER;
 			return null;
 		},
-		load(id) {
+		async load(id) {
 			if (id === RESOLVED_GOOGLE) return generateGoogleVirtualModule(registry);
 			if (id === RESOLVED_LOCAL) return generateLocalVirtualModule();
 			if (id === RESOLVED_FONT_CSS_REGISTER) {
-				const css = generateAllFontCss(registry);
+				if (ctx.dev) {
+					const googleFonts = [...registry.values()].filter((f) => f.provider === "google");
+					for (const font of googleFonts) if (!googleFontFacesMap.has(font.id)) try {
+						const faces = await resolveDevFontFaces(font);
+						googleFontFacesMap.set(font.id, faces);
+					} catch (e) {
+						const msg = e instanceof Error ? e.message : String(e);
+						console.warn(`[timber-fonts] Failed to resolve Google font "${font.family}": ${msg}`);
+						googleFontFacesMap.set(font.id, []);
+					}
+				}
+				const css = generateAllFontCss(registry, googleFontFacesMap);
 				return `globalThis.__timber_font_css = ${JSON.stringify(css)};`;
 			}
 			return null;
@@ -13801,6 +13872,17 @@ function timberFonts(ctx) {
 			const googleFonts = [...registry.values()].filter((f) => f.provider === "google");
 			if (googleFonts.length === 0) return;
 			cachedFonts = await downloadAndCacheFonts(googleFonts, ctx.root);
+			const cachedByFamily = /* @__PURE__ */ new Map();
+			for (const cf of cachedFonts) {
+				const key = cf.face.family.toLowerCase();
+				const arr = cachedByFamily.get(key) ?? [];
+				arr.push(cf);
+				cachedByFamily.set(key, arr);
+			}
+			for (const font of googleFonts) {
+				const faces = generateProductionFontFaces(cachedByFamily.get(font.family.toLowerCase()) ?? [], font.display);
+				googleFontFacesMap.set(font.id, faces);
+			}
 		},
 		transform(code, id) {
 			if (id.startsWith("\0") || id.includes("node_modules")) return null;