test: add test/example for custom providers

Author: danielroe

playground/nuxt.config.ts

@@ -1,6 +1,9 @@
 export default defineNuxtConfig({
   modules: ['@nuxt/fonts', '@nuxtjs/tailwindcss'],
   fonts: {
+    providers: {
+      custom: '~/providers/custom'
+    },
     families: [
       { name: 'Kode Mono', provider: 'none' },
       { name: 'MyCustom', src: '/font.woff2' },

playground/pages/providers/custom.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    Local font
+  </div>
+</template>
+
+<style scoped>
+div {
+  font-family: 'SomeFontFromCustomProvider', sans-serif;
+}
+</style>

playground/providers/custom.ts

@@ -0,0 +1,19 @@
+// TODO: expose types publicly
+import type { FontProvider } from '../../src/types'
+
+const resolvableFonts = new Set<string>()
+export default {
+  async setup () {
+    // Do some stuff
+    resolvableFonts.add('SomeFontFromCustomProvider')
+  },
+  async resolveFontFaces (fontFamily, _defaults) {
+    if (!resolvableFonts.has(fontFamily)) { return }
+    return {
+      fonts: {
+        src: '/some-font.woff2'
+      }
+    }
+  },
+} satisfies FontProvider
+

test/basic.test.ts

@@ -53,6 +53,19 @@ describe('providers', async () => {
     const html = await $fetch('/providers/none')
     expect(extractFontFaces('CustomFont', html)).toMatchInlineSnapshot(`[]`)
   })
+
+  it('should allow defining custom providers', async () => {
+    const html = await $fetch('/providers/custom')
+    expect(extractFontFaces('SomeFontFromCustomProvider', html)).toMatchInlineSnapshot(`
+      [
+        "@font-face {
+        font-family: 'SomeFontFromCustomProvider';
+        src: url("/some-font.woff2") format(woff2);
+        font-display: swap;
+      }",
+      ]
+    `)
+  })
 })
 
 describe('features', () => {