chore: change types and use vite.base in fonts.css

unocss · Apr 20, 2024 · 1290478 · 1290478
1 parent 026916a
commit 1290478
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 32 deletions.
diff --git a/packages/preset-web-fonts/src/local-font.ts b/packages/preset-web-fonts/src/local-font.ts
@@ -10,11 +10,12 @@ const defaultFontCssFilename = 'fonts.css'
 
 interface UseLocalFontOptions {
   downloadDir: string
+  downloadBasePath: string
 }
 
 export { resolveDownloadDir }
 
-export async function useLocalFont(css: string, { downloadDir }: UseLocalFontOptions) {
+export async function useLocalFont(css: string, { downloadDir, downloadBasePath }: UseLocalFontOptions) {
   const [{ mkdir, writeFile }, { resolve }] = await Promise.all([
     import('node:fs/promises'),
     import('node:path'),
@@ -23,9 +24,9 @@ export async function useLocalFont(css: string, { downloadDir }: UseLocalFontOpt
 
   // Download the fonts locally and update the font.css file
   for (const url of css.match(fontUrlRegex) || []) {
-    const path = resolve(downloadDir, url.split('/').pop()!)
-    await saveFont(url, path)
-    css = css.replaceAll(url, path)
+    const name = url.split('/').pop()!
+    await saveFont(url, resolve(downloadDir, name))
+    css = css.replaceAll(url, `${downloadBasePath}${name}`)
   }
 
   // Save the updated font.css file

diff --git a/packages/preset-web-fonts/src/preset.ts b/packages/preset-web-fonts/src/preset.ts
@@ -46,8 +46,7 @@ export function createWebFontPreset(fetcher: (url: string) => Promise<any>) {
       inlineImports = true,
       themeKey = 'fontFamily',
       customFetch = fetcher,
-      downloadLocally = false,
-      downloadDir,
+      downloadLocally,
     } = options
 
     const fontObject = Object.fromEntries(
@@ -66,15 +65,16 @@ export function createWebFontPreset(fetcher: (url: string) => Promise<any>) {
             }
 
             const { readFontCSS, resolveDownloadDir } = await import('./local-font')
-            const resolvedDownloadDir = await resolveDownloadDir(downloadDir)
+            const resolvedDownloadDir = await resolveDownloadDir(
+              downloadLocally === true ? undefined : downloadLocally.downloadDir,
+            )
             return readFontCSS(resolvedDownloadDir)
           },
           layer: inlineImports ? undefined : LAYER_IMPORTS,
         },
       ],
       options: {
         downloadLocally,
-        downloadDir,
         fontObject,
       },
     }

diff --git a/packages/preset-web-fonts/src/types.ts b/packages/preset-web-fonts/src/types.ts
@@ -55,18 +55,28 @@ export interface WebFontsOptions {
   customFetch?: (url: string) => Promise<any>
 
   /**
-   * Download fonts locally
+   * Download fonts locally.
    *
    * @default false
    */
-  downloadLocally?: boolean
-
-  /**
-   * Where to download the fonts
-   *
-   * @default 'process.cwd()/public/unocss-fonts'
-   */
-  downloadDir?: string | (() => Promise<string>)
+  downloadLocally?: boolean | {
+    /**
+     * Where to download the fonts.
+     *
+     * This option will be overridden by integrations:
+     * - Vite, Astro and Nuxt will use Vite [publicDir](): `${publicDir}/unocss-fonts`
+     * - SvelteKit will use `static` folder: `static/unocss-fonts`
+     *
+     * @default 'process.cwd()/public/unocss-fonts'
+     */
+    downloadDir?: string
+    /**
+     *
+     *
+     * @default /
+     */
+    downloadBasePath?: string
+  }
 }
 
 export interface Provider {

diff --git a/packages/preset-web-fonts/src/util.ts b/packages/preset-web-fonts/src/util.ts
@@ -1,16 +1,15 @@
 // eslint-disable-next-line node/prefer-global/process
 export const isNode = typeof process !== 'undefined' && process.stdout && !process.versions.deno
 
-export async function resolveDownloadDir(downloadDir?: string | (() => Promise<string>)) {
+export async function resolveDownloadDir(downloadDir?: string | (() => string)) {
   if (!isNode)
     return ''
 
+  if (typeof downloadDir === 'function')
+    return downloadDir()
+
   const { resolve } = await import('node:path')
   const { cwd } = await import('node:process')
 
-  if (typeof downloadDir === 'function')
-    return await downloadDir()
-  else if (typeof downloadDir === 'string')
-    return resolve(cwd(), downloadDir)
-  return `${cwd()}/public/unocss-fonts`
+  return typeof downloadDir === 'string' ? resolve(cwd(), downloadDir) : `${cwd()}/public/unocss-fonts`
 }
diff --git a/packages/vite/src/web-fonts.ts b/packages/vite/src/web-fonts.ts
@@ -11,20 +11,22 @@ export function createWebFontPlugins(ctx: UnocssPluginContext): Plugin[] {
         if (!webFontPreset || !webFontPreset.options?.downloadLocally)
           return
 
-        if (webFontPreset) {
-          webFontPreset.options ??= {}
-          if (typeof webFontPreset.options.downloadDir === 'undefined')
-            webFontPreset.options.downloadDir = `${config.publicDir}/unocss-fonts`
-        }
+        if (webFontPreset.options.downloadLocally === true)
+          webFontPreset.options.downloadLocally = {}
 
-        const [{ resolveDownloadDir, useLocalFont }, { getRemoteFontsCSS }] = await Promise.all([
+        if (typeof webFontPreset.options.downloadLocally.downloadDir === 'undefined')
+          webFontPreset.options.downloadLocally.downloadDir = `${config.publicDir}/unocss-fonts`
+
+        if (typeof webFontPreset.options.downloadLocally.downloadBasePath === 'undefined')
+          webFontPreset.options.downloadLocally.downloadBasePath = config.base
+
+        const [{ useLocalFont }, { getRemoteFontsCSS }] = await Promise.all([
           import('@unocss/preset-web-fonts/local-font'),
           import('@unocss/preset-web-fonts/remote-font'),
         ])
         const { $fetch } = await import('ofetch')
         const fontCSS = await getRemoteFontsCSS(webFontPreset.options.fontObject, { inlineImports: true, customFetch: $fetch })
-        const downloadDir = await resolveDownloadDir(webFontPreset.options.downloadDir)
-        await useLocalFont(fontCSS, { downloadDir })
+        await useLocalFont(fontCSS, webFontPreset.options.downloadLocally)
       },
     },
   ]

diff --git a/playground/uno.config.ts b/playground/uno.config.ts
@@ -12,7 +12,7 @@ import presetWebFonts from '@unocss/preset-web-fonts'
 export default defineConfig({
   theme: {
     fontFamily: {
-      sans: '\'Lato\', sans-serif',
+      sans: 'sans-serif',
       mono: '\'Fira Code\', monospace',
     },
   },
@@ -24,6 +24,7 @@ export default defineConfig({
     presetUno(),
     presetIcons(),
     presetWebFonts({
+      downloadLocally: true,
       provider: 'google',
       fonts: {
         sans: 'Lato',