fix(preset-web-fonts): support width axis and single axis config for google provider (#4878)

Co-authored-by: Chris <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: 3 people

packages-presets/preset-web-fonts/src/preset.ts

@@ -28,6 +28,8 @@ export function normalizedFontMeta(meta: WebFontMeta | string, defaultProvider:
     meta.provider = resolveProvider(meta.provider || defaultProvider)
     if (meta.weights)
       meta.weights = [...new Set(meta.weights.sort((a, b) => a.toString().localeCompare(b.toString(), 'en', { numeric: true })))]
+    if (meta.widths)
+      meta.widths = [...new Set(meta.widths.sort((a, b) => a.toString().localeCompare(b.toString(), 'en', { numeric: true })))]
     return meta as ResolvedWebFontMeta
   }
 

packages-presets/preset-web-fonts/src/providers/coollabs.ts

@@ -1,29 +1,5 @@
-import type { Provider, WebFontsProviders } from '../types'
+import type { Provider } from '../types'
+import { createGoogleCompatibleProvider } from './google'
 
-export function createCoolLabsCompatibleProvider(name: WebFontsProviders, host: string): Provider {
-  return {
-    name,
-    getImportUrl(fonts) {
-      const sort = (weights: string[][]) => {
-        const firstW = weights.map(w => w[0])
-        const lastW = weights.map(w => w[1])
-        return `${firstW.join(';')};${lastW.join(';')}`
-      }
-
-      const strings = fonts
-        .map((i) => {
-          let name = i.name.replace(/\s+/g, '+')
-          if (i.weights?.length) {
-            name += i.italic
-              ? `:ital,wght@${sort(i.weights.map(w => [`0,${w}`, `1,${w}`]))}`
-              : `:wght@${i.weights.join(';')}`
-          }
-          return `family=${name}`
-        })
-        .join('&')
-      return `${host}/css2?${strings}&display=swap`
-    },
-  }
-}
-
-export const CoolLabsFontsProvider: Provider = createCoolLabsCompatibleProvider('coollabs', 'https://api.fonts.coollabs.io')
+// https://fonts.coollabs.io/
+export const CoolLabsFontsProvider: Provider = createGoogleCompatibleProvider('coollabs', 'https://api.fonts.coollabs.io')

packages-presets/preset-web-fonts/src/providers/google.ts

@@ -1,22 +1,54 @@
 import type { Provider, WebFontsProviders } from '../types'
 
+export interface FontAxis {
+  axis: string
+  values: string[]
+}
+
+export function generateFontAxes(axes: FontAxis[]): string {
+  if (!axes || axes.length === 0)
+    return ''
+
+  let combinations: string[][] = [[]]
+  for (const { values } of axes) {
+    const newCombinations: string[][] = []
+    for (const combo of combinations) {
+      for (const value of values) {
+        newCombinations.push([...combo, value])
+      }
+    }
+    combinations = newCombinations
+  }
+  return combinations.map(arr => arr.join(',')).join(';')
+}
+
 export function createGoogleCompatibleProvider(name: WebFontsProviders, host: string): Provider {
   return {
     name,
     getImportUrl(fonts) {
-      const sort = (weights: string[][]) => {
-        const firstW = weights.map(w => w[0])
-        const lastW = weights.map(w => w[1])
-        return `${firstW.join(';')};${lastW.join(';')}`
-      }
-
       const strings = fonts
         .map((i) => {
           let name = i.name.replace(/\s+/g, '+')
-          if (i.weights?.length) {
-            name += i.italic
-              ? `:ital,wght@${sort(i.weights.map(w => [`0,${w}`, `1,${w}`]))}`
-              : `:wght@${i.weights.join(';')}`
+          /**
+           * When using the Google Fonts API, be sure to list them alphabetically.
+           * @see https://fonts.google.com/knowledge/using_type/styling_type_on_the_web_with_variable_fonts
+           * @example ital, opsz, slnt, wdth, wght
+           */
+          const axisValues: FontAxis[] = []
+          if (i.italic)
+            axisValues.push({ axis: 'ital', values: ['0', '1'] })
+
+          if (i.widths?.length)
+            axisValues.push({ axis: 'wdth', values: i.widths.map(w => w.toString()) })
+
+          if (i.weights?.length)
+            axisValues.push({ axis: 'wght', values: i.weights.map(w => w.toString()) })
+
+          if (axisValues.length) {
+            name += ':'
+            name += axisValues.map(a => a.axis).join(',')
+            name += '@'
+            name += generateFontAxes(axisValues)
           }
           return `family=${name}`
         })

packages-presets/preset-web-fonts/src/types.ts

@@ -20,6 +20,12 @@ export interface WebFontMeta {
    */
   italic?: boolean // ital axis
 
+  /**
+   * Font width(s) to include, and respect the width order
+   * @example [62.5, 125]
+   */
+  widths?: (string | number)[] // wdth axis
+
   /**
    * Variable font settings
    * @example

test/preset-web-fonts.test.ts

@@ -64,7 +64,7 @@ it('web-fonts (inline: true)', async () => {
   expect(css).toContain('@font-face')
 })
 
-it('web-fonts weight sort', async () => {
+it('web-fonts width & weight sort', async () => {
   const uno = await createGenerator({
     presets: [
       presetMini({ preflight: false }),
@@ -76,6 +76,7 @@ it('web-fonts weight sort', async () => {
             {
               name: 'Lato',
               weights: ['1000', '200'],
+              widths: ['125', '62.5'],
               italic: true,
             },
           ],
@@ -87,7 +88,7 @@ it('web-fonts weight sort', async () => {
 
   const { css } = await uno.generate(classes)
   const importUrl = css.match(/@import url\('(.*)'\)/)![1]
-  expect(importUrl).toMatchInlineSnapshot('"https://fonts.googleapis.com/css2?family=Fira+Mono:wght@200;1000&family=Lato:ital,wght@0,200;0,1000;1,200;1,1000&display=swap"')
+  expect(importUrl).toMatchInlineSnapshot(`"https://fonts.googleapis.com/css2?family=Fira+Mono:wght@200;1000&family=Lato:ital,wdth,wght@0,62.5,200;0,62.5,1000;0,125,200;0,125,1000;1,62.5,200;1,62.5,1000;1,125,200;1,125,1000&display=swap"`)
 })
 
 it('web-fonts weight deduplicate', async () => {