chore: add fonts.css to nuxt styles folder

.gitignore

@@ -25,3 +25,4 @@ interactive/public/shiki
 .svelte-kit
 .eslintcache
 vite.config.ts.timestamp-*
+unocss-fonts/

examples/nuxt3/nuxt.config.ts

@@ -6,6 +6,19 @@ export default defineNuxtConfig({
     attributify: true,
     icons: true,
     components: false,
+    theme: {
+      fontFamily: {
+        sans: 'sans-serif',
+      },
+    },
+    webFonts: {
+      downloadLocally: true,
+      provider: 'google',
+      fonts: {
+        sans: 'Lato',
+        serif: 'Merriweather',
+      },
+    },
     shortcuts: [
       ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
     ],

packages/nuxt/build.config.ts

@@ -8,5 +8,6 @@ export default defineBuildConfig({
   declaration: true,
   externals: [
     '@nuxt/schema',
+    'pathe',
   ],
 })

packages/nuxt/src/index.ts

@@ -5,11 +5,12 @@ import { addComponentsDir, addPluginTemplate, defineNuxtModule, extendWebpackCon
 import WebpackPlugin from '@unocss/webpack'
 import type { VitePluginConfig } from '@unocss/vite'
 import VitePlugin from '@unocss/vite'
-import type { Nuxt, NuxtPlugin } from '@nuxt/schema'
+import type { NuxtPlugin } from '@nuxt/schema'
 import { loadConfig } from '@unocss/config'
-import type { Preset, UserConfig } from '@unocss/core'
+import type { UserConfig } from '@unocss/core'
 import { resolveOptions } from './options'
 import type { UnocssNuxtOptions } from './types'
+import { configureWebFontPreset } from './web-fonts'
 
 export { UnocssNuxtOptions }
 
@@ -135,20 +136,6 @@ export default defineNuxtModule<UnocssNuxtOptions>({
   },
 })
 
-function lookupPreset<P extends Preset<any>>(options: UnocssNuxtOptions, presetName: P['name']) {
-  const preset: P | undefined = (options.presets || []).flat().find(p => p.name === presetName) as any
-  return preset
-}
-
-function configureWebFontPreset(nuxt: Nuxt, options: UnocssNuxtOptions) {
-  const webFontPreset = lookupPreset(options, '@unocss/preset-web-fonts')
-  if (webFontPreset && !!webFontPreset.options?.downloadLocally) {
-    webFontPreset.options.downloadLocally = {}
-    webFontPreset.options.downloadLocally.downloadDir = `${nuxt.options.dir.public}/unocss-fonts`
-    webFontPreset.options.downloadLocally.downloadBasePath = nuxt.options.app.baseURL
-  }
-}
-
 declare module '@nuxt/schema' {
   interface NuxtConfig {
     unocss?: UnocssNuxtOptions

packages/nuxt/src/web-fonts.ts

@@ -0,0 +1,23 @@
+import type { Preset } from '@unocss/core'
+import type { Nuxt } from '@nuxt/schema'
+import { dirname, relative } from 'pathe'
+import { defaultFontCssFilename } from '@unocss/preset-web-fonts/local-font'
+import type { UnocssNuxtOptions } from './types'
+
+export function configureWebFontPreset(nuxt: Nuxt, options: UnocssNuxtOptions) {
+  const webFontPreset = lookupPreset(options, '@unocss/preset-web-fonts')
+  if (webFontPreset && !!webFontPreset.options?.downloadLocally) {
+    const downloadDir = `${nuxt.options.dir.public}/unocss-fonts`
+    webFontPreset.options.downloadLocally = {
+      downloadDir,
+      downloadBasePath: nuxt.options.app.baseURL,
+    }
+    nuxt.options.css ??= []
+    nuxt.options.css.push(`~/${relative(dirname(nuxt.options.dir.public), downloadDir)}/${defaultFontCssFilename}`.replaceAll('\\', '/'))
+  }
+}
+
+function lookupPreset<P extends Preset<any>>(options: UnocssNuxtOptions, presetName: P['name']) {
+  const preset: P | undefined = (options.presets || []).flat().find(p => p.name === presetName) as any
+  return preset
+}

packages/preset-web-fonts/src/local-font.ts

@@ -6,7 +6,7 @@ import { resolveDownloadDir } from './util'
 
 const fontUrlRegex = /[-a-z0-9@:%_+.~#?&/=]+\.(?:woff2?|eot|ttf|otf|svg)/gi
 
-const defaultFontCssFilename = 'fonts.css'
+export const defaultFontCssFilename = 'fonts.css'
 
 interface UseLocalFontOptions {
   downloadDir: string