fontaine 0.8.0 → 0.8.2

package/dist/metrics-DgPzfV2U.mjs

@@ -0,0 +1,354 @@
+import { generate, parse, walk } from "css-tree";
+import { char, charIn, createRegExp, oneOrMore } from "magic-regexp";
+import { isAbsolute } from "pathe";
+import { hasProtocol, parseURL } from "ufo";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { fromUrl } from "@capsizecss/unpack";
+import { fromFile } from "@capsizecss/unpack/fs";
+//#region src/css.ts
+function toPercentage(value, fractionDigits = 4) {
+	return `${+(value * 100).toFixed(fractionDigits)}%`;
+}
+function toCSS(properties, indent = 2) {
+	return Object.entries(properties).map(([key, value]) => `${" ".repeat(indent)}${key}: ${value};`).join("\n");
+}
+const QUOTES_RE = createRegExp(charIn("\"'").at.lineStart().or(charIn("\"'").at.lineEnd()), ["g"]);
+const withoutQuotes = (str) => str.trim().replace(QUOTES_RE, "");
+const QUERY_OR_FRAGMENT_RE = createRegExp(charIn("?#").and(oneOrMore(char).optionally()).at.lineEnd());
+/** Removes any `?query` or `#fragment` suffix, which is not part of the file a URL points to. */
+function withoutQueryOrFragment(source) {
+	return source.replace(QUERY_OR_FRAGMENT_RE, "");
+}
+/**
+* Whether a CSS URL may be resolved relative to the stylesheet that declared it, as opposed to
+* the document root (`/font.woff2`) or an external location (`https:`, `//`, `data:`).
+*
+* Bare package specifiers and the webpack `~` convention are indistinguishable from
+* stylesheet-relative paths here, so callers should fall back to their own resolver when
+* resolving against the stylesheet finds nothing.
+*/
+function isStylesheetRelative(source) {
+	return !hasProtocol(source, { acceptRelative: true }) && !isAbsolute(source);
+}
+const cssWideKeywords = /* @__PURE__ */ new Set([
+	"inherit",
+	"initial",
+	"revert",
+	"revert-layer",
+	"unset"
+]);
+const genericCSSFamilies = /* @__PURE__ */ new Set([
+	"serif",
+	"sans-serif",
+	"monospace",
+	"cursive",
+	"fantasy",
+	"system-ui",
+	"ui-serif",
+	"ui-sans-serif",
+	"ui-monospace",
+	"ui-rounded",
+	"emoji",
+	"math",
+	"fangsong"
+]);
+const genericFamilyLocals = {
+	"serif": [
+		"Times New Roman",
+		"Tinos",
+		"Liberation Serif",
+		"DejaVu Serif",
+		"Times"
+	],
+	"sans-serif": [
+		"Arial",
+		"Arimo",
+		"Liberation Sans",
+		"DejaVu Sans",
+		"Helvetica"
+	],
+	"monospace": [
+		"Courier New",
+		"Cousine",
+		"Liberation Mono",
+		"DejaVu Sans Mono",
+		"Menlo"
+	],
+	"system-ui": [
+		"Segoe UI",
+		"Roboto",
+		"Helvetica Neue",
+		"Cantarell",
+		"Ubuntu",
+		"Noto Sans"
+	],
+	"cursive": [
+		"Comic Sans MS",
+		"Apple Chancery",
+		"Segoe Script",
+		"URW Chancery L"
+	],
+	"fantasy": [
+		"Impact",
+		"Papyrus",
+		"Luminari"
+	]
+};
+genericFamilyLocals["ui-serif"] = genericFamilyLocals.serif;
+genericFamilyLocals["ui-sans-serif"] = genericFamilyLocals["sans-serif"];
+genericFamilyLocals["ui-monospace"] = genericFamilyLocals.monospace;
+genericFamilyLocals["ui-rounded"] = genericFamilyLocals["system-ui"];
+const fontProperties = /* @__PURE__ */ new Set([
+	"font-weight",
+	"font-style",
+	"font-stretch"
+]);
+/**
+* Extracts font family and source information from a CSS @font-face rule using css-tree.
+*
+* @param {string} css - The CSS containing @font-face rules
+* @returns Array<{ family?: string, source?: string }> - Array of objects with font family and source information
+*/
+function parseFontFace(css) {
+	const families = [];
+	const ast = typeof css === "string" ? parse(css, { positions: true }) : css;
+	walk(ast, {
+		visit: "Atrule",
+		enter(node) {
+			if (node.name !== "font-face") return;
+			let family;
+			const sources = [];
+			const properties = {};
+			if (node.block) walk(node.block, {
+				visit: "Declaration",
+				enter(declaration) {
+					if (declaration.property === "font-family" && declaration.value.type === "Value") for (const child of declaration.value.children) {
+						if (child.type === "String") {
+							family = withoutQuotes(child.value);
+							break;
+						}
+						if (child.type === "Identifier" && !genericCSSFamilies.has(child.name)) {
+							family = child.name;
+							break;
+						}
+					}
+					if (fontProperties.has(declaration.property)) {
+						if (declaration.value.type === "Value") for (const child of declaration.value.children) {
+							const hasValue = !!properties[declaration.property];
+							properties[declaration.property] ||= "";
+							properties[declaration.property] += (hasValue ? " " : "") + generate(child);
+						}
+					}
+					if (declaration.property === "src") walk(declaration.value, {
+						visit: "Url",
+						enter(urlNode) {
+							const source = withoutQuotes(urlNode.value);
+							if (source) sources.push(source);
+						}
+					});
+				}
+			});
+			if (family) {
+				for (const source of sources) families.push({
+					index: node.loc.start.offset,
+					family,
+					source,
+					properties
+				});
+				if (!sources.length) families.push({
+					index: node.loc.start.offset,
+					family,
+					properties
+				});
+			}
+		}
+	});
+	return families;
+}
+/**
+* Generates a fallback name based on the first font family specified in the input string.
+* @param {string} name - The full font family string.
+* @returns {string} - The fallback font name.
+*/
+function generateFallbackName(name) {
+	return `${withoutQuotes(name.split(",").shift())} fallback`;
+}
+/**
+* Generates a CSS `@font-face' declaration for a font, taking fallback and resizing into account.
+* @param {FontFaceMetrics} metrics - The metrics of the preferred font. See {@link FontFaceMetrics}.
+* @param {FallbackOptions} fallback - The fallback options, including name, font and optional metrics. See {@link FallbackOptions}.
+* @returns {string} - The full `@font-face` CSS declaration.
+*/
+function generateFontFace(metrics, fallback) {
+	const { name: fallbackName, font: fallbackFontName, metrics: fallbackMetrics, ...properties } = fallback;
+	const preferredFontXAvgRatio = metrics.xWidthAvg / metrics.unitsPerEm;
+	const fallbackFontXAvgRatio = fallbackMetrics ? fallbackMetrics.xWidthAvg / fallbackMetrics.unitsPerEm : 1;
+	const sizeAdjust = fallbackMetrics && preferredFontXAvgRatio && fallbackFontXAvgRatio ? preferredFontXAvgRatio / fallbackFontXAvgRatio : 1;
+	const adjustedEmSquare = metrics.unitsPerEm * sizeAdjust;
+	const ascentOverride = metrics.ascent / adjustedEmSquare;
+	const descentOverride = Math.abs(metrics.descent) / adjustedEmSquare;
+	const lineGapOverride = metrics.lineGap / adjustedEmSquare;
+	return `@font-face {\n${toCSS({
+		"font-family": JSON.stringify(fallbackName),
+		"src": renderLocalSrc(fallbackFontName),
+		"size-adjust": toPercentage(sizeAdjust),
+		"ascent-override": toPercentage(ascentOverride),
+		"descent-override": toPercentage(descentOverride),
+		"line-gap-override": toPercentage(lineGapOverride),
+		...properties
+	})}\n}\n`;
+}
+function renderLocalSrc(font) {
+	return (genericFamilyLocals[withoutQuotes(font).toLowerCase()] || [font]).map((local) => `local(${JSON.stringify(local)})`).join(", ");
+}
+//#endregion
+//#region src/fallbacks.ts
+/**
+* Default fallback font stacks for each font category.
+* These are system fonts that work across different platforms.
+*/
+const DEFAULT_CATEGORY_FALLBACKS = {
+	"sans-serif": [
+		"BlinkMacSystemFont",
+		"Segoe UI",
+		"Helvetica Neue",
+		"Arial",
+		"Noto Sans"
+	],
+	"serif": [
+		"Times New Roman",
+		"Georgia",
+		"Noto Serif"
+	],
+	"monospace": [
+		"Courier New",
+		"Roboto Mono",
+		"Noto Sans Mono"
+	],
+	"display": [
+		"BlinkMacSystemFont",
+		"Segoe UI",
+		"Helvetica Neue",
+		"Arial",
+		"Noto Sans"
+	],
+	"handwriting": [
+		"BlinkMacSystemFont",
+		"Segoe UI",
+		"Helvetica Neue",
+		"Arial",
+		"Noto Sans"
+	]
+};
+/**
+* Resolves the appropriate fallback fonts for a given font family.
+*
+* Resolution order:
+* 1. If fallbacks is an array, use it as a global override
+* 2. If fallbacks is an object with the font family key, use that override
+* 3. If metrics contain a category, use the category-based fallbacks
+* 4. Default to sans-serif category fallbacks
+*
+* @param options - Configuration for fallback resolution
+* @returns Array of fallback font family names
+*/
+function resolveCategoryFallbacks(options) {
+	const { fontFamily, fallbacks, metrics, categoryFallbacks } = options;
+	const mergedCategoryFallbacks = { ...DEFAULT_CATEGORY_FALLBACKS };
+	if (categoryFallbacks) for (const category in categoryFallbacks) {
+		const categoryKey = category;
+		const categoryFallbacksList = categoryFallbacks[categoryKey];
+		if (categoryFallbacksList) mergedCategoryFallbacks[categoryKey] = categoryFallbacksList;
+	}
+	if (Array.isArray(fallbacks)) return fallbacks;
+	const familyFallback = fallbacks[fontFamily];
+	if (familyFallback) return familyFallback;
+	if (metrics?.category) {
+		const categoryFallback = mergedCategoryFallbacks[metrics.category];
+		if (categoryFallback) return categoryFallback;
+	}
+	return mergedCategoryFallbacks["sans-serif"];
+}
+//#endregion
+//#region src/metrics.ts
+const metricCache = {};
+function filterRequiredMetrics(font) {
+	return {
+		ascent: font.ascent,
+		descent: font.descent,
+		lineGap: font.lineGap,
+		unitsPerEm: font.unitsPerEm,
+		xWidthAvg: font.xWidthAvg,
+		category: font.category
+	};
+}
+/**
+* Retrieves the font metrics for a given font family from the metrics collection. Uses caching to avoid redundant calculations.
+* @param {string} family - The name of the font family for which metrics are requested.
+* @returns {Promise<FontFaceMetrics | null>} - A promise that resolves with the filtered font metrics or null if not found. See {@link FontFaceMetrics}.
+* @async
+*/
+async function getMetricsForFamily(family) {
+	family = withoutQuotes(family);
+	if (family in metricCache) return metricCache[family] ?? null;
+	try {
+		const name = fontFamilyToCamelCase(family);
+		const { entireMetricsCollection } = await import("#capsize-font-metrics");
+		const metrics = entireMetricsCollection[name];
+		/* v8 ignore next 4 */
+		if (!("descent" in metrics)) {
+			metricCache[family] = null;
+			return null;
+		}
+		const filteredMetrics = filterRequiredMetrics(metrics);
+		metricCache[family] = filteredMetrics;
+		return filteredMetrics;
+	} catch {
+		metricCache[family] = null;
+		return null;
+	}
+}
+const urlRequestCache = /* @__PURE__ */ new Map();
+/**
+* Reads font metrics from a specified source URL or file path. This function supports both local files and remote URLs.
+* It caches the results to optimise subsequent requests for the same source.
+* @param {URL | string} _source - The source URL or local file path from which to read the font metrics.
+* @returns {Promise<FontFaceMetrics | null>} - A promise that resolves to the filtered font metrics or null if the source cannot be processed.
+* @async
+*/
+async function readMetrics(_source) {
+	const source = typeof _source !== "string" && "href" in _source ? _source.href : _source;
+	if (source in metricCache) return metricCache[source] ?? null;
+	const { protocol } = parseURL(source);
+	if (!protocol) return null;
+	let metrics;
+	if (protocol === "file:") metrics = await fromFile(fileURLToPath(source));
+	else if (urlRequestCache.has(source)) metrics = await urlRequestCache.get(source);
+	else {
+		const requestPromise = fromUrl(source);
+		urlRequestCache.set(source, requestPromise);
+		metrics = await requestPromise;
+	}
+	const filteredMetrics = filterRequiredMetrics(metrics);
+	metricCache[source] = filteredMetrics;
+	return filteredMetrics;
+}
+/**
+* Reads font metrics for a `src` URL declared in a stylesheet.
+*
+* A scheme-less, non-rooted URL is resolved against the stylesheet first, then handed to
+* `resolvePath` if that yields no metrics: bare package specifiers and webpack's `~` prefix
+* look identical to stylesheet-relative paths, and only the caller's resolver can map them.
+*/
+async function readMetricsForSource(source, importer, resolvePath) {
+	if (importer && isAbsolute(importer) && isStylesheetRelative(source)) {
+		const metrics = await readMetrics(new URL(source, pathToFileURL(importer))).catch(() => null);
+		if (metrics) return metrics;
+	}
+	return readMetrics(resolvePath(source));
+}
+function fontFamilyToCamelCase(str) {
+	return str.split(/[\s|-]/).filter(Boolean).map((s, i) => `${s.charAt(0)[i > 0 ? "toUpperCase" : "toLowerCase"]()}${s.slice(1)}`).join("");
+}
+//#endregion
+export { resolveCategoryFallbacks as a, generateFontFace as c, withoutQueryOrFragment as d, withoutQuotes as f, DEFAULT_CATEGORY_FALLBACKS as i, genericCSSFamilies as l, readMetrics as n, cssWideKeywords as o, readMetricsForSource as r, generateFallbackName as s, getMetricsForFamily as t, parseFontFace as u };

