fix(fontless): emitFile during transform

packages/fontless/src/assets.ts

@@ -14,16 +14,16 @@ export interface NormalizeFontDataContext {
   dev: boolean
   renderedFontURLs: Map<string, string>
   assetsBaseURL: string
-  callback?: (filename: string, url: string) => void
+  callback?: (filename: string, url: string) => void | Promise<void>
 }
 
-export function normalizeFontData(context: NormalizeFontDataContext, faces: RawFontFaceData | FontFaceData[]): FontFaceData[] {
+export async function normalizeFontData(context: NormalizeFontDataContext, faces: RawFontFaceData | FontFaceData[]): Promise<FontFaceData[]> {
   const data: FontFaceData[] = []
   for (const face of toArray(faces)) {
     data.push({
       ...face,
       unicodeRange: toArray(face.unicodeRange),
-      src: toArray(face.src).map((src) => {
+      src: await Promise.all(toArray(face.src).map(async (src) => {
         const source = typeof src === 'string' ? parseFont(src) : src
         if ('url' in source && hasProtocol(source.url, { acceptRelative: true })) {
           source.url = source.url.replace(/^\/\//, 'https://')
@@ -42,11 +42,11 @@ export function normalizeFontData(context: NormalizeFontDataContext, faces: RawF
             ? joinRelativeURL(context.assetsBaseURL, file)
             : joinURL(context.assetsBaseURL, file)
 
-          context.callback?.(file, source.url)
+          await context.callback?.(file, source.url)
         }
 
         return source
-      }),
+      })),
     })
   }
   return data

packages/fontless/src/resolve.ts

@@ -11,7 +11,7 @@ import { defaultValues } from './defaults'
 
 interface ResolverContext {
   exposeFont?: (font: ManualFontDetails | ProviderFontDetails) => void
-  normalizeFontData: (faces: RawFontFaceData | FontFaceData[]) => FontFaceData[]
+  normalizeFontData: (faces: RawFontFaceData | FontFaceData[]) => Promise<FontFaceData[]>
   logger?: ConsolaInstance
   storage?: UnifontOptions['storage']
   options: FontlessOptions
@@ -72,7 +72,7 @@ export async function createResolver(context: ResolverContext): Promise<Resolver
     const fallbacks = override?.fallbacks || normalizedDefaults.fallbacks[fallbackOptions?.generic || 'sans-serif']
 
     if (override && 'src' in override) {
-      const fonts = addFallbacks(fontFamily, normalizeFontData({
+      const fonts = addFallbacks(fontFamily, await normalizeFontData({
         src: override.src,
         display: override.display,
         weight: override.weight,
@@ -107,7 +107,7 @@ export async function createResolver(context: ResolverContext): Promise<Resolver
       if (override.provider in providers) {
         const result = await unifont.resolveFont(fontFamily, defaults, [override.provider])
         // Rewrite font source URLs to be proxied/local URLs
-        const fonts = normalizeFontData(result?.fonts || [])
+        const fonts = await normalizeFontData(result?.fonts || [])
         if (!fonts.length || !result) {
           logger.warn(`Could not produce font face declaration from \`${override.provider}\` for font family \`${fontFamily}\`.`)
           return
@@ -132,7 +132,7 @@ export async function createResolver(context: ResolverContext): Promise<Resolver
     const result = await unifont.resolveFont(fontFamily, defaults, [...prioritisedProviders])
     if (result) {
       // Rewrite font source URLs to be proxied/local URLs
-      const fonts = normalizeFontData(result.fonts)
+      const fonts = await normalizeFontData(result.fonts)
       if (fonts.length > 0) {
         const fontsWithLocalFallbacks = addFallbacks(fontFamily, fonts)
         // TODO: expose provider name in result

packages/fontless/src/vite.ts

@@ -1,4 +1,4 @@
-import type { Plugin } from 'vite'
+import type { Plugin, ResolvedConfig } from 'vite'
 import type { NormalizeFontDataContext } from './assets'
 import type { FontlessOptions } from './types'
 import type { FontFamilyInjectionPluginOptions } from './utils'
@@ -24,11 +24,23 @@ export function fontless(_options?: FontlessOptions): Plugin {
 
   let cssTransformOptions: FontFamilyInjectionPluginOptions
   let assetContext: NormalizeFontDataContext
+  let resolvedConfig: ResolvedConfig
+
+  async function getFontDataWithCache(filename: string, url: string) {
+    const key = `data:fonts:${filename}`
+    let data = await storage.getItemRaw<Buffer>(key)
+    if (!data) {
+      data = await fetch(url).then(r => r.arrayBuffer()).then(r => Buffer.from(r))
+      await storage.setItemRaw(key, data)
+    }
+    return data!
+  }
 
   return {
     name: 'vite-plugin-fontless',
     apply: (_config, env) => !env.isPreview,
     async configResolved(config) {
+      resolvedConfig = config
       assetContext = {
         dev: config.mode === 'development',
         renderedFontURLs: new Map<string, string>(),
@@ -85,20 +97,32 @@ export function fontless(_options?: FontlessOptions): Plugin {
             next()
             return
           }
-          const key = `data:fonts:${filename}`
-          let data = await storage.getItemRaw<Buffer>(key)
-          if (!data) {
-            data = await fetch(url).then(r => r.arrayBuffer()).then(r => Buffer.from(r))
-            await storage.setItemRaw(key, data)
-          }
           res.setHeader('Cache-Control', 'public, max-age=31536000, immutable')
-          res.end(data)
+          res.end(await getFontDataWithCache(filename, url))
         }
         catch (e) {
           next(e)
         }
       })
     },
+    buildStart() {
+      if (resolvedConfig.command === 'build') {
+        // during build, emit font assets via callback, which gets triggered during `transformCSS`.
+        assetContext.callback = async (filename) => {
+          const url = assetContext.renderedFontURLs.get(filename)!
+          this.emitFile({
+            type: 'asset',
+            fileName: joinURL(assetContext.assetsBaseURL, filename).slice(1),
+            source: await getFontDataWithCache(filename, url),
+          })
+        }
+      }
+    },
+    async buildEnd() {
+      if (resolvedConfig.command === 'build') {
+        delete assetContext.callback
+      }
+    },
     transform: {
       filter: {
         id: {
@@ -120,25 +144,6 @@ export function fontless(_options?: FontlessOptions): Plugin {
         }
       },
     },
-    async generateBundle() {
-      for (const [filename, url] of assetContext.renderedFontURLs) {
-        const key = `data:fonts:${filename}`
-        // Use storage to cache the font data between builds
-        let res = await storage.getItemRaw(key)
-        if (!res) {
-          res = await fetch(url)
-            .then(r => r.arrayBuffer())
-            .then(r => Buffer.from(r))
-
-          await storage.setItemRaw(key, res)
-        }
-        this.emitFile({
-          type: 'asset',
-          fileName: joinURL(assetContext.assetsBaseURL, filename).slice(1),
-          source: res,
-        })
-      }
-    },
     transformIndexHtml: {
       handler() {
         // Preload doesn't work on initial rendering during dev since `fontsToPreload`