feat(web-fonts): add downloadLocally options

.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