feat(google): support subsets (#172)

florian-lefebvre · web-flow · commit 9e4fd72c6bf6 · 2025-04-30T11:11:52.000+01:00
diff --git a/src/providers/google.ts b/src/providers/google.ts
@@ -1,5 +1,6 @@
 import type { FontFaceData, ResolveFontOptions } from '../types'
 
+import { findAll, generate, parse } from 'css-tree'
 import { hash } from 'ohash'
 import { extractFontFaceData } from '../css/parse'
 import { $fetch } from '../fetch'
@@ -25,6 +26,37 @@ interface ProviderOption {
   }
 }
 
+export function splitCssIntoSubsets(input: string): { subset: string | null, css: string }[] {
+  const data: { subset: string | null, css: string }[] = []
+
+  const comments: { value: string, endLine: number }[] = []
+  const nodes = findAll(
+    parse(input, {
+      positions: true,
+      // Comments are not part of the tree. We rely on the positions to infer the subset
+      onComment(value, loc) {
+        comments.push({ value: value.trim(), endLine: loc.end.line })
+      },
+    }),
+    node => node.type === 'Atrule' && node.name === 'font-face',
+  )
+
+  // If there are no comments, we don't associate subsets because we can't
+  if (comments.length === 0) {
+    return [{ subset: null, css: input }]
+  }
+
+  for (const node of nodes) {
+    const comment = comments.filter(comment => comment.endLine < node.loc!.start.line).at(-1)
+    if (!comment)
+      continue
+
+    data.push({ subset: comment.value, css: generate(node) })
+  }
+
+  return data
+}
+
 export default defineFontProvider<ProviderOption>('google', async (_options = {}, ctx) => {
   const googleFonts = await ctx.storage.getItem('google:meta.json', () => $fetch<{ familyMetadataList: FontIndexMeta[] }>('https://fonts.google.com/metadata/fonts', { responseType: 'json' }).then(r => r.familyMetadataList))
 
@@ -82,24 +114,31 @@ export default defineFontProvider<ProviderOption>('google', async (_options = {}
     const resolvedFontFaceData: FontFaceData[] = []
 
     for (const extension in userAgents) {
-      const data = extractFontFaceData(await $fetch<string>('/css2', {
+      const rawCss = await $fetch<string>('/css2', {
         baseURL: 'https://fonts.googleapis.com',
-        headers: { 'user-agent': userAgents[extension as keyof typeof userAgents] },
+        headers: {
+          'user-agent': userAgents[extension as keyof typeof userAgents],
+        },
         query: {
-          family: `${family}:${resolvedAxes.join(',')}@${resolvedVariants.join(';')}`,
+          family: `${family}:${resolvedAxes.join(',')}@${resolvedVariants.join(
+            ';',
+          )}`,
           ...(glyphs && { text: glyphs }),
         },
-      }))
-      data.map((f) => {
-        f.meta ??= {}
-        f.meta.priority = priority
-        return f
       })
-      resolvedFontFaceData.push(...data)
+      const groups = splitCssIntoSubsets(rawCss).filter(group => group.subset ? options.subsets.includes(group.subset) : true)
+      for (const group of groups) {
+        const data = extractFontFaceData(group.css)
+        data.map((f) => {
+          f.meta ??= {}
+          f.meta.priority = priority
+          return f
+        })
+        resolvedFontFaceData.push(...data)
+      }
       priority++
     }
 
-    // TODO: support subsets
     return resolvedFontFaceData
   }
 
diff --git a/test/providers/google.test.ts b/test/providers/google.test.ts
@@ -1,6 +1,7 @@
 import type { ResolveFontOptions } from '../../src'
 import { describe, expect, it } from 'vitest'
 import { createUnifont, providers } from '../../src'
+import { splitCssIntoSubsets } from '../../src/providers/google'
 import { getOptimizerIdentityFromUrl, groupBy, pickUniqueBy } from '../utils'
 
 describe('google', () => {
@@ -16,7 +17,7 @@ describe('google', () => {
 
     const { fonts } = await unifont.resolveFont('Poppins')
 
-    expect(fonts).toHaveLength(8)
+    expect(fonts).toHaveLength(6)
   })
 
   it('filters fonts based on provided options', async () => {
@@ -27,13 +28,12 @@ describe('google', () => {
     const { fonts } = await unifont.resolveFont('Poppins', {
       styles,
       weights,
-      subsets: [],
     })
 
     const resolvedStyles = pickUniqueBy(fonts, fnt => fnt.style)
     const resolvedWeights = pickUniqueBy(fonts, fnt => String(fnt.weight))
 
-    expect(fonts).toHaveLength(4)
+    expect(fonts).toHaveLength(3)
     expect(resolvedStyles).toMatchObject(styles)
     expect(resolvedWeights).toMatchObject(weights)
   })
@@ -107,7 +107,6 @@ describe('google', () => {
     const { fonts } = await unifont.resolveFont('Poppins', {
       styles: ['normal'],
       weights: ['400'],
-      subsets: [],
     })
 
     // Do not use sanitizeFontSource here, as we must test the optimizer identity in url params
@@ -146,4 +145,60 @@ describe('google', () => {
       }
     `)
   })
+
+  it('filters subsets correctly', async () => {
+    const unifont = await createUnifont([providers.google()])
+
+    const { fonts } = await unifont.resolveFont('Roboto', { subsets: ['latin'] })
+    expect(fonts.length).toEqual(4)
+  })
+
+  describe('splitCssIntoSubsets()', () => {
+    it('associates subsets and css correctly if there are comments', () => {
+      expect(
+        splitCssIntoSubsets(`
+/* vietnamese */
+@font-face {
+  font-family: 'A';
+}
+/* latin-ext */
+@font-face {
+  font-family: 'B';
+}
+@font-face {
+  font-family: 'Still B';
+}
+/* latin */
+@font-face {
+  font-family: 'C';
+}
+body {
+  --google-font-color-bungeetint:none;
+}
+@font-face {
+  font-family: 'Still C';
+}
+`),
+      ).toEqual([
+        { subset: 'vietnamese', css: '@font-face{font-family:"A"}' },
+        { subset: 'latin-ext', css: '@font-face{font-family:"B"}' },
+        { subset: 'latin-ext', css: '@font-face{font-family:"Still B"}' },
+        { subset: 'latin', css: '@font-face{font-family:"C"}' },
+        { subset: 'latin', css: '@font-face{font-family:"Still C"}' },
+      ])
+    })
+  })
+
+  it('it does not associate subsets if there are no comments', () => {
+    const input = `
+@font-face {
+  font-family: 'A';
+}
+@font-face {
+  font-family: 'B';
+}
+`
+
+    expect(splitCssIntoSubsets(input)).toEqual([{ subset: null, css: input }])
+  })
 })