package/dist/postcss.cjs

@@ -0,0 +1,91 @@
+const require_metrics = require("./metrics-ChAPPk2j.cjs");
+let css_tree = require("css-tree");
+//#region src/postcss.ts
+const supportedExtensions = [
+	"woff2",
+	"woff",
+	"ttf"
+];
+/**
+* Resolves the file a node originated from, consulting any upstream source map so that
+* relative font URLs are resolved against the stylesheet that actually declared them
+* rather than the entrypoint they were inlined into.
+*/
+function originatingFile(node, result) {
+	const source = node?.source;
+	if (source?.start && source.input.map) {
+		const origin = source.input.origin(source.start.line, source.start.column);
+		if (origin && "file" in origin && origin.file) return origin.file;
+	}
+	return source?.input.file ?? result.opts.from;
+}
+function isFontFaceRule(node) {
+	return node?.type === "atrule" && node.name.toLowerCase() === "font-face";
+}
+function fontaine(options) {
+	const resolvePath = options.resolvePath || ((id) => id);
+	const fallbackName = options.fallbackName || require_metrics.generateFallbackName;
+	const skipFontFaceGeneration = options.skipFontFaceGeneration || (() => false);
+	return {
+		postcssPlugin: "fontaine",
+		async Once(root, { result, postcss }) {
+			const fontFaces = [];
+			root.walkAtRules(/^font-face$/i, (rule) => void fontFaces.push(rule));
+			for (const rule of fontFaces) for (const { family, source: url, properties } of require_metrics.parseFontFace(rule.toString())) {
+				const source = url && require_metrics.withoutQueryOrFragment(url);
+				if (!source || !supportedExtensions.some((e) => source.endsWith(e))) continue;
+				if (skipFontFaceGeneration(fallbackName(family))) continue;
+				const metrics = await require_metrics.getMetricsForFamily(family) || await require_metrics.readMetricsForSource(source, originatingFile(rule, result), resolvePath).catch(() => null);
+				if (!metrics) continue;
+				const familyFallbacks = require_metrics.resolveCategoryFallbacks({
+					fontFamily: family,
+					fallbacks: options.fallbacks,
+					metrics,
+					categoryFallbacks: options.categoryFallbacks
+				});
+				let css = "";
+				for (let i = familyFallbacks.length - 1; i >= 0; i--) {
+					const fallback = familyFallbacks[i];
+					const fallbackMetrics = await require_metrics.getMetricsForFamily(fallback);
+					if (!fallbackMetrics) continue;
+					css = require_metrics.generateFontFace(metrics, {
+						name: fallbackName(family),
+						font: fallback,
+						metrics: fallbackMetrics,
+						...properties
+					}) + css;
+				}
+				if (!css) continue;
+				const generated = postcss.parse(css, { from: result.opts.from });
+				const before = rule.raws.before;
+				rule.raws.before = "\n";
+				generated.first.raws.before = before;
+				rule.before(generated);
+				break;
+			}
+			root.walkDecls(/^font-family$/i, (decl) => {
+				if (isFontFaceRule(decl.parent)) return;
+				const value = (0, css_tree.parse)(decl.value, {
+					context: "value",
+					positions: true
+				});
+				/* v8 ignore next 2 -- `value` context always yields a Value node or throws */
+				if (value.type !== "Value") return;
+				for (const child of value.children) {
+					let family;
+					if (child.type === "String") family = require_metrics.withoutQuotes(child.value);
+					else if (child.type === "Identifier" && !require_metrics.cssWideKeywords.has(child.name.toLowerCase())) family = child.name;
+					if (!family) continue;
+					if (!require_metrics.genericCSSFamilies.has(family.toLowerCase())) {
+						const offset = child.loc.end.offset;
+						decl.value = `${decl.value.slice(0, offset)}, "${fallbackName(family)}"${decl.value.slice(offset)}`;
+					}
+					return;
+				}
+			});
+		}
+	};
+}
+const plugin = Object.assign(fontaine, { postcss: true });
+//#endregion
+module.exports = plugin;

