From 317a252f492d5c3819d0d465671e12d636be8242 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 20 Apr 2024 20:20:03 +0200
Subject: [PATCH] chore: add fonts.css to nuxt styles folder

---
 .gitignore                                  |  1 +
 examples/nuxt3/nuxt.config.ts               | 13 ++++++++++++
 packages/nuxt/build.config.ts               |  1 +
 packages/nuxt/src/index.ts                  | 19 +++--------------
 packages/nuxt/src/web-fonts.ts              | 23 +++++++++++++++++++++
 packages/preset-web-fonts/src/local-font.ts |  2 +-
 6 files changed, 42 insertions(+), 17 deletions(-)
 create mode 100644 packages/nuxt/src/web-fonts.ts

diff --git a/.gitignore b/.gitignore
index 2a6bc63a5c..54d5aaea29 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,4 @@ interactive/public/shiki
 .svelte-kit
 .eslintcache
 vite.config.ts.timestamp-*
+unocss-fonts/
diff --git a/examples/nuxt3/nuxt.config.ts b/examples/nuxt3/nuxt.config.ts
index e910c2c186..b1ca245756 100644
--- a/examples/nuxt3/nuxt.config.ts
+++ b/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'],
     ],
diff --git a/packages/nuxt/build.config.ts b/packages/nuxt/build.config.ts
index 920b5f6f29..29033bb876 100644
--- a/packages/nuxt/build.config.ts
+++ b/packages/nuxt/build.config.ts
@@ -8,5 +8,6 @@ export default defineBuildConfig({
   declaration: true,
   externals: [
     '@nuxt/schema',
+    'pathe',
   ],
 })
diff --git a/packages/nuxt/src/index.ts b/packages/nuxt/src/index.ts
index 167b361c60..762bb6cee4 100644
--- a/packages/nuxt/src/index.ts
+++ b/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
diff --git a/packages/nuxt/src/web-fonts.ts b/packages/nuxt/src/web-fonts.ts
new file mode 100644
index 0000000000..a2b05fbb5f
--- /dev/null
+++ b/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
+}
diff --git a/packages/preset-web-fonts/src/local-font.ts b/packages/preset-web-fonts/src/local-font.ts
index 3647db3e5f..f35339b2b6 100644
--- a/packages/preset-web-fonts/src/local-font.ts
+++ b/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