vite-plugin-local-webfonts 0.1.1

package/README.md

@@ -0,0 +1,197 @@
+# Vite font plugin
+
+Download web fonts from [Google Fonts](https://fonts.google.com), [Bunny Fonts](https://fonts.bunny.net), [Fontshare](https://www.fontshare.com), [Adobe Fonts](https://fonts.adobe.com), and other sources into your Vite build output — no external CSS requests at runtime, full privacy, and easy to extend with additional font sources.
+
+## Features
+
+- Downloads font files at build time into `dist/fonts/` (configurable)
+- Generates a `fonts.css` stylesheet with `@font-face` rules, CSS variables, and utility classes
+- Injects the stylesheet and `<link rel="preload">` tags into your `index.html`
+- Serves the fonts from the dev server during development
+- Caches downloads in `node_modules/.cache/vite-plugin-fonts` for fast rebuilds
+- Built-in providers for Google Fonts, Bunny Fonts, Fontshare, and Adobe Fonts
+- Extensible: add any other font source with a few lines of code
+- Zero runtime dependencies
+
+## Installation
+
+```sh
+npm install -D vite-plugin-local-webfonts
+```
+
+## Usage
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import fonts, { adobe, bunny, fontshare, google } from 'vite-plugin-local-webfonts'
+
+export default defineConfig({
+    plugins: [
+        fonts({
+            fonts: [
+                google('Inter', {
+                    weights: [400, 700],
+                    styles: ['normal', 'italic'],
+                    fallbacks: ['ui-sans-serif', 'system-ui', 'sans-serif'],
+                }),
+                bunny('Roboto', { weights: [400, 700] }),
+                fontshare('Satoshi', { weights: [400, 700] }),
+                adobe('proxima-nova', 'https://use.typekit.net/abcdefg.css'),
+            ],
+        }),
+    ],
+})
+```
+
+On `vite build` this emits:
+
+```
+dist/
+  fonts/
+    inter-variable-normal-latin.woff2
+    inter-variable-italic-latin.woff2
+    roboto-400-normal-latin.woff2
+    fonts.css
+  index.html   (with <link rel="stylesheet" href="/fonts/fonts.css"> and preload tags injected)
+```
+
+The generated `fonts.css` contains the `@font-face` rules plus a CSS variable and a
+utility class per family:
+
+```css
+:root {
+  --font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;
+}
+
+.font-inter {
+  font-family: var(--font-inter);
+}
+```
+
+During `vite dev`, the fonts are served from the dev server and injected into the page automatically.
+
+## Font options
+
+| Option      | Default            | Description                                                                 |
+| ----------- | ------------------ | --------------------------------------------------------------------------- |
+| `weights`   | `[400]`            | Weights to download, e.g. `[400, 700]`.                                       |
+| `styles`    | `['normal']`       | `'normal'` and/or `'italic'`.                                                 |
+| `subsets`   | `['latin']`        | Subsets to keep, e.g. `['latin', 'latin-ext']`.                               |
+| `display`   | `'swap'`           | The `font-display` value.                                                     |
+| `preload`   | `true`             | Inject `<link rel="preload">` tags for the WOFF2 files.                       |
+| `fallbacks` | `[]`               | Fallback families appended in the CSS variable, e.g. `['system-ui', 'sans-serif']`. |
+| `alias`     | slug of the family | Used for the utility class (`.font-{alias}`).                                 |
+| `variable`  | `--font-{alias}`   | The CSS variable holding the font stack. Must start with `--`.                |
+
+## Plugin options
+
+| Option        | Default                                    | Description                                          |
+| ------------- | ------------------------------------------ | ---------------------------------------------------- |
+| `fonts`       | —                                          | Font definitions (required).                          |
+| `outputDir`   | `'fonts'`                                  | Directory inside the build output for fonts and CSS.  |
+| `cssFileName` | `'fonts.css'`                              | Name of the generated stylesheet.                     |
+| `cacheDir`    | `'node_modules/.cache/vite-plugin-fonts'`  | Where downloads are cached.                           |
+| `inject`      | `true`                                     | Inject stylesheet/preload tags into `index.html`.     |
+| `dev`         | `true`                                     | Serve and inject fonts during development.            |
+
+## Built-in providers
+
+| Provider    | Helper                                    | Notes                                                        |
+| ----------- | ----------------------------------------- | ------------------------------------------------------------ |
+| Google Fonts | `google(family, options?)`               | Uses the CSS2 API.                                            |
+| Bunny Fonts | `bunny(family, options?)`                | GDPR-friendly drop-in replacement for Google Fonts.           |
+| Fontshare   | `fontshare(family, options?)`            | Downloads WOFF2 only.                                         |
+| Adobe Fonts | `adobe(family, kitUrl, options?)`        | Requires your kit URL, e.g. `https://use.typekit.net/xyz.css`. |
+
+Each provider also exports its underlying `FontProvider` (`googleProvider`,
+`bunnyProvider`, `fontshareProvider`, `adobeProvider(kitUrl)`) in case you want
+to reuse it with `defineFont` directly.
+
+## Adding font sources
+
+Any source that serves CSS with `@font-face` rules can be added with
+`createCssApiProvider` — no changes to the plugin core required:
+
+```ts
+import fonts, { createCssApiProvider, defineFont } from 'vite-plugin-local-webfonts'
+
+const myFonts = createCssApiProvider({
+    name: 'my-fonts',
+    baseUrl: 'https://fonts.example.com/css2', // any Google-compatible CSS2 API
+})
+
+export default defineConfig({
+    plugins: [
+        fonts({
+            fonts: [
+                defineFont('My Font', myFonts, { weights: [400, 700] }),
+            ],
+        }),
+    ],
+})
+```
+
+### `createCssApiProvider` options
+
+| Option           | Default                       | Description                                                              |
+| ---------------- | ----------------------------- | ------------------------------------------------------------------------ |
+| `name`           | —                             | Provider name, used in error messages.                                    |
+| `baseUrl`        | —                             | Base URL of the CSS API.                                                  |
+| `buildUrl`       | Google CSS2 URL builder       | Build the request URL for a font definition.                              |
+| `headers`        | WOFF2-capable user agent      | Headers for CSS and font file requests (object or function).              |
+| `transformFaces` | —                             | Post-process parsed `@font-face` rules before filtering and downloading.  |
+| `filterSubsets`  | `true`                        | Filter rules by requested subsets using the CSS comment labels.           |
+| `formats`        | all                           | Only download these formats, e.g. `['woff2']`.                            |
+
+### Fully custom providers
+
+For sources without a CSS API, implement the `FontProvider` interface directly:
+
+```ts
+import type { FontProvider } from 'vite-plugin-local-webfonts'
+
+const myCdnProvider: FontProvider = {
+    name: 'my-cdn',
+    async resolve(definition, context) {
+        const variants = []
+
+        for (const weight of definition.weights) {
+            const url = `https://cdn.example.com/${definition.family}-${weight}.woff2`
+
+            variants.push({
+                weight,
+                style: 'normal',
+                files: [{
+                    source: await context.fetchFile(url), // downloaded & cached
+                    format: 'woff2',
+                }],
+            })
+        }
+
+        return variants
+    },
+}
+
+defineFont('My Font', myCdnProvider, { weights: [400, 700] })
+```
+
+The `context` provides `fetchText(url)` (cached text download), `fetchFile(url)`
+(cached binary download, resolves to the local file path), `parseFontFaces(css)`
+(the built-in `@font-face` parser), and `warn(message)`.
+
+## How it works
+
+1. For each configured family, the provider's CSS API is fetched (with a
+   WOFF2-capable user agent for Google/Bunny) and the `@font-face` rules are parsed.
+2. Rules are filtered to the requested family, weights, styles, and subsets.
+3. Referenced font files are downloaded into the cache directory.
+4. On build, files are emitted to `dist/<outputDir>/` with stable, readable names
+   (`inter-variable-normal-latin.woff2`) and a `fonts.css` stylesheet is generated
+   with relative URLs, so it works with any `base` configuration.
+5. The stylesheet link and preload tags are injected into `index.html`.
+6. In dev, the same flow serves files from the dev server under `/__fonts/`.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,230 @@
+import { Plugin } from 'vite';
+
+type FontFormat = 'woff2' | 'woff' | 'ttf' | 'otf' | 'eot';
+type FontStyle = 'normal' | 'italic';
+type FontWeight = number | string;
+type FontDisplay = 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+type FontOptions = {
+    /** @default [400] */
+    weights?: FontWeight[];
+    /** @default ['normal'] */
+    styles?: FontStyle[];
+    /** @default ['latin'] */
+    subsets?: string[];
+    /** @default 'swap' */
+    display?: FontDisplay;
+    /**
+     * Inject `<link rel="preload">` tags for the downloaded WOFF2 files.
+     *
+     * @default true
+     */
+    preload?: boolean;
+    /**
+     * Fallback font families appended after the downloaded family in the
+     * generated CSS variable, e.g. `['ui-sans-serif', 'system-ui', 'sans-serif']`.
+     *
+     * @default []
+     */
+    fallbacks?: string[];
+    /**
+     * Used to reference the font in the generated utility class
+     * (`.font-{alias}`). Defaults to a slug of the family name.
+     */
+    alias?: string;
+    /**
+     * CSS variable holding the font stack. Defaults to `--font-{alias}`.
+     */
+    variable?: string;
+};
+type FontDefinition = Required<FontOptions> & {
+    family: string;
+    provider: FontProvider;
+};
+type ResolvedFontFile = {
+    /** Absolute path of the downloaded file on disk. */
+    source: string;
+    format: FontFormat;
+    unicodeRange?: string;
+    /** Subset label (e.g. "latin"), used to build readable file names. */
+    subset?: string;
+};
+type ResolvedFontVariant = {
+    weight: FontWeight;
+    style: FontStyle;
+    files: ResolvedFontFile[];
+};
+type ResolvedFontFamily = {
+    definition: FontDefinition;
+    variants: ResolvedFontVariant[];
+};
+type ParsedFontFace = {
+    family: string;
+    style: FontStyle;
+    weight: FontWeight;
+    src: ParsedFontSrc[];
+    unicodeRange?: string;
+    display?: string;
+    /**
+     * The subset label from the CSS comment preceding the rule (e.g. "latin"),
+     * as emitted by the Google and Bunny CSS APIs.
+     */
+    subset?: string;
+};
+type ParsedFontSrc = {
+    url: string;
+    format: FontFormat;
+};
+/**
+ * Context handed to providers when resolving a font family. Providers use it
+ * to download CSS and font files (with caching) and to parse `@font-face` CSS.
+ */
+type FontProviderContext = {
+    /** Fetch a text resource, cached on disk. */
+    fetchText: (url: string, init?: RequestInit) => Promise<string>;
+    /** Fetch a binary file, cached on disk. Resolves to the cached file path. */
+    fetchFile: (url: string, init?: RequestInit) => Promise<string>;
+    /** Parse `@font-face` rules from CSS. */
+    parseFontFaces: (css: string) => ParsedFontFace[];
+    warn: (message: string) => void;
+};
+/**
+ * A font source. Implement this interface to add support for additional
+ * sources (Adobe Fonts, Fontshare, self-hosted CDNs, ...).
+ *
+ * For sources exposing a CSS API that returns `@font-face` rules, use the
+ * `createCssApiProvider` helper instead of implementing this by hand.
+ */
+interface FontProvider {
+    name: string;
+    resolve: (definition: FontDefinition, context: FontProviderContext) => Promise<ResolvedFontVariant[]>;
+}
+type FontsPluginOptions = {
+    /** Font families to download. */
+    fonts: FontDefinition[];
+    /**
+     * Directory (relative to the build output) for the font files and the
+     * generated stylesheet.
+     *
+     * @default 'fonts'
+     */
+    outputDir?: string;
+    /**
+     * Name of the generated stylesheet, inside `outputDir`.
+     *
+     * @default 'fonts.css'
+     */
+    cssFileName?: string;
+    /**
+     * Cache directory for downloaded CSS and font files.
+     *
+     * @default 'node_modules/.cache/vite-plugin-fonts'
+     */
+    cacheDir?: string;
+    /**
+     * Inject the stylesheet and preload links into `index.html`.
+     *
+     * @default true
+     */
+    inject?: boolean;
+    /**
+     * Serve the fonts from the dev server and inject them into `index.html`
+     * during development.
+     *
+     * @default true
+     */
+    dev?: boolean;
+};
+
+declare function fonts(options: FontsPluginOptions): Plugin;
+
+/**
+ * Create a font definition for any provider. Use this together with
+ * `createCssApiProvider` (or a hand-written provider) to support font
+ * sources beyond the built-in Google and Bunny providers.
+ */
+declare function defineFont(family: string, provider: FontProvider, options?: FontOptions): FontDefinition;
+
+declare function parseFontFaceCss(css: string): ParsedFontFace[];
+
+type CssApiProviderOptions = {
+    /** Provider name, used in error messages. */
+    name: string;
+    /**
+     * Base URL of the CSS API, e.g. `https://fonts.googleapis.com/css2`.
+     */
+    baseUrl: string;
+    /**
+     * Build the CSS request URL for a font family. Defaults to the
+     * Google Fonts CSS2 API format (`?family=X:ital,wght@...&display=...`),
+     * which Bunny Fonts also supports.
+     */
+    buildUrl?: (definition: FontDefinition, baseUrl: string) => string;
+    /**
+     * Headers sent with the CSS and font file requests. Defaults to a
+     * WOFF2-capable browser user agent, which the Google and Bunny CSS
+     * APIs require to serve WOFF2.
+     */
+    headers?: Record<string, string> | ((definition: FontDefinition) => Record<string, string>);
+    /**
+     * Post-process the parsed `@font-face` rules before filtering and
+     * downloading. Useful for kit-based APIs (e.g. Adobe Fonts) that
+     * return every family and weight in the kit.
+     */
+    transformFaces?: (faces: ParsedFontFace[], definition: FontDefinition) => ParsedFontFace[];
+    /**
+     * Filter the parsed rules by the requested subsets, using the subset
+     * labels in the CSS comments (e.g. `\/\* latin \*\/`). Disable for APIs
+     * whose comments are not subset labels (e.g. Fontshare labels rules with
+     * the family name).
+     *
+     * @default true
+     */
+    filterSubsets?: boolean;
+    /**
+     * Only download these formats, e.g. `['woff2']`. By default every
+     * format referenced in the CSS is downloaded.
+     */
+    formats?: FontFormat[];
+};
+/**
+ * Build the request URL for the Google Fonts CSS2 API
+ * (also supported by Bunny Fonts).
+ */
+declare function buildCss2Url(definition: FontDefinition, baseUrl: string): string;
+/**
+ * Create a font provider for any source that exposes a CSS API returning
+ * `@font-face` rules (Google Fonts, Bunny Fonts, Adobe Fonts, Fontshare, ...).
+ */
+declare function createCssApiProvider(options: CssApiProviderOptions): FontProvider;
+
+declare const googleProvider: FontProvider;
+declare const bunnyProvider: FontProvider;
+declare const fontshareProvider: FontProvider;
+/**
+ * Create a provider for an Adobe Fonts kit (https://fonts.adobe.com).
+ *
+ * The kit URL serves one CSS file containing every family in the kit; the
+ * plugin automatically keeps only the requested family, weights, and styles.
+ */
+declare function adobeProvider(kitUrl: string): FontProvider;
+/**
+ * Download a family from Google Fonts (https://fonts.google.com).
+ */
+declare function google(family: string, options?: FontOptions): FontDefinition;
+/**
+ * Download a family from Bunny Fonts (https://fonts.bunny.net), a GDPR-friendly
+ * drop-in replacement for Google Fonts.
+ */
+declare function bunny(family: string, options?: FontOptions): FontDefinition;
+/**
+ * Download a family from Fontshare (https://www.fontshare.com).
+ */
+declare function fontshare(family: string, options?: FontOptions): FontDefinition;
+/**
+ * Download a family from an Adobe Fonts kit (https://fonts.adobe.com).
+ *
+ * Pass your kit URL, e.g. `adobe('proxima-nova', 'https://use.typekit.net/abcdefg.css')`.
+ */
+declare function adobe(family: string, kitUrl: string, options?: FontOptions): FontDefinition;
+
+export { type CssApiProviderOptions, type FontDefinition, type FontDisplay, type FontFormat, type FontOptions, type FontProvider, type FontProviderContext, type FontStyle, type FontWeight, type FontsPluginOptions, type ParsedFontFace, type ParsedFontSrc, type ResolvedFontFamily, type ResolvedFontFile, type ResolvedFontVariant, adobe, adobeProvider, buildCss2Url, bunny, bunnyProvider, createCssApiProvider, fonts as default, defineFont, fonts, fontshare, fontshareProvider, google, googleProvider, parseFontFaceCss };