package/dist/postcss.d.cts

@@ -0,0 +1,52 @@
+import { n as FontCategory } from "./fallbacks-Cj4LUWhi.cjs";
+import { Plugin } from "postcss";
+//#region src/postcss.d.ts
+interface FontainePostcssOptions {
+  /**
+   * Font family fallbacks to use.
+   * Can be an array of fallback font family names to use for all fonts,
+   * or an object where keys are font family names and values are arrays of fallback font families.
+   */
+  fallbacks: string[] | Record<string, string[]>;
+  /**
+   * Category-specific fallback font stacks.
+   * When a font's category is detected (serif, sans-serif, monospace, etc.),
+   * these fallbacks will be used if no explicit per-family override is provided.
+   * @optional
+   */
+  categoryFallbacks?: Partial<Record<FontCategory, string[]>>;
+  /**
+   * Function to resolve a given path to a valid URL or local path.
+   * This is typically used to resolve font file paths.
+   * @optional
+   */
+  resolvePath?: (path: string) => string | URL;
+  /**
+   * A function to determine whether to skip font face generation for a given fallback name.
+   *
+   * Families skipped this way are still given a fallback in `font-family` declarations,
+   * on the assumption that the `@font-face` rule is provided elsewhere.
+   * @optional
+   */
+  skipFontFaceGeneration?: (fallbackName: string) => boolean;
+  /**
+   * Function to generate an unquoted font family name to use as a fallback.
+   * This should return a valid CSS font family name and should not include quotes.
+   * @optional
+   */
+  fallbackName?: (name: string) => string;
+}
+/**
+ * A PostCSS plugin that generates metric-adjusted fallback `@font-face` rules and appends
+ * them to `font-family` declarations.
+ *
+ * Unlike {@link FontaineTransform}, this runs over fully-compiled CSS, so it sees
+ * `@font-face` rules and `font-family` values produced by preprocessors such as Sass.
+ */
+interface FontainePlugin {
+  (options: FontainePostcssOptions): Plugin;
+  postcss: true;
+}
+declare const plugin: FontainePlugin;
+//#endregion
+export { FontainePostcssOptions, plugin as default };

