fix: handle multiple sources and only try reading woff/woff2/ttf files

Author: danielroe

src/css.ts

@@ -7,21 +7,23 @@ import {
   whitespace,
 } from 'magic-regexp'
 
-export const parseFontFace = (
+export function* parseFontFace(
   css: string
-): { family?: string; source?: string } => {
+): Generator<{ family?: string; source?: string }> {
   const fontFamily = css.match(FAMILY_RE)?.groups.fontFamily
-  const src = css.match(SOURCE_RE)?.groups.src
-
   const family = withoutQuotes(fontFamily?.split(',')[0] || '')
-  const source = withoutQuotes(
-    src
-      ?.split(',')
-      .map(source => source.match(URL_RE)?.groups.url)
-      .filter(Boolean)[0] || ''
-  )
 
-  return { family, source }
+  for (const match of css.matchAll(SOURCE_RE)) {
+    const sources = match.groups.src?.split(',') || []
+    for (const entry of sources) {
+      for (const url of entry.matchAll(URL_RE)) {
+        const source = withoutQuotes(url.groups?.url || '')
+        if (source) {
+          yield { family, source }
+        }
+      }
+    }
+  }
 }
 
 export const generateOverrideName = (name: string) => {
@@ -91,9 +93,11 @@ const FAMILY_RE = createRegExp(
 const SOURCE_RE = createRegExp(
   exactly('src:')
     .and(whitespace.optionally())
-    .and(charNotIn(';}').times.any().as('src'))
+    .and(charNotIn(';}').times.any().as('src')),
+  ['g']
 )
 
 const URL_RE = createRegExp(
-  exactly('url(').and(charNotIn(')').times.any().as('url')).and(')')
+  exactly('url(').and(charNotIn(')').times.any().as('url')).and(')'),
+  ['g']
 )

src/transform.ts

@@ -22,6 +22,8 @@ interface FontaineTransformOptions {
   sourcemap?: boolean
 }
 
+const supportedExtensions = ['woff2', 'woff', 'ttf']
+
 export const FontaineTransform = createUnplugin(
   (options: FontaineTransformOptions) => {
     const cssContext = (options.css = options.css || {})
@@ -54,20 +56,23 @@ export const FontaineTransform = createUnplugin(
 
           faceRanges.push([match.index, match.index + matchContent.length])
 
-          const { family, source } = parseFontFace(matchContent)
-          if (!family) continue
-
-          const metrics =
-            (await getMetricsForFamily(family)) ||
-            (source && (await readMetricsFromId(source, id).catch(() => null)))
-
-          if (metrics) {
-            const fontFace = generateFontFace(metrics, {
-              name: overrideName(family),
-              fallbacks: options.fallbacks,
-            })
-            cssContext.value += fontFace
-            s.appendLeft(match.index, fontFace)
+          for (const { family, source } of parseFontFace(matchContent)) {
+            if (!family) continue
+            if (!supportedExtensions.some(e => source?.endsWith(e))) continue
+
+            const metrics =
+              (await getMetricsForFamily(family)) ||
+              (source &&
+                (await readMetricsFromId(source, id).catch(() => null)))
+
+            if (metrics) {
+              const fontFace = generateFontFace(metrics, {
+                name: overrideName(family),
+                fallbacks: options.fallbacks,
+              })
+              cssContext.value += fontFace
+              s.appendLeft(match.index, fontFace)
+            }
           }
         }