@describe-me/vitest 0.5.0-next.2 → 0.5.0

package/dist/font-usage.d.ts

@@ -0,0 +1,26 @@
+/** A `var()` in the place of a family. */
+export interface FontVarReference {
+    /** The custom property, such as `--font-body`. */
+    name: string;
+    /** The text after its first comma, when there is one. */
+    fallback?: string;
+}
+/** What a stylesheet or a `style` attribute says about fonts. */
+export interface FontUsage {
+    /** The first family of each `font-family` and `font` declaration, unless it is a `var()`. */
+    families: string[];
+    /** Each `var()` in the place of a first family. */
+    varRefs: FontVarReference[];
+    /** Every custom property definition, in source order. */
+    variables: Map<string, string[]>;
+    /** The families of `@font-face` rules. */
+    declared: string[];
+    /** `@import` targets as written. */
+    imports: string[];
+}
+/**
+ * The fonts that CSS text uses, defines as custom properties, declares with
+ * `@font-face` and imports. Reads a stylesheet or the bare text of a `style`
+ * attribute. Only `font-family`, `font` and custom properties count.
+ */
+export declare function fontUsage(css: string): FontUsage;

package/dist/font-usage.js

@@ -0,0 +1,163 @@
+import { cssReferences } from '@describe-me/core/css-references';
+import { fontFamilyList } from './font-family-list.js';
+import { fontShorthandFamilies } from './font-shorthand-families.js';
+const IMPORTANT = /!\s*important\s*$/i;
+function commentEnd(css, open) {
+    const close = css.indexOf('*/', open + 2);
+    return close === -1 ? css.length : close + 2;
+}
+function stringEnd(css, open) {
+    let index = open + 1;
+    while (index < css.length && css[index] !== css[open]) {
+        index += css[index] === '\\' ? 2 : 1;
+    }
+    return index + 1;
+}
+function piecesOf(css) {
+    const pieces = [];
+    let text = '';
+    let copied = 0;
+    let parens = 0;
+    let index = 0;
+    while (index < css.length) {
+        const char = css[index];
+        if (char === '/' && css[index + 1] === '*') {
+            text += `${css.slice(copied, index)} `;
+            index = commentEnd(css, index);
+            copied = index;
+        }
+        else if (char === '\\') {
+            index += 2;
+        }
+        else if (char === '"' || char === "'") {
+            index = stringEnd(css, index);
+        }
+        else if (char === '(') {
+            parens++;
+            index++;
+        }
+        else if (char === ')') {
+            parens = Math.max(0, parens - 1);
+            index++;
+        }
+        else if (parens === 0 && (char === '{' || char === '}' || char === ';')) {
+            pieces.push({ text: text + css.slice(copied, index), end: char });
+            text = '';
+            index++;
+            copied = index;
+        }
+        else {
+            index++;
+        }
+    }
+    pieces.push({ text: text + css.slice(copied), end: '' });
+    return pieces;
+}
+/** `var(--x)` or `var(--x, fallback)` as a whole, or null. */
+function varReference(text) {
+    if (text.slice(0, 4).toLowerCase() !== 'var(' || !text.endsWith(')')) {
+        return null;
+    }
+    const inner = text.slice(4, -1);
+    let depth = 0;
+    let comma = -1;
+    for (let i = 0; i < inner.length && comma === -1; i++) {
+        if (inner[i] === '(') {
+            depth++;
+        }
+        else if (inner[i] === ')') {
+            depth--;
+        }
+        else if (inner[i] === ',' && depth === 0) {
+            comma = i;
+        }
+        // A `)` that closes `var(` before the end: `var(--a) var(--b)` is no single reference.
+        if (depth < 0) {
+            return null;
+        }
+    }
+    const name = (comma === -1 ? inner : inner.slice(0, comma)).trim();
+    if (!name.startsWith('--')) {
+        return null;
+    }
+    const fallback = comma === -1 ? '' : inner.slice(comma + 1).trim();
+    return fallback === '' ? { name } : { name, fallback };
+}
+function addFamily(usage, family) {
+    if (family === undefined) {
+        return;
+    }
+    const reference = varReference(family);
+    if (reference) {
+        usage.varRefs.push(reference);
+    }
+    else {
+        usage.families.push(family);
+    }
+}
+function addFontShorthand(usage, value) {
+    const reference = varReference(value);
+    if (reference) {
+        usage.varRefs.push(reference);
+        return;
+    }
+    addFamily(usage, fontShorthandFamilies(value)?.[0]);
+}
+function addDeclaration(usage, text, inFontFace) {
+    const colon = text.indexOf(':');
+    if (colon === -1) {
+        return;
+    }
+    const property = text.slice(0, colon).trim();
+    const name = property.toLowerCase();
+    const value = text
+        .slice(colon + 1)
+        .trim()
+        .replace(IMPORTANT, '')
+        .trim();
+    if (inFontFace) {
+        if (name === 'font-family') {
+            usage.declared.push(...fontFamilyList(value).slice(0, 1));
+        }
+        return;
+    }
+    if (property.startsWith('--')) {
+        usage.variables.set(property, [...(usage.variables.get(property) ?? []), value]);
+    }
+    else if (name === 'font-family') {
+        addFamily(usage, fontFamilyList(value)[0]);
+    }
+    else if (name === 'font') {
+        addFontShorthand(usage, value);
+    }
+}
+/**
+ * The fonts that CSS text uses, defines as custom properties, declares with
+ * `@font-face` and imports. Reads a stylesheet or the bare text of a `style`
+ * attribute. Only `font-family`, `font` and custom properties count.
+ */
+export function fontUsage(css) {
+    const usage = {
+        families: [],
+        varRefs: [],
+        variables: new Map(),
+        declared: [],
+        imports: cssReferences(css)
+            .filter((reference) => reference.kind === 'import')
+            .map((reference) => reference.url),
+    };
+    // One entry per open block: whether it is, or sits inside, an `@font-face`.
+    const fontFace = [];
+    for (const piece of piecesOf(css)) {
+        const inFontFace = fontFace.at(-1) ?? false;
+        if (piece.end === '{') {
+            fontFace.push(inFontFace || piece.text.trim().toLowerCase() === '@font-face');
+            continue;
+        }
+        addDeclaration(usage, piece.text, inFontFace);
+        if (piece.end === '}') {
+            fontFace.pop();
+        }
+    }
+    return usage;
+}