package/dist/postcss.d.mts

@@ -0,0 +1,52 @@
+import { n as FontCategory } from "./fallbacks-Cj4LUWhi.mjs";
+import { Plugin } from "postcss";
+//#region src/postcss.d.ts
+interface FontainePostcssOptions {
+  /**
+   * Font family fallbacks to use.
+   * Can be an array of fallback font family names to use for all fonts,
+   * or an object where keys are font family names and values are arrays of fallback font families.
+   */
+  fallbacks: string[] | Record<string, string[]>;
+  /**
+   * Category-specific fallback font stacks.
+   * When a font's category is detected (serif, sans-serif, monospace, etc.),
+   * these fallbacks will be used if no explicit per-family override is provided.
+   * @optional
+   */
+  categoryFallbacks?: Partial<Record<FontCategory, string[]>>;
+  /**
+   * Function to resolve a given path to a valid URL or local path.
+   * This is typically used to resolve font file paths.
+   * @optional
+   */
+  resolvePath?: (path: string) => string | URL;
+  /**
+   * A function to determine whether to skip font face generation for a given fallback name.
+   *
+   * Families skipped this way are still given a fallback in `font-family` declarations,
+   * on the assumption that the `@font-face` rule is provided elsewhere.
+   * @optional
+   */
+  skipFontFaceGeneration?: (fallbackName: string) => boolean;
+  /**
+   * Function to generate an unquoted font family name to use as a fallback.
+   * This should return a valid CSS font family name and should not include quotes.
+   * @optional
+   */
+  fallbackName?: (name: string) => string;
+}
+/**
+ * A PostCSS plugin that generates metric-adjusted fallback `@font-face` rules and appends
+ * them to `font-family` declarations.
+ *
+ * Unlike {@link FontaineTransform}, this runs over fully-compiled CSS, so it sees
+ * `@font-face` rules and `font-family` values produced by preprocessors such as Sass.
+ */
+interface FontainePlugin {
+  (options: FontainePostcssOptions): Plugin;
+  postcss: true;
+}
+declare const plugin: FontainePlugin;
+//#endregion
+export { FontainePostcssOptions, plugin as default };

