@unocss/preset-web-fonts 0.61.0 → 0.61.3

package/dist/index.d.mts

@@ -1,59 +1,6 @@
 import * as _unocss_core from '@unocss/core';
-
-type WebFontsProviders = 'google' | 'bunny' | 'fontshare' | 'none' | Provider;
-interface WebFontMeta {
-    name: string;
-    weights?: (string | number)[];
-    italic?: boolean;
-    /**
-     * Override the provider
-     * @default <matches root config>
-     */
-    provider?: WebFontsProviders;
-}
-interface ResolvedWebFontMeta extends Omit<WebFontMeta, 'provider'> {
-    provider: Provider;
-}
-interface WebFontsOptions {
-    /**
-     * Provider service of the web fonts
-     * @default 'google'
-     */
-    provider?: WebFontsProviders;
-    /**
-     * The fonts
-     */
-    fonts?: Record<string, WebFontMeta | string | (WebFontMeta | string)[]>;
-    /**
-     * Extend fonts to the theme object
-     * @default true
-     */
-    extendTheme?: boolean;
-    /**
-     * Key for the theme object
-     *
-     * @default 'fontFamily'
-     */
-    themeKey?: string;
-    /**
-     * Inline CSS @import()
-     *
-     * @default true
-     */
-    inlineImports?: boolean;
-    /**
-     * Custom fetch function
-     *
-     * @default undefined
-     */
-    customFetch?: (url: string) => Promise<any>;
-}
-interface Provider {
-    name: WebFontsProviders;
-    getPreflight?: (fonts: WebFontMeta[]) => string;
-    getImportUrl?: (fonts: WebFontMeta[]) => string | undefined;
-    getFontName?: (font: WebFontMeta) => string;
-}
+import { W as WebFontMeta, a as WebFontsProviders, R as ResolvedWebFontMeta, P as Provider, b as WebFontsOptions } from './shared/preset-web-fonts.DSrOMtoz.mjs';
+export { c as WebFontProcessor } from './shared/preset-web-fonts.DSrOMtoz.mjs';
 
 declare function normalizedFontMeta(meta: WebFontMeta | string, defaultProvider: WebFontsProviders): ResolvedWebFontMeta;
 