package/dist/head-stylesheets.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The CSS of preview head HTML: the body of each `<style>` and the `href` of
+ * each `<link rel="stylesheet">`. Comments and scripts are skipped.
+ */
+export declare function headStylesheets(html: string): {
+    styles: string[];
+    links: string[];
+};

package/dist/head-stylesheets.js

@@ -0,0 +1,51 @@
+// The same patterns as RAW_TEXT, START_TAG and ATTRIBUTE in rewrite-head-references.ts.
+const RAW_TEXT = /<!--[\s\S]*?--!?>|<script\b[\s\S]*?<\/script\b[^>]*>|(<style\b[^>]*>)([\s\S]*?)(<\/style\b[^>]*>)/gi;
+const START_TAG = /(<[a-z][^\s/>]*)((?:[^>"']|"[^"]*"|'[^']*')*>)/gi;
+const ATTRIBUTE = /([^\s"'<>/=]+)(?:(\s*=\s*)("[^"]*"|'[^']*'|[^\s"'=<>`]+))?/g;
+/** The attributes of a start tag by lowercase name, unquoted and with `&amp;` decoded. */
+function attributesOf(text) {
+    const attributes = new Map();
+    for (const [, name, , value] of text.matchAll(ATTRIBUTE)) {
+        if (value === undefined) {
+            continue;
+        }
+        const quoted = value.startsWith('"') || value.startsWith("'");
+        const unquoted = quoted ? value.slice(1, -1) : value;
+        attributes.set(name.toLowerCase(), unquoted.replaceAll('&amp;', '&'));
+    }
+    return attributes;
+}
+function stylesheetLinksIn(html) {
+    const links = [];
+    for (const [, name, text] of html.matchAll(START_TAG)) {
+        if (name.slice(1).toLowerCase() !== 'link') {
+            continue;
+        }
+        const attributes = attributesOf(text);
+        const rel = (attributes.get('rel') ?? '').toLowerCase().split(/\s+/);
+        const href = attributes.get('href');
+        if (rel.includes('stylesheet') && href !== undefined) {
+            links.push(href);
+        }
+    }
+    return links;
+}
+/**
+ * The CSS of preview head HTML: the body of each `<style>` and the `href` of
+ * each `<link rel="stylesheet">`. Comments and scripts are skipped.
+ */
+export function headStylesheets(html) {
+    const styles = [];
+    const links = [];
+    let scanned = 0;
+    for (const match of html.matchAll(RAW_TEXT)) {
+        const [text, styleStart, css] = match;
+        links.push(...stylesheetLinksIn(html.slice(scanned, match.index)));
+        if (styleStart !== undefined) {
+            styles.push(css);
+        }
+        scanned = match.index + text.length;
+    }
+    links.push(...stylesheetLinksIn(html.slice(scanned)));
+    return { styles, links };
+}

package/dist/print-diagnostics.d.ts

@@ -1,7 +1,8 @@
 import type { Manifest } from '@describe-me/core/types';
 /**
  * Warn, one line per kind, about what the manifest could not document. Prints
- * nothing when everything is named, documented and loadable. The viewer shows
- * the same list in its header.
+ * nothing when everything is named, documented and loadable, every font is
+ * loaded and no stylesheet comes from a remote host. The viewer shows the same
+ * list in its header.
  */
 export declare function printDiagnostics(manifest: Manifest): void;

package/dist/print-diagnostics.js

@@ -14,11 +14,12 @@ function plural(count, one, many) {
 }
 /**
  * Warn, one line per kind, about what the manifest could not document. Prints
- * nothing when everything is named, documented and loadable. The viewer shows
- * the same list in its header.
+ * nothing when everything is named, documented and loadable, every font is
+ * loaded and no stylesheet comes from a remote host. The viewer shows the same
+ * list in its header.
  */
 export function printDiagnostics(manifest) {
-    const { anonymous, undocumented, assetsMissing } = manifestDiagnostics(manifest);
+    const { anonymous, undocumented, assetsMissing, fontsMissing, remoteStylesheets } = manifestDiagnostics(manifest);
     if (anonymous.length > 0) {
         console.warn(`describe-me: ${plural(anonymous.length, 'test renders', 'tests render')} an anonymous component; export it from a project module or give it a displayName`);
     }
@@ -28,4 +29,13 @@ export function printDiagnostics(manifest) {
     if (assetsMissing.length > 0) {
         console.warn(`describe-me: ${plural(assetsMissing.length, 'asset was', 'assets were')} not found in the project and will not load in the viewer: ${listed(assetsMissing)}`);
     }
+    if (fontsMissing.length > 0) {
+        const families = fontsMissing.map((font) => `${font.family} (${plural(font.tests, 'test', 'tests')})`);
+        const pronoun = fontsMissing.length === 1 ? 'it' : 'them';
+        console.warn(`describe-me: ${plural(fontsMissing.length, 'font family is', 'font families are')} used but never loaded: ${listed(families)} — add ${pronoun} to previewHead`);
+    }
+    if (remoteStylesheets.length > 0) {
+        const hosts = remoteStylesheets.map((stylesheet) => `${stylesheet.host} (${plural(stylesheet.frames, 'frame', 'frames')})`);
+        console.warn(`describe-me: frames load stylesheets from ${plural(remoteStylesheets.length, 'remote host', 'remote hosts')}, which the viewer fetches from the network: ${listed(hosts)}`);
+    }
 }

package/dist/reporter.d.ts

@@ -28,6 +28,7 @@ export default class DescribeMeReporter implements Reporter {
     private snapshots;
     private assets;
     private styles;
+    private fonts;
     private modules;
     constructor(options?: DescribeMeReporterOptions);
     onInit(vitest: Vitest): void;
@@ -39,12 +40,20 @@ export default class DescribeMeReporter implements Reporter {
      * are dropped, and so are the empty tests that 0.4 still wrote.
      */
     private seedFromPreviousRun;
+    /**
+     * Tests written before 0.5 carry Vitest's id. They get their stable id, and
+     * the old one moves to `vitestId`. Occurrences are counted over the module's
+     * full list, as the run that wrote it saw them.
+     */
+    private withStableIds;
     /**
      * A test skipped in this run keeps its previous entry, so a filtered run does
      * not erase documentation.
      */
     onTestModuleEnd(module: TestModule): void;
     onTestRunEnd(): Promise<void>;
+    /** A diagnostic must never break the manifest, so a failing audit writes empty lists. */
+    private auditFonts;
     /** Module ids use the platform's separators. Globs expect posix ones. */
     private isRecordedModule;
     /** Decided before any snapshot is written, so a dropped test writes no file. */

package/dist/reporter.js

@@ -10,11 +10,16 @@ import { collectComponentDocsSafely } from './collect-component-docs-safely.js';
 import { compileGlobs } from './compile-globs.js';
 import { componentEntries } from './component-entries.js';
 import { fileFilter } from './file-filter.js';
+import { FontAudit } from './font-audit.js';
 import { isRecordedTest } from './is-recorded-test.js';
 import { printDiagnostics } from './print-diagnostics.js';
 import { SnapshotStore } from './snapshot-store.js';
+import { stableTestIds } from './stable-test-ids.js';
 import { StyleStore } from './style-store.js';
 import { testPath } from './test-path.js';
+function toPosix(moduleId) {
+    return moduleId.split(sep).join('/');
+}
 function recordOf(tc) {
     return tc.meta()[META_KEY];
 }
@@ -27,6 +32,7 @@ export default class DescribeMeReporter {
     snapshots;
     assets;
     styles;
+    fonts;
     modules = new Map();
     constructor(options = {}) {
         this.outDirOption = options.outDir ?? '.describe-me';
@@ -43,6 +49,7 @@ export default class DescribeMeReporter {
         this.snapshots = new SnapshotStore(this.outDir);
         this.assets = new AssetStore(this.outDir, this.root);
         this.styles = new StyleStore(this.outDir);
+        this.fonts = new FontAudit(this.outDir);
         this.seedFromPreviousRun();
         if (this.previewHead !== undefined && /<script\b/i.test(this.previewHead)) {
             console.warn('describe-me: previewHead contains a <script>, which the viewer never runs.');
@@ -65,7 +72,7 @@ export default class DescribeMeReporter {
         try {
             const previous = JSON.parse(readFileSync(file, 'utf8'));
             for (const mod of previous.modules ?? []) {
-                const tests = mod.tests.filter((test) => isRecordedTest(test));
+                const tests = this.withStableIds(mod).filter((test) => isRecordedTest(test));
                 if (tests.length > 0 &&
                     this.isRecordedModule(mod.id) &&
                     existsSync(resolve(this.root, mod.id))) {
@@ -77,6 +84,20 @@ export default class DescribeMeReporter {
             // corrupt or incompatible manifest: start fresh
         }
     }
+    /**
+     * Tests written before 0.5 carry Vitest's id. They get their stable id, and
+     * the old one moves to `vitestId`. Occurrences are counted over the module's
+     * full list, as the run that wrote it saw them.
+     */
+    withStableIds(mod) {
+        const ids = stableTestIds(toPosix(mod.id), mod.tests);
+        return mod.tests.map((test, i) => {
+            if (test.vitestId !== undefined) {
+                return test;
+            }
+            return { ...test, id: ids[i], vitestId: test.id };
+        });
+    }
     /**
      * A test skipped in this run keeps its previous entry, so a filtered run does
      * not erase documentation.
@@ -89,8 +110,12 @@ export default class DescribeMeReporter {
         }
         const previous = this.modules.get(id);
         const tests = [];
-        for (const tc of module.children.allTests()) {
-            const test = this.manifestTestOf(tc, previous);
+        // Over every test, skipped ones included, so an id does not depend on
+        // which tests recorded frames or on `-t` and `.only`.
+        const cases = Array.from(module.children.allTests());
+        const stableIds = stableTestIds(toPosix(id), cases.map((tc) => ({ path: testPath(tc), name: tc.name })));
+        for (const [i, tc] of cases.entries()) {
+            const test = this.manifestTestOf(tc, stableIds[i], previous);
             if (test) {
                 tests.push(test);
             }
@@ -124,25 +149,40 @@ export default class DescribeMeReporter {
         this.snapshots.collectGarbage(snapshotFiles);
         const styleFiles = this.styles.collectGarbage(snapshotFiles);
         this.assets.collectGarbage([...snapshotFiles, ...styleFiles], head === undefined ? [] : [head]);
+        this.auditFonts(manifest);
         writeFileSync(join(this.outDir, 'manifest.json'), JSON.stringify(manifest, null, 2));
         printDiagnostics(manifest);
     }
+    /** A diagnostic must never break the manifest, so a failing audit writes empty lists. */
+    auditFonts(manifest) {
+        try {
+            const { fontsMissing, remoteStylesheets } = this.fonts.audit(manifest);
+            manifest.fontsMissing = fontsMissing;
+            manifest.remoteStylesheets = remoteStylesheets;
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            console.warn(`describe-me: the font audit failed: ${message}`);
+            manifest.fontsMissing = [];
+            manifest.remoteStylesheets = [];
+        }
+    }
     /** Module ids use the platform's separators. Globs expect posix ones. */
     isRecordedModule(id) {
-        return this.isRecordedFile(id.split(sep).join('/'));
+        return this.isRecordedFile(toPosix(id));
     }
     /** Decided before any snapshot is written, so a dropped test writes no file. */
-    manifestTestOf(tc, previous) {
+    manifestTestOf(tc, stableId, previous) {
         const record = recordOf(tc);
         if (record && isRecordedTest(record)) {
-            return this.toManifestTest(tc, record);
+            return this.toManifestTest(tc, stableId, record);
         }
         if (tc.result().state !== 'skipped') {
             return undefined;
         }
-        return previous?.tests.find((test) => test.id === tc.id && test.fullName === tc.fullName && isRecordedTest(test));
+        return previous?.tests.find((test) => test.id === stableId && isRecordedTest(test));
     }
-    toManifestTest(tc, record) {
+    toManifestTest(tc, stableId, record) {
         const result = tc.result();
         const frames = record.frames.map((frame) => ({
             id: frame.id,
@@ -153,7 +193,8 @@ export default class DescribeMeReporter {
             snapshot: this.writeSnapshot(frame.snapshot, record.origin),
         }));
         return {
-            id: tc.id,
+            id: stableId,
+            vitestId: tc.id,
             name: tc.name,
             path: testPath(tc),
             fullName: tc.fullName,

package/dist/snapshot-styles.d.ts

@@ -0,0 +1,17 @@
+/** The CSS a serialized snapshot carries, and the stylesheets it links. */
+export interface SnapshotStyles {
+    /** `_cssText` values that are not style references, and the text of `<style>` elements. */
+    cssTexts: string[];
+    /** The chunk hashes of `describe-me-style:` references, in order. */
+    chunks: string[];
+    /** `style` attribute values. */
+    styleAttributes: string[];
+    /** The `href` of each `<link rel="stylesheet">` that rrweb did not inline. */
+    stylesheetLinks: string[];
+}
+/**
+ * Collect the CSS of an rrweb serialized node and everything below it. rrweb
+ * keeps shadow roots and iframe documents among the child nodes, so they are
+ * read too.
+ */
+export declare function snapshotStyles(node: unknown): SnapshotStyles;

package/dist/snapshot-styles.js

@@ -0,0 +1,65 @@
+import { STYLE_URL_PREFIX } from '@describe-me/core/types';
+function isNode(value) {
+    return typeof value === 'object' && value !== null;
+}
+function childrenOf(node) {
+    return Array.isArray(node.childNodes) ? node.childNodes.filter(isNode) : [];
+}
+function isStylesheetLink(node, attributes) {
+    const rel = attributes.rel;
+    return (node.tagName === 'link' &&
+        typeof rel === 'string' &&
+        rel.toLowerCase().split(/\s+/).includes('stylesheet'));
+}
+function addCssText(styles, cssText) {
+    if (cssText.startsWith(STYLE_URL_PREFIX)) {
+        styles.chunks.push(...cssText.slice(STYLE_URL_PREFIX.length).split('+'));
+    }
+    else {
+        styles.cssTexts.push(cssText);
+    }
+}
+/** rrweb writes the text of a `<style>` only when it could not read the sheet. */
+function addStyleText(styles, node) {
+    for (const child of childrenOf(node)) {
+        if (typeof child.textContent === 'string' && child.textContent.trim() !== '') {
+            styles.cssTexts.push(child.textContent);
+        }
+    }
+}
+function visit(node, styles) {
+    const attributes = isNode(node.attributes) ? node.attributes : {};
+    const { _cssText: cssText, style, href } = attributes;
+    if (typeof cssText === 'string') {
+        addCssText(styles, cssText);
+    }
+    else if (isStylesheetLink(node, attributes) && typeof href === 'string') {
+        styles.stylesheetLinks.push(href);
+    }
+    if (typeof style === 'string') {
+        styles.styleAttributes.push(style);
+    }
+    if (node.tagName === 'style') {
+        addStyleText(styles, node);
+    }
+    for (const child of childrenOf(node)) {
+        visit(child, styles);
+    }
+}
+/**
+ * Collect the CSS of an rrweb serialized node and everything below it. rrweb
+ * keeps shadow roots and iframe documents among the child nodes, so they are
+ * read too.
+ */
+export function snapshotStyles(node) {
+    const styles = {
+        cssTexts: [],
+        chunks: [],
+        styleAttributes: [],
+        stylesheetLinks: [],
+    };
+    if (isNode(node)) {
+        visit(node, styles);
+    }
+    return styles;
+}

package/dist/stable-test-id.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A test id that survives edits to other tests in its file. `moduleId` is
+ * root-relative with `/` separators, so Windows and posix agree.
+ */
+export declare function stableTestId(moduleId: string, path: readonly string[], name: string, occurrence: number): string;

package/dist/stable-test-id.js

@@ -0,0 +1,12 @@
+import { createHash } from 'node:crypto';
+/**
+ * A test id that survives edits to other tests in its file. `moduleId` is
+ * root-relative with `/` separators, so Windows and posix agree.
+ */
+export function stableTestId(moduleId, path, name, occurrence) {
+    let input = [moduleId, ...path, name].join('\0');
+    if (occurrence > 1) {
+        input += `\0${occurrence}`;
+    }
+    return createHash('sha1').update(input).digest('hex').slice(0, 12);
+}

package/dist/stable-test-ids.d.ts

@@ -0,0 +1,5 @@
+/** One stable id per test of a module, counting repeated names 1-based in the given order. */
+export declare function stableTestIds(moduleId: string, tests: Iterable<{
+    path: readonly string[];
+    name: string;
+}>): string[];

package/dist/stable-test-ids.js

@@ -0,0 +1,13 @@
+import { stableTestId } from './stable-test-id.js';
+/** One stable id per test of a module, counting repeated names 1-based in the given order. */
+export function stableTestIds(moduleId, tests) {
+    const seen = new Map();
+    const ids = [];
+    for (const test of tests) {
+        const key = [...test.path, test.name].join('\0');
+        const occurrence = (seen.get(key) ?? 0) + 1;
+        seen.set(key, occurrence);
+        ids.push(stableTestId(moduleId, test.path, test.name, occurrence));
+    }
+    return ids;
+}

package/dist/system-font-family.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Whether a family needs no loading: a CSS-wide keyword, a generic family, or
+ * a family that ships with common operating systems.
+ */
+export declare function isSystemFontFamily(name: string): boolean;

package/dist/system-font-family.js

@@ -0,0 +1,78 @@
+import { fontFamilyKey } from './font-family-key.js';
+const CSS_WIDE_KEYWORDS = ['inherit', 'initial', 'unset', 'revert', 'revert-layer'];
+const GENERIC_FAMILIES = [
+    'serif',
+    'sans-serif',
+    'monospace',
+    'cursive',
+    'fantasy',
+    'system-ui',
+    'ui-serif',
+    'ui-sans-serif',
+    'ui-monospace',
+    'ui-rounded',
+    'math',
+    'emoji',
+    'fangsong',
+];
+// Roboto, Ubuntu, Oxygen, Fira, Cantarell, Noto Sans, Open Sans and Inter are
+// left out on purpose. They come preinstalled on some systems, but they are
+// Google Fonts too, and a page that uses them usually has to load them.
+const INSTALLED_FAMILIES = [
+    '-apple-system',
+    'BlinkMacSystemFont',
+    'SFMono-Regular',
+    'San Francisco',
+    'Verdana',
+    'Tahoma',
+    'Trebuchet MS',
+    'Georgia',
+    'Menlo',
+    'Monaco',
+    'Consolas',
+    'Impact',
+    'Comic Sans MS',
+    'Book Antiqua',
+    'Cambria',
+    'Calibri',
+    'Candara',
+    'Gill Sans',
+    'Optima',
+    'Geneva',
+    'Symbol',
+    'Webdings',
+    'Wingdings',
+    'Apple Color Emoji',
+    'Noto Color Emoji',
+    'Android Emoji',
+];
+/** Each covers its whole family, so `Times New Roman` counts and `Timeless` does not. */
+const INSTALLED_PREFIXES = [
+    'Segoe UI',
+    'Helvetica',
+    'Arial',
+    'Times',
+    'Courier',
+    'Lucida',
+    'Palatino',
+    'SF Pro',
+    'SF Mono',
+    'Avenir',
+    'DejaVu',
+    'Liberation',
+    'PingFang',
+    'Hiragino',
+    'Microsoft YaHei',
+    'Yu Gothic',
+    'Meiryo',
+].map(fontFamilyKey);
+const EXACT = new Set([...CSS_WIDE_KEYWORDS, ...GENERIC_FAMILIES, ...INSTALLED_FAMILIES].map(fontFamilyKey));
+/**
+ * Whether a family needs no loading: a CSS-wide keyword, a generic family, or
+ * a family that ships with common operating systems.
+ */
+export function isSystemFontFamily(name) {
+    const key = fontFamilyKey(name);
+    return (EXACT.has(key) ||
+        INSTALLED_PREFIXES.some((prefix) => key === prefix || key.startsWith(`${prefix} `)));
+}