package/dist/postcss.mjs

@@ -0,0 +1,91 @@
+import { a as resolveCategoryFallbacks, c as generateFontFace, d as withoutQueryOrFragment, f as withoutQuotes, l as genericCSSFamilies, o as cssWideKeywords, r as readMetricsForSource, s as generateFallbackName, t as getMetricsForFamily, u as parseFontFace } from "./metrics-DgPzfV2U.mjs";
+import { parse } from "css-tree";
+//#region src/postcss.ts
+const supportedExtensions = [
+	"woff2",
+	"woff",
+	"ttf"
+];
+/**
+* Resolves the file a node originated from, consulting any upstream source map so that
+* relative font URLs are resolved against the stylesheet that actually declared them
+* rather than the entrypoint they were inlined into.
+*/
+function originatingFile(node, result) {
+	const source = node?.source;
+	if (source?.start && source.input.map) {
+		const origin = source.input.origin(source.start.line, source.start.column);
+		if (origin && "file" in origin && origin.file) return origin.file;
+	}
+	return source?.input.file ?? result.opts.from;
+}
+function isFontFaceRule(node) {
+	return node?.type === "atrule" && node.name.toLowerCase() === "font-face";
+}
+function fontaine(options) {
+	const resolvePath = options.resolvePath || ((id) => id);
+	const fallbackName = options.fallbackName || generateFallbackName;
+	const skipFontFaceGeneration = options.skipFontFaceGeneration || (() => false);
+	return {
+		postcssPlugin: "fontaine",
+		async Once(root, { result, postcss }) {
+			const fontFaces = [];
+			root.walkAtRules(/^font-face$/i, (rule) => void fontFaces.push(rule));
+			for (const rule of fontFaces) for (const { family, source: url, properties } of parseFontFace(rule.toString())) {
+				const source = url && withoutQueryOrFragment(url);
+				if (!source || !supportedExtensions.some((e) => source.endsWith(e))) continue;
+				if (skipFontFaceGeneration(fallbackName(family))) continue;
+				const metrics = await getMetricsForFamily(family) || await readMetricsForSource(source, originatingFile(rule, result), resolvePath).catch(() => null);
+				if (!metrics) continue;
+				const familyFallbacks = resolveCategoryFallbacks({
+					fontFamily: family,
+					fallbacks: options.fallbacks,
+					metrics,
+					categoryFallbacks: options.categoryFallbacks
+				});
+				let css = "";
+				for (let i = familyFallbacks.length - 1; i >= 0; i--) {
+					const fallback = familyFallbacks[i];
+					const fallbackMetrics = await getMetricsForFamily(fallback);
+					if (!fallbackMetrics) continue;
+					css = generateFontFace(metrics, {
+						name: fallbackName(family),
+						font: fallback,
+						metrics: fallbackMetrics,
+						...properties
+					}) + css;
+				}
+				if (!css) continue;
+				const generated = postcss.parse(css, { from: result.opts.from });
+				const before = rule.raws.before;
+				rule.raws.before = "\n";
+				generated.first.raws.before = before;
+				rule.before(generated);
+				break;
+			}
+			root.walkDecls(/^font-family$/i, (decl) => {
+				if (isFontFaceRule(decl.parent)) return;
+				const value = parse(decl.value, {
+					context: "value",
+					positions: true
+				});
+				/* v8 ignore next 2 -- `value` context always yields a Value node or throws */
+				if (value.type !== "Value") return;
+				for (const child of value.children) {
+					let family;
+					if (child.type === "String") family = withoutQuotes(child.value);
+					else if (child.type === "Identifier" && !cssWideKeywords.has(child.name.toLowerCase())) family = child.name;
+					if (!family) continue;
+					if (!genericCSSFamilies.has(family.toLowerCase())) {
+						const offset = child.loc.end.offset;
+						decl.value = `${decl.value.slice(0, offset)}, "${fallbackName(family)}"${decl.value.slice(offset)}`;
+					}
+					return;
+				}
+			});
+		}
+	};
+}
+const plugin = Object.assign(fontaine, { postcss: true });
+//#endregion
+export { plugin as default };