package/dist/index.js

@@ -0,0 +1,764 @@
+// src/plugin.ts
+import fs3 from "fs";
+import path2 from "path";
+
+// src/cache.ts
+import { createHash } from "crypto";
+import fs from "fs";
+import path from "path";
+var DEFAULT_CACHE_DIR = "node_modules/.cache/vite-plugin-fonts";
+function resolveCacheDir(projectRoot, cacheDir) {
+  const dir = cacheDir ?? path.resolve(projectRoot, DEFAULT_CACHE_DIR);
+  fs.mkdirSync(dir, { recursive: true });
+  return dir;
+}
+function cacheKey(input) {
+  return createHash("sha256").update(input).digest("hex").slice(0, 16);
+}
+function readCache(cacheDir, key) {
+  const filePath = path.join(cacheDir, key);
+  return fs.existsSync(filePath) ? fs.readFileSync(filePath) : void 0;
+}
+function writeCache(cacheDir, key, data) {
+  fs.writeFileSync(path.join(cacheDir, key), data);
+}
+async function fetchOrThrow(url, init) {
+  const response = await fetch(url, init);
+  if (!response.ok) {
+    throw new Error(
+      `vite-plugin-fonts: Failed to fetch "${url}": ${response.status} ${response.statusText}`
+    );
+  }
+  return response;
+}
+async function fetchAndCache(url, cacheDir, init) {
+  const key = cacheKey(url);
+  const cached = readCache(cacheDir, key);
+  if (cached) {
+    return cached;
+  }
+  const response = await fetchOrThrow(url, init);
+  const buffer = Buffer.from(await response.arrayBuffer());
+  writeCache(cacheDir, key, buffer);
+  return buffer;
+}
+async function fetchTextAndCache(url, cacheDir, init) {
+  const key = cacheKey(url + ":text");
+  const cached = readCache(cacheDir, key);
+  if (cached) {
+    return cached.toString("utf-8");
+  }
+  const response = await fetchOrThrow(url, init);
+  const text = await response.text();
+  writeCache(cacheDir, key, text);
+  return text;
+}
+
+// src/config.ts
+function familyToSlug(family) {
+  return family.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+}
+function defineFont(family, provider, options = {}) {
+  const alias = options.alias ?? familyToSlug(family);
+  return {
+    family,
+    provider,
+    alias,
+    variable: options.variable ?? `--font-${alias}`,
+    weights: options.weights ?? [400],
+    styles: options.styles ?? ["normal"],
+    subsets: options.subsets ?? ["latin"],
+    display: options.display ?? "swap",
+    preload: options.preload ?? true,
+    fallbacks: options.fallbacks ?? []
+  };
+}
+function validateFonts(fonts2) {
+  const aliases = /* @__PURE__ */ new Set();
+  const variables = /* @__PURE__ */ new Set();
+  for (const font of fonts2) {
+    if (typeof font.family !== "string" || font.family.trim() === "") {
+      throw new Error("vite-plugin-fonts: Font family name must be a non-empty string.");
+    }
+    if (typeof font.alias !== "string" || font.alias.trim() === "") {
+      throw new Error(
+        `vite-plugin-fonts: Font "${font.family}" has an invalid or empty alias.`
+      );
+    }
+    if (!font.variable.startsWith("--")) {
+      throw new Error(
+        `vite-plugin-fonts: Font "${font.family}" variable "${font.variable}" must start with "--".`
+      );
+    }
+    if (typeof font.provider?.resolve !== "function") {
+      throw new Error(
+        `vite-plugin-fonts: Font "${font.family}" has an invalid provider. Use google(), bunny(), defineFont() with a custom provider, or createCssApiProvider().`
+      );
+    }
+    if (aliases.has(font.alias)) {
+      throw new Error(
+        `vite-plugin-fonts: Duplicate font alias "${font.alias}". Each alias must be unique. Use the "alias" option to disambiguate.`
+      );
+    }
+    aliases.add(font.alias);
+    if (variables.has(font.variable)) {
+      throw new Error(
+        `vite-plugin-fonts: Duplicate CSS variable "${font.variable}". Use the "variable" option to set a unique variable name.`
+      );
+    }
+    variables.add(font.variable);
+  }
+  return fonts2;
+}
+
+// src/css.ts
+var FORMAT_KEYWORDS = {
+  woff2: "woff2",
+  woff: "woff",
+  ttf: "truetype",
+  otf: "opentype",
+  eot: "embedded-opentype"
+};
+function generateSrc(files, urlMap) {
+  return files.map((file) => `url("${urlMap.get(file.source) ?? file.source}") format("${FORMAT_KEYWORDS[file.format]}")`).join(",\n    ");
+}
+function generateFontFaces(family, urlMap) {
+  const rules = [];
+  const { definition } = family;
+  for (const variant of family.variants) {
+    const rangedFiles = variant.files.filter((f) => f.unicodeRange);
+    const nonRangedFiles = variant.files.filter((f) => !f.unicodeRange);
+    const rangeGroups = /* @__PURE__ */ new Map();
+    for (const file of rangedFiles) {
+      const group = rangeGroups.get(file.unicodeRange) ?? [];
+      group.push(file);
+      rangeGroups.set(file.unicodeRange, group);
+    }
+    for (const [unicodeRange, files] of rangeGroups) {
+      rules.push([
+        "@font-face {",
+        `  font-family: "${definition.family}";`,
+        `  font-style: ${variant.style};`,
+        `  font-weight: ${String(variant.weight)};`,
+        `  font-display: ${definition.display};`,
+        `  src: ${generateSrc(files, urlMap)};`,
+        `  unicode-range: ${unicodeRange};`,
+        "}"
+      ].join("\n"));
+    }
+    if (nonRangedFiles.length > 0) {
+      rules.push([
+        "@font-face {",
+        `  font-family: "${definition.family}";`,
+        `  font-style: ${variant.style};`,
+        `  font-weight: ${String(variant.weight)};`,
+        `  font-display: ${definition.display};`,
+        `  src: ${generateSrc(nonRangedFiles, urlMap)};`,
+        "}"
+      ].join("\n"));
+    }
+  }
+  return rules.join("\n\n");
+}
+function familyVariableDeclaration(family) {
+  const { definition } = family;
+  const parts = [`"${definition.family}"`, ...definition.fallbacks];
+  return `${definition.variable}: ${parts.join(", ")};`;
+}
+function generateCssVariables(families) {
+  const lines = families.map((family) => `  ${familyVariableDeclaration(family)}`);
+  return [":root {", ...lines, "}"].join("\n");
+}
+function generateFontClass(family) {
+  const { definition } = family;
+  return `.font-${definition.alias} {
+  font-family: var(${definition.variable});
+}`;
+}
+function generateFontCss(families, urlMap) {
+  const parts = families.map((family) => generateFontFaces(family, urlMap));
+  parts.push(generateCssVariables(families));
+  parts.push(families.map(generateFontClass).join("\n\n"));
+  return parts.join("\n\n") + "\n";
+}
+
+// src/css-parser.ts
+var FORMAT_ALIASES = {
+  woff2: "woff2",
+  woff: "woff",
+  truetype: "ttf",
+  ttf: "ttf",
+  opentype: "otf",
+  otf: "otf",
+  "embedded-opentype": "eot",
+  eot: "eot"
+};
+function parseFontFaceCss(css) {
+  const results = [];
+  const ruleRegex = /(?:\/\*\s*([\w-]+)\s*\*\/\s*)?@font-face\s*\{([^}]+)\}/g;
+  let match;
+  while ((match = ruleRegex.exec(css)) !== null) {
+    const subset = match[1];
+    const block = match[2];
+    const face = parseFontFaceBlock(block);
+    if (face) {
+      results.push(subset ? { ...face, subset } : face);
+    }
+  }
+  return results;
+}
+function parseFontFaceBlock(block) {
+  const family = extractDescriptor(block, "font-family");
+  const style = extractDescriptor(block, "font-style");
+  const weight = extractDescriptor(block, "font-weight");
+  const src = extractDescriptor(block, "src");
+  const unicodeRange = extractDescriptor(block, "unicode-range");
+  const display = extractDescriptor(block, "font-display");
+  if (!family || !src) {
+    return null;
+  }
+  const parsedSrc = parseSrcDescriptor(src);
+  if (parsedSrc.length === 0) {
+    return null;
+  }
+  return {
+    family: family.replace(/['"]/g, "").trim(),
+    style: style ?? "normal",
+    weight: parseWeight(weight ?? "400"),
+    src: parsedSrc,
+    unicodeRange: unicodeRange ?? void 0,
+    display: display ?? void 0
+  };
+}
+function extractDescriptor(block, name) {
+  const match = new RegExp(`${name}\\s*:\\s*([^;]+)`, "i").exec(block);
+  return match?.[1]?.trim() ?? null;
+}
+function parseSrcDescriptor(src) {
+  const results = [];
+  const urlRegex = /url\(["']?([^"')]+)["']?\)\s*format\(["']?([^"')]+)["']?\)/g;
+  let match;
+  while ((match = urlRegex.exec(src)) !== null) {
+    const format = normalizeFormat(match[2]);
+    if (format) {
+      results.push({ url: match[1], format });
+    }
+  }
+  if (results.length === 0) {
+    const simpleUrlRegex = /url\(["']?([^"')]+)["']?\)/g;
+    while ((match = simpleUrlRegex.exec(src)) !== null) {
+      const url = match[1];
+      const format = inferFormatFromUrl(url);
+      if (format) {
+        results.push({ url, format });
+      }
+    }
+  }
+  return results;
+}
+function parseWeight(weight) {
+  const trimmed = weight.trim();
+  return /^\d+$/.test(trimmed) ? parseInt(trimmed, 10) : trimmed;
+}
+function normalizeFormat(format) {
+  return FORMAT_ALIASES[format.toLowerCase()] ?? null;
+}
+function inferFormatFromUrl(url) {
+  const ext = url.match(/\.([^.]+)$/)?.[1];
+  return ext ? normalizeFormat(ext) : null;
+}
+
+// src/dev-server.ts
+import fs2 from "fs";
+
+// src/types.ts
+var FORMAT_MIME = {
+  woff2: "font/woff2",
+  woff: "font/woff",
+  ttf: "font/ttf",
+  otf: "font/otf",
+  eot: "application/vnd.ms-fontobject"
+};
+
+// src/dev-server.ts
+var DEV_FONT_ROUTE_PREFIX = "/__fonts";
+function buildDevUrlMap(families, fileNames) {
+  const urlMap = /* @__PURE__ */ new Map();
+  for (const family of families) {
+    for (const variant of family.variants) {
+      for (const file of variant.files) {
+        if (!urlMap.has(file.source)) {
+          urlMap.set(file.source, `${DEV_FONT_ROUTE_PREFIX}/${fileNames.get(file.source)}`);
+        }
+      }
+    }
+  }
+  return urlMap;
+}
+function createFontMiddleware() {
+  let lookup = /* @__PURE__ */ new Map();
+  let ready = Promise.resolve();
+  function update(families, fileNames) {
+    const newLookup = /* @__PURE__ */ new Map();
+    for (const family of families) {
+      for (const variant of family.variants) {
+        for (const file of variant.files) {
+          const name = fileNames.get(file.source);
+          if (name) {
+            newLookup.set(name, { source: file.source, format: file.format });
+          }
+        }
+      }
+    }
+    lookup = newLookup;
+  }
+  function setReady(promise) {
+    ready = promise;
+  }
+  function middleware(req, res, next) {
+    if (!req.url?.startsWith(DEV_FONT_ROUTE_PREFIX + "/")) {
+      return next();
+    }
+    ready.then(() => {
+      const name = decodeURIComponent(req.url.slice(DEV_FONT_ROUTE_PREFIX.length + 1).split("?")[0]);
+      const entry = lookup.get(name);
+      if (!entry || !fs2.existsSync(entry.source)) {
+        res.statusCode = 404;
+        res.end("Font not found");
+        return;
+      }
+      res.setHeader("Content-Type", FORMAT_MIME[entry.format] ?? "application/octet-stream");
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Cache-Control", "public, max-age=3600");
+      const stream = fs2.createReadStream(entry.source);
+      stream.on("error", (err) => {
+        if (!res.headersSent) {
+          res.statusCode = 500;
+        }
+        res.destroy(err);
+      });
+      res.on("close", () => {
+        stream.destroy();
+      });
+      stream.pipe(res);
+    }, next);
+  }
+  return { middleware, update, setReady };
+}
+
+// src/naming.ts
+function assignFileNames(families) {
+  const names = /* @__PURE__ */ new Map();
+  const used = /* @__PURE__ */ new Map();
+  const sourceWeightMap = buildSourceWeightMap(families);
+  for (const family of families) {
+    const slug = familyToSlug(family.definition.family);
+    for (const variant of family.variants) {
+      for (const file of variant.files) {
+        if (names.has(file.source)) {
+          continue;
+        }
+        const shared = (sourceWeightMap.get(file.source)?.get(variant.style)?.size ?? 0) > 1;
+        const weight = shared ? "variable" : String(variant.weight).replace(/\s+/g, "-");
+        const parts = [slug, weight, variant.style];
+        if (file.subset) {
+          parts.push(file.subset);
+        }
+        const ext = `.${file.format}`;
+        let name = parts.join("-") + ext;
+        const existing = used.get(name);
+        if (existing !== void 0 && existing !== file.source) {
+          name = `${parts.join("-")}-${cacheKey(file.source).slice(0, 8)}${ext}`;
+        }
+        used.set(name, file.source);
+        names.set(file.source, name);
+      }
+    }
+  }
+  return names;
+}
+function buildSourceWeightMap(families) {
+  const sourceWeightMap = /* @__PURE__ */ new Map();
+  for (const family of families) {
+    for (const variant of family.variants) {
+      for (const file of variant.files) {
+        if (!sourceWeightMap.has(file.source)) {
+          sourceWeightMap.set(file.source, /* @__PURE__ */ new Map());
+        }
+        const styleWeights = sourceWeightMap.get(file.source);
+        if (!styleWeights.has(variant.style)) {
+          styleWeights.set(variant.style, /* @__PURE__ */ new Set());
+        }
+        styleWeights.get(variant.style).add(String(variant.weight));
+      }
+    }
+  }
+  return sourceWeightMap;
+}
+
+// src/plugin.ts
+function withBase(base, filePath) {
+  if (base === "") {
+    return filePath;
+  }
+  if (base === "./") {
+    return `./${filePath}`;
+  }
+  return `${base.endsWith("/") ? base : `${base}/`}${filePath}`;
+}
+function createProviderContext(cacheDir, warn) {
+  return {
+    fetchText: (url, init) => fetchTextAndCache(url, cacheDir, init),
+    fetchFile: async (url, init) => {
+      await fetchAndCache(url, cacheDir, init);
+      return path2.join(cacheDir, cacheKey(url));
+    },
+    parseFontFaces: parseFontFaceCss,
+    warn
+  };
+}
+function collectPreloadUrls(families, urlMap) {
+  const urls = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const family of families) {
+    if (family.definition.preload === false) {
+      continue;
+    }
+    for (const variant of family.variants) {
+      for (const file of variant.files) {
+        if (file.format !== "woff2") {
+          continue;
+        }
+        const url = urlMap.get(file.source);
+        if (url && !seen.has(url)) {
+          seen.add(url);
+          urls.push(url);
+        }
+      }
+    }
+  }
+  return urls;
+}
+function preloadTags(urls) {
+  return urls.map((url) => ({
+    tag: "link",
+    injectTo: "head-prepend",
+    attrs: {
+      rel: "preload",
+      href: url,
+      as: "font",
+      type: "font/woff2",
+      crossorigin: "anonymous"
+    }
+  }));
+}
+function fonts(options) {
+  const definitions = validateFonts(options.fonts ?? []);
+  const outputDir = (options.outputDir ?? "fonts").replace(/^\/+|\/+$/g, "");
+  const cssFileName = options.cssFileName ?? "fonts.css";
+  const inject = options.inject ?? true;
+  const dev = options.dev ?? true;
+  let config;
+  let cacheDir;
+  let resolvedFamilies = [];
+  let fileNames = /* @__PURE__ */ new Map();
+  let buildTags = [];
+  let pendingEmissions = null;
+  let emitted = false;
+  let devReady = Promise.resolve();
+  let devFailed = false;
+  async function resolveFamilies(warn) {
+    const context = createProviderContext(cacheDir, warn);
+    const families = [];
+    for (const definition of definitions) {
+      families.push({
+        definition,
+        variants: await definition.provider.resolve(definition, context)
+      });
+    }
+    resolvedFamilies = families;
+    fileNames = assignFileNames(families);
+  }
+  return {
+    name: "vite-plugin-fonts",
+    configResolved(resolved) {
+      config = resolved;
+      cacheDir = resolveCacheDir(resolved.root, options.cacheDir);
+    },
+    async buildStart() {
+      if (config.command !== "build" || config.build.ssr || definitions.length === 0) {
+        return;
+      }
+      await resolveFamilies((message) => this.warn(message));
+      const cssUrlMap = /* @__PURE__ */ new Map();
+      const publicUrlMap = /* @__PURE__ */ new Map();
+      for (const [source, name] of fileNames) {
+        cssUrlMap.set(source, `./${name}`);
+        publicUrlMap.set(source, withBase(config.base, `${outputDir}/${name}`));
+      }
+      const css = generateFontCss(resolvedFamilies, cssUrlMap);
+      const cssPath = `${outputDir}/${cssFileName}`;
+      buildTags = [
+        ...preloadTags(collectPreloadUrls(resolvedFamilies, publicUrlMap)),
+        {
+          tag: "link",
+          injectTo: "head",
+          attrs: { rel: "stylesheet", href: withBase(config.base, cssPath) }
+        }
+      ];
+      pendingEmissions = { css, cssPath };
+    },
+    generateBundle() {
+      if (config.command !== "build" || config.build.ssr || !pendingEmissions) {
+        return;
+      }
+      const emittedSources = /* @__PURE__ */ new Set();
+      for (const family of resolvedFamilies) {
+        for (const variant of family.variants) {
+          for (const file of variant.files) {
+            if (emittedSources.has(file.source)) {
+              continue;
+            }
+            emittedSources.add(file.source);
+            this.emitFile({
+              type: "asset",
+              fileName: `${outputDir}/${fileNames.get(file.source)}`,
+              source: fs3.readFileSync(file.source)
+            });
+          }
+        }
+      }
+      this.emitFile({
+        type: "asset",
+        fileName: pendingEmissions.cssPath,
+        source: pendingEmissions.css
+      });
+      emitted = true;
+    },
+    transformIndexHtml: {
+      order: "post",
+      async handler() {
+        if (!inject || definitions.length === 0) {
+          return [];
+        }
+        if (config.command === "build") {
+          return emitted ? buildTags : [];
+        }
+        if (!dev) {
+          return [];
+        }
+        await devReady;
+        if (devFailed || resolvedFamilies.length === 0) {
+          return [];
+        }
+        const urlMap = buildDevUrlMap(resolvedFamilies, fileNames);
+        return [
+          ...preloadTags(collectPreloadUrls(resolvedFamilies, urlMap)),
+          {
+            tag: "style",
+            injectTo: "head",
+            children: generateFontCss(resolvedFamilies, urlMap)
+          }
+        ];
+      }
+    },
+    configureServer(server) {
+      if (!dev || definitions.length === 0) {
+        return;
+      }
+      const fontMiddleware = createFontMiddleware();
+      server.middlewares.use(fontMiddleware.middleware);
+      const ready = (async () => {
+        try {
+          await resolveFamilies((message) => server.config.logger.warn(`[vite-plugin-fonts] ${message}`));
+          fontMiddleware.update(resolvedFamilies, fileNames);
+        } catch (error) {
+          devFailed = true;
+          server.config.logger.error(`[vite-plugin-fonts] ${error.message}`);
+        }
+      })();
+      fontMiddleware.setReady(ready);
+      devReady = ready;
+    }
+  };
+}
+
+// src/providers/css-api.ts
+var WOFF2_USER_AGENT = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36";
+var FORMAT_PREFERENCE = ["woff2", "woff", "ttf", "otf", "eot"];
+function buildCss2Url(definition, baseUrl) {
+  const family = definition.family.replace(/ /g, "+");
+  const hasItalic = definition.styles.includes("italic");
+  const axes = hasItalic ? ["ital", "wght"] : ["wght"];
+  const tuples = /* @__PURE__ */ new Set();
+  for (const weight of definition.weights) {
+    for (const style of definition.styles) {
+      tuples.add(hasItalic ? `${style === "italic" ? "1" : "0"},${weight}` : `${weight}`);
+    }
+  }
+  const axisStr = axes.join(",");
+  const tupleStr = [...tuples].sort().join(";");
+  return `${baseUrl}?family=${family}:${axisStr}@${tupleStr}&display=${definition.display}`;
+}
+function createCssApiProvider(options) {
+  const buildUrl = options.buildUrl ?? buildCss2Url;
+  return {
+    name: options.name,
+    async resolve(definition, context) {
+      const url = buildUrl(definition, options.baseUrl);
+      const headers = typeof options.headers === "function" ? options.headers(definition) : options.headers ?? { "User-Agent": WOFF2_USER_AGENT };
+      const css = await context.fetchText(url, { headers });
+      let faces = context.parseFontFaces(css);
+      if (options.transformFaces) {
+        faces = options.transformFaces(faces, definition);
+      }
+      faces = filterFaces(faces, definition, options.name, options.filterSubsets ?? true);
+      return downloadFaces(faces, definition, context, headers, options.formats);
+    }
+  };
+}
+function filterFaces(faces, definition, providerName, filterSubsets) {
+  if (faces.length === 0) {
+    throw new Error(
+      `vite-plugin-fonts: ${providerName} returned no @font-face rules for "${definition.family}". Check the family name and requested weights/styles.`
+    );
+  }
+  const familyFaces = faces.filter(
+    (face) => face.family.toLowerCase() === definition.family.toLowerCase()
+  );
+  if (familyFaces.length === 0) {
+    const available = [...new Set(faces.map((face) => face.family))];
+    throw new Error(
+      `vite-plugin-fonts: ${providerName} returned no @font-face rules for family "${definition.family}". Available families: [${available.join(", ")}].`
+    );
+  }
+  const requestedWeights = definition.weights.map(String);
+  const requestedWeightsAreNumeric = requestedWeights.every((weight) => /^\d+$/.test(weight));
+  const variantFaces = familyFaces.filter((face) => {
+    if (!definition.styles.includes(face.style)) {
+      return false;
+    }
+    if (requestedWeightsAreNumeric && /^\d+$/.test(String(face.weight))) {
+      return requestedWeights.includes(String(face.weight));
+    }
+    return true;
+  });
+  if (variantFaces.length === 0) {
+    const availableWeights = [...new Set(familyFaces.map((face) => String(face.weight)))];
+    const availableStyles = [...new Set(familyFaces.map((face) => face.style))];
+    throw new Error(
+      `vite-plugin-fonts: ${providerName} returned no @font-face rules matching the requested weights [${requestedWeights.join(", ")}] and styles [${definition.styles.join(", ")}] for "${definition.family}". Available weights: [${availableWeights.join(", ")}], styles: [${availableStyles.join(", ")}].`
+    );
+  }
+  if (!filterSubsets) {
+    return variantFaces.map((face) => ({ ...face, subset: void 0 }));
+  }
+  const subsetFaces = variantFaces.filter(
+    (face) => !face.subset || definition.subsets.includes(face.subset)
+  );
+  if (subsetFaces.length === 0) {
+    const available = [...new Set(familyFaces.map((face) => face.subset).filter(Boolean))];
+    throw new Error(
+      `vite-plugin-fonts: ${providerName} returned no @font-face rules matching the requested subsets [${definition.subsets.join(", ")}] for "${definition.family}". Available subsets: [${available.join(", ")}].`
+    );
+  }
+  return subsetFaces;
+}
+async function downloadFaces(faces, definition, context, headers, formats) {
+  const variants = [];
+  for (const face of faces) {
+    const files = [];
+    for (const src of face.src) {
+      if (formats && !formats.includes(src.format)) {
+        continue;
+      }
+      const url = src.url.startsWith("//") ? `https:${src.url}` : src.url;
+      files.push({
+        source: await context.fetchFile(url, { headers }),
+        format: src.format,
+        unicodeRange: face.unicodeRange,
+        subset: face.subset
+      });
+    }
+    if (files.length === 0) {
+      continue;
+    }
+    files.sort((a, b) => FORMAT_PREFERENCE.indexOf(a.format) - FORMAT_PREFERENCE.indexOf(b.format));
+    variants.push({ weight: face.weight, style: face.style, files });
+  }
+  return sortVariants(variants);
+}
+function sortVariants(variants) {
+  const weight = (value) => {
+    const parsed = parseInt(String(value), 10);
+    return Number.isNaN(parsed) ? 400 : parsed;
+  };
+  return variants.sort((a, b) => {
+    if (weight(a.weight) !== weight(b.weight)) {
+      return weight(a.weight) - weight(b.weight);
+    }
+    if (a.style !== b.style) {
+      return a.style.localeCompare(b.style);
+    }
+    const rangeA = a.files[0]?.unicodeRange ?? "";
+    const rangeB = b.files[0]?.unicodeRange ?? "";
+    return rangeA.localeCompare(rangeB);
+  });
+}
+
+// src/providers/index.ts
+var googleProvider = createCssApiProvider({
+  name: "google",
+  baseUrl: "https://fonts.googleapis.com/css2"
+});
+var bunnyProvider = createCssApiProvider({
+  name: "bunny",
+  baseUrl: "https://fonts.bunny.net/css2"
+});
+var fontshareProvider = createCssApiProvider({
+  name: "fontshare",
+  baseUrl: "https://api.fontshare.com/v2/css",
+  buildUrl: (definition, baseUrl) => `${baseUrl}?f[]=${definition.family.toLowerCase().replace(/ /g, "-")}@${definition.weights.join(",")}&display=${definition.display}`,
+  // Fontshare labels its rules with the family name instead of a subset.
+  filterSubsets: false,
+  formats: ["woff2"]
+});
+function adobeProvider(kitUrl) {
+  return createCssApiProvider({
+    name: "adobe",
+    baseUrl: kitUrl,
+    buildUrl: (_definition, baseUrl) => baseUrl,
+    headers: {}
+  });
+}
+function google(family, options) {
+  return defineFont(family, googleProvider, options);
+}
+function bunny(family, options) {
+  return defineFont(family, bunnyProvider, options);
+}
+function fontshare(family, options) {
+  return defineFont(family, fontshareProvider, options);
+}
+function adobe(family, kitUrl, options) {
+  return defineFont(family, adobeProvider(kitUrl), options);
+}
+
+// src/index.ts
+var index_default = fonts;
+export {
+  adobe,
+  adobeProvider,
+  buildCss2Url,
+  bunny,
+  bunnyProvider,
+  createCssApiProvider,
+  index_default as default,
+  defineFont,
+  fonts,
+  fontshare,
+  fontshareProvider,
+  google,
+  googleProvider,
+  parseFontFaceCss
+};

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "vite-plugin-local-webfonts",
+  "version": "0.1.1",
+  "description": "Download web fonts (Google Fonts, Bunny Fonts, and more) into your Vite build output",
+  "author": "NietThijmen <53520119+NietThijmen@users.noreply.github.com>",
+  "homepage": "https://github.com/NietThijmen/vite-fonts#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NietThijmen/vite-fonts.git"
+  },
+  "bugs": {
+    "url": "https://github.com/NietThijmen/vite-fonts/issues"
+  },
+  "keywords": [
+    "vite",
+    "plugin",
+    "fonts",
+    "google-fonts",
+    "bunny-fonts",
+    "fontshare",
+    "adobe-fonts",
+    "webfonts",
+    "download",
+    "privacy",
+    "performance"
+  ],
+  "type": "module",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "vite": ">=5.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^26.4.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.7",
+    "vitest": "^3.0.5"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}