@@ -66,4 +13,4 @@ declare function createGoogleCompatibleProvider(name: WebFontsProviders, host: s
  */
 declare const presetWebFonts: _unocss_core.PresetFactory<any, WebFontsOptions>;
 
-export { type Provider, type ResolvedWebFontMeta, type WebFontMeta, type WebFontsOptions, type WebFontsProviders, createGoogleCompatibleProvider as createGoogleProvider, presetWebFonts as default, normalizedFontMeta };
+export { Provider, ResolvedWebFontMeta, WebFontMeta, WebFontsOptions, WebFontsProviders, createGoogleCompatibleProvider as createGoogleProvider, presetWebFonts as default, normalizedFontMeta };

package/dist/index.d.ts

@@ -1,59 +1,6 @@
 import * as _unocss_core from '@unocss/core';
-
-type WebFontsProviders = 'google' | 'bunny' | 'fontshare' | 'none' | Provider;
-interface WebFontMeta {
-    name: string;
-    weights?: (string | number)[];
-    italic?: boolean;
-    /**
-     * Override the provider
-     * @default <matches root config>
-     */
-    provider?: WebFontsProviders;
-}
-interface ResolvedWebFontMeta extends Omit<WebFontMeta, 'provider'> {
-    provider: Provider;
-}
-interface WebFontsOptions {
-    /**
-     * Provider service of the web fonts
-     * @default 'google'
-     */
-    provider?: WebFontsProviders;
-    /**
-     * The fonts
-     */
-    fonts?: Record<string, WebFontMeta | string | (WebFontMeta | string)[]>;
-    /**
-     * Extend fonts to the theme object
-     * @default true
-     */
-    extendTheme?: boolean;
-    /**
-     * Key for the theme object
-     *
-     * @default 'fontFamily'
-     */
-    themeKey?: string;
-    /**
-     * Inline CSS @import()
-     *
-     * @default true
-     */
-    inlineImports?: boolean;
-    /**
-     * Custom fetch function
-     *
-     * @default undefined
-     */
-    customFetch?: (url: string) => Promise<any>;
-}
-interface Provider {
-    name: WebFontsProviders;
-    getPreflight?: (fonts: WebFontMeta[]) => string;
-    getImportUrl?: (fonts: WebFontMeta[]) => string | undefined;
-    getFontName?: (font: WebFontMeta) => string;
-}
+import { W as WebFontMeta, a as WebFontsProviders, R as ResolvedWebFontMeta, P as Provider, b as WebFontsOptions } from './shared/preset-web-fonts.DSrOMtoz.js';
+export { c as WebFontProcessor } from './shared/preset-web-fonts.DSrOMtoz.js';
 
 declare function normalizedFontMeta(meta: WebFontMeta | string, defaultProvider: WebFontsProviders): ResolvedWebFontMeta;
 
@@ -66,4 +13,4 @@ declare function createGoogleCompatibleProvider(name: WebFontsProviders, host: s
  */
 declare const presetWebFonts: _unocss_core.PresetFactory<any, WebFontsOptions>;
 
-export { type Provider, type ResolvedWebFontMeta, type WebFontMeta, type WebFontsOptions, type WebFontsProviders, createGoogleCompatibleProvider as createGoogleProvider, presetWebFonts as default, normalizedFontMeta };
+export { Provider, ResolvedWebFontMeta, WebFontMeta, WebFontsOptions, WebFontsProviders, createGoogleCompatibleProvider as createGoogleProvider, presetWebFonts as default, normalizedFontMeta };

package/dist/index.mjs

@@ -108,18 +108,43 @@ function createWebFontPreset(fetcher) {
       extendTheme = true,
       inlineImports = true,
       themeKey = "fontFamily",
-      customFetch = fetcher
+      customFetch = fetcher,
+      timeouts = {}
     } = options;
+    const processors = toArray(options.processors || []);
     const fontObject = Object.fromEntries(
       Object.entries(options.fonts || {}).map(([name, meta]) => [name, toArray(meta).map((m) => normalizedFontMeta(m, defaultProvider))])
     );
     const fonts = Object.values(fontObject).flatMap((i) => i);
     const importCache = {};
+    async function fetchWithTimeout(url) {
+      if (timeouts === false)
+        return customFetch(url);
+      const {
+        warning = 1e3,
+        failure = 2e3
+      } = timeouts;
+      let warned = false;
+      const timer = setTimeout(() => {
+        console.warn(`[unocss] Fetching web fonts: ${url}`);
+        warned = true;
+      }, warning);
+      return await Promise.race([
+        customFetch(url),
+        new Promise((_, reject) => {
+          setTimeout(() => reject(new Error(`[unocss] Fetch web fonts timeout.`)), failure);
+        })
+      ]).then((res) => {
+        if (warned)
+          console.info(`[unocss] Web fonts fetched.`);
+        return res;
+      }).finally(() => clearTimeout(timer));
+    }
     async function importUrl(url) {
       if (inlineImports) {
         if (!importCache[url]) {
-          importCache[url] = customFetch(url).catch((e) => {
-            console.error("Failed to fetch web fonts");
+          importCache[url] = fetchWithTimeout(url).catch((e) => {
+            console.error(`[unocss] Failed to fetch web fonts: ${url}`);
             console.error(e);
             if (typeof process !== "undefined" && process.env.CI)
               throw e;
@@ -130,23 +155,43 @@ function createWebFontPreset(fetcher) {
         return `@import url('${url}');`;
       }
     }
-    const enabledProviders = new Set(fonts.map((i) => i.provider));
+    const enabledProviders = Array.from(new Set(fonts.map((i) => i.provider)));
+    async function getCSSDefault(fonts2, providers) {
+      const preflights = [];
+      for (const provider of providers) {
+        const fontsForProvider = fonts2.filter((i) => i.provider.name === provider.name);
+        if (provider.getImportUrl) {
+          const url = provider.getImportUrl(fontsForProvider);
+          if (url)
+            preflights.push(await importUrl(url));
+        }
+        preflights.push(provider.getPreflight?.(fontsForProvider));
+      }
+      const css = preflights.filter(Boolean).join("\n");
+      return css;
+    }
     const preset = {
       name: "@unocss/preset-web-fonts",
       preflights: [
         {
           async getCSS() {
-            const preflights = [];
-            for (const provider of enabledProviders) {
-              const fontsForProvider = fonts.filter((i) => i.provider.name === provider.name);
-              if (provider.getImportUrl) {
-                const url = provider.getImportUrl(fontsForProvider);
-                if (url)
-                  preflights.push(await importUrl(url));
+            let css;
+            for (const processor of processors) {
+              const result = await processor.getCSS?.(fonts, enabledProviders, getCSSDefault);
+              if (result) {
+                css = result;
+                break;
               }
-              preflights.push(provider.getPreflight?.(fontsForProvider));
             }
-            return preflights.filter(Boolean).join("\n");
+            if (!css) {
+              css = await getCSSDefault(
+                fonts,
+                enabledProviders
+              );
+            }
+            for (const processor of processors)
+              css = await processor.transformCSS?.(css) || css;
+            return css;
           },
           layer: inlineImports ? void 0 : LAYER_IMPORTS
         }

package/dist/local.d.mts

@@ -0,0 +1,32 @@
+import { c as WebFontProcessor } from './shared/preset-web-fonts.DSrOMtoz.mjs';
+import '@unocss/core';
+
+interface LocalFontProcessorOptions {
+    /**
+     * Current working directory
+     *
+     * @default process.cwd()
+     */
+    cwd?: string;
+    /**
+     * Directory to cache the fonts
+     *
+     * @default 'node_modules/.cache/unocss/fonts'
+     */
+    cacheDir?: string;
+    /**
+     * Directory to save the fonts assets
+     *
+     * @default 'public/assets/fonts'
+     */
+    fontAssetsDir?: string;
+    /**
+     * Base URL to serve the fonts from the client
+     *
+     * @default '/assets/fonts'
+     */
+    fontServeBaseUrl?: string;
+}
+declare function createLocalFontProcessor(options?: LocalFontProcessorOptions): WebFontProcessor;
+
+export { type LocalFontProcessorOptions, createLocalFontProcessor };

package/dist/local.d.ts

@@ -0,0 +1,32 @@
+import { c as WebFontProcessor } from './shared/preset-web-fonts.DSrOMtoz.js';
+import '@unocss/core';
+
+interface LocalFontProcessorOptions {
+    /**
+     * Current working directory
+     *
+     * @default process.cwd()
+     */
+    cwd?: string;
+    /**
+     * Directory to cache the fonts
+     *
+     * @default 'node_modules/.cache/unocss/fonts'
+     */
+    cacheDir?: string;
+    /**
+     * Directory to save the fonts assets
+     *
+     * @default 'public/assets/fonts'
+     */
+    fontAssetsDir?: string;
+    /**
+     * Base URL to serve the fonts from the client
+     *
+     * @default '/assets/fonts'
+     */
+    fontServeBaseUrl?: string;
+}
+declare function createLocalFontProcessor(options?: LocalFontProcessorOptions): WebFontProcessor;
+
+export { type LocalFontProcessorOptions, createLocalFontProcessor };

package/dist/local.mjs

@@ -0,0 +1,83 @@
+import { createHash } from 'node:crypto';
+import fs from 'node:fs';
+import fsp from 'node:fs/promises';
+import process from 'node:process';
+import { resolve, join } from 'node:path';
+import { Buffer } from 'node:buffer';
+import { fetch } from 'ofetch';
+
+function replaceAsync(string, searchValue, replacer) {
+  try {
+    if (typeof replacer === "function") {
+      const values = [];
+      String.prototype.replace.call(string, searchValue, (...args) => {
+        values.push(replacer(...args));
+        return "";
+      });
+      return Promise.all(values).then((resolvedValues) => {
+        return String.prototype.replace.call(string, searchValue, () => {
+          return resolvedValues.shift() || "";
+        });
+      });
+    } else {
+      return Promise.resolve(
+        String.prototype.replace.call(string, searchValue, replacer)
+      );
+    }
+  } catch (error) {
+    return Promise.reject(error);
+  }
+}
+
+const fontUrlRegex = /[-\w@:%+.~#?&/=]+\.(?:woff2?|eot|ttf|otf|svg)/gi;
+function createLocalFontProcessor(options) {
+  const cwd = options?.cwd || process.cwd();
+  const cacheDir = resolve(cwd, options?.cacheDir || "node_modules/.cache/unocss/fonts");
+  const fontAssetsDir = resolve(cwd, options?.fontAssetsDir || "public/assets/fonts");
+  const fontServeBaseUrl = options?.fontServeBaseUrl || "/assets/fonts";
+  async function _downloadFont(url, assetPath) {
+    const response = await fetch(url).then((r) => r.arrayBuffer());
+    await fsp.mkdir(fontAssetsDir, { recursive: true });
+    await fsp.writeFile(assetPath, Buffer.from(response));
+  }
+  const cache = /* @__PURE__ */ new Map();
+  function downloadFont(url, assetPath) {
+    if (!cache.has(url))
+      cache.set(url, _downloadFont(url, assetPath));
+    return cache.get(url);
+  }
+  return {
+    async getCSS(fonts, providers, getCSSDefault) {
+      const hash = getHash(JSON.stringify(fonts));
+      const cachePath = join(cacheDir, `${hash}.css`);
+      if (fs.existsSync(cachePath)) {
+        return fsp.readFile(cachePath, "utf-8");
+      }
+      const css = await getCSSDefault(fonts, providers);
+      await fsp.mkdir(cacheDir, { recursive: true });
+      await fsp.writeFile(cachePath, css, "utf-8");
+      return css;
+    },
+    async transformCSS(css) {
+      return await replaceAsync(css, fontUrlRegex, async (url) => {
+        const hash = getHash(url);
+        const ext = url.split(".").pop();
+        let name = "";
+        const match1 = url.match(/\/s\/([^/]+)\//);
+        if (match1)
+          name = match1[1].replace(/\W/g, " ").trim().replace(/\s+/, "-").toLowerCase();
+        const filename = `${[name, hash].filter(Boolean).join("-")}.${ext}`;
+        const assetPath = join(fontAssetsDir, filename);
+        if (!fs.existsSync(assetPath)) {
+          await downloadFont(url, assetPath);
+        }
+        return `${fontServeBaseUrl}/${filename}`;
+      });
+    }
+  };
+}
+function getHash(input, length = 8) {
+  return createHash("sha256").update(input).digest("hex").slice(0, length);
+}
+
+export { createLocalFontProcessor };

package/dist/shared/preset-web-fonts.DSrOMtoz.d.mts

@@ -0,0 +1,83 @@
+import { Awaitable, Arrayable } from '@unocss/core';
+
+type WebFontsProviders = 'google' | 'bunny' | 'fontshare' | 'none' | Provider;
+interface WebFontMeta {
+    name: string;
+    weights?: (string | number)[];
+    italic?: boolean;
+    /**
+     * Override the provider
+     * @default <matches root config>
+     */
+    provider?: WebFontsProviders;
+}
+interface WebFontProcessor {
+    getCSS?: (fonts: ResolvedWebFontMeta[], providers: Provider[], getCSSDefault: (fonts: ResolvedWebFontMeta[], providers: Provider[]) => Awaitable<string>) => Awaitable<string | undefined>;
+    transformCSS?: (css: string) => Promise<string | undefined>;
+}
+interface ResolvedWebFontMeta extends Omit<WebFontMeta, 'provider'> {
+    provider: Provider;
+}
+interface WebFontsOptions {
+    /**
+     * Provider service of the web fonts
+     * @default 'google'
+     */
+    provider?: WebFontsProviders;
+    /**
+     * The fonts
+     */
+    fonts?: Record<string, WebFontMeta | string | (WebFontMeta | string)[]>;
+    /**
+     * Extend fonts to the theme object
+     * @default true
+     */
+    extendTheme?: boolean;
+    /**
+     * Key for the theme object
+     *
+     * @default 'fontFamily'
+     */
+    themeKey?: string;
+    /**
+     * Inline CSS @import()
+     *
+     * @default true
+     */
+    inlineImports?: boolean;
+    /**
+     * Custom fetch function
+     *
+     * @default undefined
+     */
+    customFetch?: (url: string) => Promise<any>;
+    /**
+     * Custom processor for the font CSS
+     */
+    processors?: Arrayable<WebFontProcessor>;
+    /**
+     * Timeouts for fetching web fonts
+     */
+    timeouts?: false | {
+        /**
+         * Timeout for printing warning message
+         *
+         * @default 500
+         */
+        warning?: number;
+        /**
+         * Timeout for failing the fetch
+         *
+         * @default 2000
+         */
+        failure?: number;
+    };
+}
+interface Provider {
+    name: WebFontsProviders;
+    getPreflight?: (fonts: WebFontMeta[]) => string;
+    getImportUrl?: (fonts: WebFontMeta[]) => string | undefined;
+    getFontName?: (font: WebFontMeta) => string;
+}
+
+export type { Provider as P, ResolvedWebFontMeta as R, WebFontMeta as W, WebFontsProviders as a, WebFontsOptions as b, WebFontProcessor as c };

package/dist/shared/preset-web-fonts.DSrOMtoz.d.ts

@@ -0,0 +1,83 @@
+import { Awaitable, Arrayable } from '@unocss/core';
+
+type WebFontsProviders = 'google' | 'bunny' | 'fontshare' | 'none' | Provider;
+interface WebFontMeta {
+    name: string;
+    weights?: (string | number)[];
+    italic?: boolean;
+    /**
+     * Override the provider
+     * @default <matches root config>
+     */
+    provider?: WebFontsProviders;
+}
+interface WebFontProcessor {
+    getCSS?: (fonts: ResolvedWebFontMeta[], providers: Provider[], getCSSDefault: (fonts: ResolvedWebFontMeta[], providers: Provider[]) => Awaitable<string>) => Awaitable<string | undefined>;
+    transformCSS?: (css: string) => Promise<string | undefined>;
+}
+interface ResolvedWebFontMeta extends Omit<WebFontMeta, 'provider'> {
+    provider: Provider;
+}
+interface WebFontsOptions {
+    /**
+     * Provider service of the web fonts
+     * @default 'google'
+     */
+    provider?: WebFontsProviders;
+    /**
+     * The fonts
+     */
+    fonts?: Record<string, WebFontMeta | string | (WebFontMeta | string)[]>;
+    /**
+     * Extend fonts to the theme object
+     * @default true
+     */
+    extendTheme?: boolean;
+    /**
+     * Key for the theme object
+     *
+     * @default 'fontFamily'
+     */
+    themeKey?: string;
+    /**
+     * Inline CSS @import()
+     *
+     * @default true
+     */
+    inlineImports?: boolean;
+    /**
+     * Custom fetch function
+     *
+     * @default undefined
+     */
+    customFetch?: (url: string) => Promise<any>;
+    /**
+     * Custom processor for the font CSS
+     */
+    processors?: Arrayable<WebFontProcessor>;
+    /**
+     * Timeouts for fetching web fonts
+     */
+    timeouts?: false | {
+        /**
+         * Timeout for printing warning message
+         *
+         * @default 500
+         */
+        warning?: number;
+        /**
+         * Timeout for failing the fetch
+         *
+         * @default 2000
+         */
+        failure?: number;
+    };
+}
+interface Provider {
+    name: WebFontsProviders;
+    getPreflight?: (fonts: WebFontMeta[]) => string;
+    getImportUrl?: (fonts: WebFontMeta[]) => string | undefined;
+    getFontName?: (font: WebFontMeta) => string;
+}
+
+export type { Provider as P, ResolvedWebFontMeta as R, WebFontMeta as W, WebFontsProviders as a, WebFontsOptions as b, WebFontProcessor as c };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unocss/preset-web-fonts",
   "type": "module",
-  "version": "0.61.0",
+  "version": "0.61.3",
   "description": "Web Fonts support for Uno CSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -27,6 +27,10 @@
     ".": {
       "types": "./dist/index.d.mts",
       "default": "./dist/index.mjs"
+    },
+    "./local": {
+      "types": "./dist/local.d.mts",
+      "default": "./dist/local.mjs"
     }
   },
   "main": "dist/index.mjs",
@@ -38,7 +42,7 @@
   ],
   "dependencies": {
     "ofetch": "^1.3.4",
-    "@unocss/core": "0.61.0"
+    "@unocss/core": "0.61.3"
   },
   "scripts": {
     "build": "unbuild",