feat: ⚡ Download fonts on cache and put it on public folder (#10)

damianpumar · web-flow · commit c11c8a5fc88f · 2025-01-08T10:38:51.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-node_modules
+node_modules
+**/_fonts
diff --git a/lib/cache.ts b/lib/cache.ts
@@ -0,0 +1,8 @@
+import { createStorage } from 'unstorage';
+import fsDriver from 'unstorage/drivers/fs';
+
+export const cacheBase = 'node_modules/.cache/fontless';
+
+export const storage = createStorage({
+  driver: fsDriver({ base: cacheBase }),
+});
diff --git a/lib/css/assets.ts b/lib/css/assets.ts
@@ -0,0 +1,90 @@
+import fsp from 'node:fs/promises';
+import { hash } from 'ohash';
+import { extname, join } from 'pathe';
+import { filename } from 'pathe/utils';
+import { hasProtocol, joinRelativeURL, joinURL } from 'ufo';
+import type { FontFaceData } from 'unifont';
+import { storage } from '../cache';
+import type { Options, RawFontFaceData } from '../types';
+import { formatToExtension, parseFont } from './render';
+
+const renderedFontURLs = new Map<string, string>();
+
+export async function setupPublicAssetStrategy(options: Options) {
+  const { module } = options;
+
+  const assetsBaseURL = module.assets.prefix || '/fonts';
+
+  function normalizeFontData(
+    faces: RawFontFaceData | FontFaceData[],
+  ): FontFaceData[] {
+    const data: FontFaceData[] = [];
+    for (const face of Array.isArray(faces) ? faces : [faces]) {
+      data.push({
+        ...face,
+        unicodeRange:
+          face.unicodeRange === undefined || Array.isArray(face.unicodeRange)
+            ? face.unicodeRange
+            : [face.unicodeRange],
+        src: (Array.isArray(face.src) ? face.src : [face.src]).map((src) => {
+          const source = typeof src === 'string' ? parseFont(src) : src;
+          if (
+            'url' in source &&
+            hasProtocol(source.url, { acceptRelative: true })
+          ) {
+            source.url = source.url.replace(/^\/\//, 'https://');
+            const file = [
+              // TODO: investigate why negative ignore pattern below is being ignored
+              filename(source.url.replace(/\?.*/, '')).replace(/^-+/, ''),
+              hash(source) +
+                (extname(source.url) || formatToExtension(source.format) || ''),
+            ]
+              .filter(Boolean)
+              .join('-');
+
+            renderedFontURLs.set(file, source.url);
+            source.originalURL = source.url;
+
+            source.url = options.fontless.dev
+              ? joinRelativeURL(assetsBaseURL, file)
+              : joinURL(assetsBaseURL, file);
+          }
+
+          return source;
+        }),
+      });
+    }
+    return data;
+  }
+
+  const rollupBefore = async () => {
+    for (const [filename, url] of renderedFontURLs) {
+      const key = 'data:fonts:' + filename;
+      // Use storage to cache the font data between builds
+      let res = await storage.getItemRaw(key);
+      if (!res) {
+        res = await fetch(url)
+          .then((r) => r.arrayBuffer())
+          .then((r) => Buffer.from(r));
+
+        await storage.setItemRaw(key, res);
+      }
+
+      // TODO: investigate how we can improve in dev surround
+      await fsp.mkdir(join(options.fontless.baseURL, assetsBaseURL), {
+        recursive: true,
+      });
+
+      await fsp.writeFile(
+        joinRelativeURL(options.fontless.baseURL, assetsBaseURL, filename),
+        res,
+      );
+    }
+  };
+
+  options.hooks['rollup:before'] = rollupBefore;
+
+  return {
+    normalizeFontData,
+  };
+}
diff --git a/lib/css/transformer.ts b/lib/css/transformer.ts
@@ -1,39 +1,36 @@
+import type { CssNode, StyleSheet } from 'css-tree';
+import { parse, walk } from 'css-tree';
 import { transform } from 'esbuild';
 import { createJiti } from 'jiti';
 import MagicString from 'magic-string';
-import { parse, walk } from 'css-tree';
-import { dirname, extname } from 'pathe';
-import { hasProtocol, withLeadingSlash } from 'ufo';
+import { dirname } from 'pathe';
+import { withLeadingSlash } from 'ufo';
 import {
   createUnifont,
   type FontFaceData,
   type Provider,
   type RemoteFontSource,
 } from 'unifont';
+import type {
+  FontFaceResolution,
+  FontFamilyManualOverride,
+  FontFamilyProviderOverride,
+  ModuleOptions,
+  Options,
+} from '../types';
+import { setupPublicAssetStrategy } from './assets';
 import {
-  type GenericCSSFamily,
+  addLocalFallbacks,
+  extractEndOfFirstChild,
   extractFontFamilies,
   extractGeneric,
-  extractEndOfFirstChild,
-  addLocalFallbacks,
+  type GenericCSSFamily,
 } from './parse';
 import {
-  formatToExtension,
   generateFontFace,
   generateFontFallbacks,
-  parseFont,
   relativiseFontSources,
 } from './render';
-import { hash } from 'ohash';
-import { filename } from 'pathe/utils';
-import type {
-  ModuleOptions,
-  RawFontFaceData,
-  FontFamilyManualOverride,
-  FontFamilyProviderOverride,
-  Options,
-  FontFaceResolution,
-} from '../types';
 
 const defaultValues = {
   weights: [400],
@@ -76,6 +73,9 @@ async function defaultResolveFontFace(
   fallbackOptions,
 ) {
   const { module } = options;
+
+  const { normalizeFontData } = await setupPublicAssetStrategy(options);
+
   const override = module.families?.find((f) => f.name === fontFamily);
 
   // This CSS will be injected in a separate location
@@ -90,46 +90,6 @@ async function defaultResolveFontFace(
     return addLocalFallbacks(fontFamily, font);
   }
 
-  function normalizeFontData(
-    faces: RawFontFaceData | FontFaceData[],
-  ): FontFaceData[] {
-    // const assetsBaseURL = module.assets.prefix || "/fonts"; //TODO: Review this if it's necessary?
-    // const renderedFontURLs = new Map<string, string>(); //TODO: Review this if it's necessary?
-    const data: FontFaceData[] = [];
-    for (const face of Array.isArray(faces) ? faces : [faces]) {
-      data.push({
-        ...face,
-        unicodeRange:
-          face.unicodeRange === undefined || Array.isArray(face.unicodeRange)
-            ? face.unicodeRange
-            : [face.unicodeRange],
-        src: (Array.isArray(face.src) ? face.src : [face.src]).map((src) => {
-          const source = typeof src === 'string' ? parseFont(src) : src;
-          if (
-            'url' in source &&
-            hasProtocol(source.url, { acceptRelative: true })
-          ) {
-            source.url = source.url.replace(/^\/\//, 'https://');
-            const file = [
-              // TODO: investigate why negative ignore pattern below is being ignored
-              filename(source.url.replace(/\?.*/, '')).replace(/^-+/, ''),
-              hash(source) +
-                (extname(source.url) || formatToExtension(source.format) || ''),
-            ]
-              .filter(Boolean)
-              .join('-');
-
-            // renderedFontURLs.set(file, source.url); //TODO: Review this if it's necessary?
-            source.originalURL = source.url;
-            // source.url = joinURL(assetsBaseURL, file); //TODO: Review this if it's necessary?
-          }
-          return source;
-        }),
-      });
-    }
-    return data;
-  }
-
   async function resolveFontFaceWithOverride(
     fontFamily: string,
     override?: FontFamilyManualOverride | FontFamilyProviderOverride,
@@ -155,19 +115,16 @@ async function defaultResolveFontFace(
       normalizedDefaults.fallbacks[fallbackOptions?.generic || 'sans-serif'];
 
     if (override && 'src' in override) {
-      const fonts = addFallbacks(
-        fontFamily,
-        normalizeFontData({
-          src: override.src,
-          display: override.display,
-          weight: override.weight,
-          style: override.style,
-        }),
-      );
+      const fonts = normalizeFontData({
+        src: override.src,
+        display: override.display,
+        weight: override.weight,
+        style: override.style,
+      });
 
       return {
         fallbacks,
-        fonts,
+        fonts: addFallbacks(fontFamily, fonts),
       };
     }
 
@@ -267,7 +224,7 @@ export async function transformCSS(
   opts: { relative?: boolean } = {},
 ) {
   const { fontless } = options;
-  const s = new MagicString(code);
+  const string = new MagicString(code);
 
   const injectedDeclarations = new Set<string>();
 
@@ -356,11 +313,11 @@ export async function transformCSS(
       }
     }
 
-    s.prepend(prefaces.join(''));
+    string.prepend(prefaces.join(''));
 
     if (fallbackOptions && insertFontFamilies) {
       const insertedFamilies = fallbackMap.map((f) => `"${f.name}"`).join(', ');
-      s.prependLeft(fallbackOptions.index, `, ${insertedFamilies}`);
+      string.prependLeft(fallbackOptions.index, `, ${insertedFamilies}`);
     }
   }
 
@@ -433,7 +390,7 @@ export async function transformCSS(
 
   await Promise.all(promises);
 
-  return s;
+  return string;
 }
 
 async function resolveProviders(_providers: ModuleOptions['providers'] = {}) {
@@ -452,5 +409,6 @@ async function resolveProviders(_providers: ModuleOptions['providers'] = {}) {
       });
     }
   }
+
   return providers as Record<string, (options: any) => Provider>;
 }
diff --git a/lib/index.ts b/lib/index.ts
diff --git a/lib/types.ts b/lib/types.ts
@@ -9,6 +9,26 @@ import type {
 
 import type { GenericCSSFamily } from './css/parse';
 
+export interface FontProvider {
+  /**
+   * Resolve data for `@font-face` declarations.
+   *
+   * If nothing is returned then this provider doesn't handle the font family and we
+   * will continue calling `resolveFontFaces` in other providers.
+   */
+  resolveFontFaces?: (
+    fontFamily: string,
+    options: ResolveFontOptions,
+  ) => Awaitable<{
+    /**
+     * Return data used to generate @font-face declarations.
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
+     */
+    fonts: FontFaceData[];
+    fallbacks?: string[];
+  }>;
+}
+
 export type Awaitable<T> = T | Promise<T>;
 
 export interface FontFaceData {
@@ -43,13 +63,22 @@ export interface FontFaceResolution {
 }
 
 export interface FontlessOptions {
+  baseURL: string;
   dev: boolean;
   processCSSVariables?: boolean;
   shouldPreload: (fontFamily: string, font: FontFaceData) => boolean;
   fontsToPreload: Map<string, Set<string>>;
 }
 
+export interface ModuleHooks {
+  'rollup:before'?: (options: Options) => Awaitable<void>;
+  'fonts:providers'?: (
+    providers: Record<string, ProviderFactory | FontProvider>,
+  ) => void | Promise<void>;
+}
+
 export interface Options {
+  hooks: ModuleHooks;
   module: ModuleOptions;
   fontless: FontlessOptions;
 }
@@ -206,9 +235,3 @@ export interface ModuleOptions {
     processCSSVariables?: boolean;
   };
 }
-
-export interface ModuleHooks {
-  'fonts:providers': (
-    providers: Record<string, ProviderFactory | FontProvider>,
-  ) => void | Promise<void>;
-}
diff --git a/lib/vite/plugin.ts b/lib/vite/plugin.ts
@@ -1,10 +1,9 @@
+import type { transform, TransformOptions } from 'esbuild';
+import { providers } from 'unifont';
 import type { ESBuildOptions, Plugin } from 'vite';
-import type { FontlessOptions, Options } from '../types';
-import type { transform } from 'esbuild';
-import type { TransformOptions } from 'esbuild';
 import { transformCSS } from '../css/transformer';
-import { providers } from 'unifont';
 import local from '../providers/local';
+import type { FontlessOptions, Options } from '../types';
 
 const defaultModule = {
   devtools: true,
@@ -34,13 +33,15 @@ const defaultModule = {
 };
 
 const defaultFontless: FontlessOptions = {
-  dev: false,
+  baseURL: 'public',
+  dev: process.env.NODE_ENV !== 'production',
   processCSSVariables: false,
   shouldPreload: () => false,
   fontsToPreload: new Map(),
 };
 
-const defaultOptions = {
+const defaultOptions: Options = {
+  hooks: {},
   module: defaultModule,
   fontless: defaultFontless,
 };
@@ -108,6 +109,9 @@ export const fontless = (options: Options = defaultOptions): Plugin => {
 
       const s = await transformCSS(options, code, id, postcssOptions);
 
+      //TODO: Move this to a hook from vite
+      options.hooks['rollup:before']?.(options);
+
       if (s.hasChanged()) {
         return {
           code: s.toString(),
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "tinyglobby": "^0.2.10",
     "ufo": "^1.5.4",
     "unifont": "^0.1.6",
-    "vite": "^6.0.3"
+    "vite": "^6.0.3",
+    "unstorage": "^1.14.1"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`		`-node_modules`
	`1`	`+node_modules`
	`2`	`+**/_fonts`
Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,7 @@`
`30`	`30`	`"tinyglobby": "^0.2.10",`
`31`	`31`	`"ufo": "^1.5.4",`
`32`	`32`	`"unifont": "^0.1.6",`
`33`		`- "vite": "^6.0.3"`
	`33`	`+ "vite": "^6.0.3",`
	`34`	`+ "unstorage": "^1.14.1"`
`34`	`35`	`}`
`35`	`36`	`}`