Fix: do not flag Roboto in system font stacks (#678)

Treat the leading system face as primary so later Roboto fallbacks do not trigger overused-font, while named web-font primaries still flag. AI-assisted merge: reviewed and executed by Codex under maintainer direction.
2026-09-15 07:36:50 +03:00 · 2026-08-31 19:20:51 -04:00
parent 205643cf7a
commit 2cfd60765a
7 changed files with 192 additions and 30 deletions
@@ -633,6 +633,21 @@ describe('detectHtml — static HTML/CSS fixtures', () => {
    assert.equal(f.length, 0);
  });

+  it('overused-font: flags named primaries and skips system-stack Roboto', async () => {
+    const f = await detectHtml(path.join(FIXTURES, 'overused-font.html'));
+    const snippets = f.filter(r => r.antipattern === 'overused-font').map(r => r.snippet).join(' | ');
+    for (const font of ['inter', 'geist', 'montserrat', 'lato']) {
+      assert.match(snippets, new RegExp(`Primary font: ${font}`), `expected flag for ${font}: ${snippets}`);
+    }
+    assert.doesNotMatch(snippets, /roboto/i, `system-stack Roboto must not be primary: ${snippets}`);
+    assert.doesNotMatch(snippets, /arial/i, `system-stack Arial must not be primary: ${snippets}`);
+    assert.equal(
+      f.some(r => r.antipattern === 'flat-type-hierarchy'),
+      false,
+      `overused-font fixture should not contain incidental type findings: ${f.map(r => `${r.antipattern}:${r.snippet}`).join('; ')}`,
+    );
+  });
+
  it('design-system: flags only values outside the provided DESIGN.md tokens', async () => {
    const designSystem = normalizeDesignSystem({
      frontmatter: {
@@ -674,6 +674,34 @@ describe('detectText — overused fonts', () => {
  });
 });

+describe('detectHtml — overused fonts system stack', () => {
+  test('Inter before a system stack still flags overused-font', async () => {
+    const page = `<!DOCTYPE html><html><head><style>
+      body { font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
+      h1 { font-size: 34px; }
+      p { font-size: 15px; }
+    </style></head><body><h1>Hello</h1><p>world</p></body></html>`;
+    await withStaticFixture({ 'index.html': page }, async ({ file }) => {
+      const f = await detectHtml(file);
+      expect(f.some(r => r.antipattern === 'overused-font' && /inter/i.test(r.snippet))).toBe(true);
+    });
+  });
+
+  test('checkPageTypography regex path skips Roboto in system stack', () => {
+    const html = `<!DOCTYPE html><html><head><style>
+      body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
+    </style></head><body><h1>Hello</h1><p>world</p></body></html>`;
+    const doc = {
+      styleSheets: [],
+      documentElement: { outerHTML: html },
+      querySelectorAll() { return []; },
+    };
+    const win = { getComputedStyle() { return { fontSize: '16px' }; } };
+    const f = checkPageTypography(doc, win);
+    expect(f.filter(r => r.id === 'overused-font')).toHaveLength(0);
+  });
+});
+
 describe('detectText — flat type hierarchy', () => {
  test('flags sizes too close together', () => {
    const page = '<!DOCTYPE html><html><style>h1{font-size:18px}h2{font-size:16px}h3{font-size:15px}p{font-size:14px}.s{font-size:13px}</style></html>';
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Overused Font — Side by Side</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 24px;
+      background: #f9fafb;
+      color: #111827;
+      font: 16px/1.5 system-ui, sans-serif;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      gap: 32px;
+      max-width: 1180px;
+      margin: 0 auto;
+    }
+    .col-label {
+      margin: 0 0 14px;
+      color: #475569;
+      font-size: 13px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    article { margin: 0 0 20px; }
+    h1 { margin: 0 0 24px; font-size: 48px; line-height: 1.1; }
+    h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.2; }
+    p { margin: 0; font-size: 16px; color: #374151; }
+    .face-inter { font-family: Inter, sans-serif; }
+    .face-geist { font-family: Geist, sans-serif; }
+    .face-montserrat { font-family: Montserrat, sans-serif; }
+    .face-lato { font-family: Lato, sans-serif; }
+    .face-system-shorthand {
+      font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    }
+    .face-system-family {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    }
+    .face-system-ui { font-family: system-ui, sans-serif; }
+    .face-segoe { font-family: "Segoe UI", Roboto, sans-serif; }
+    .face-ui-sans { font-family: ui-sans-serif, Roboto, sans-serif; }
+  </style>
+</head>
+<body>
+  <h1>Overused Font</h1>
+  <div class="grid">
+    <section class="col" data-col="flag">
+      <p class="col-label">Should flag</p>
+      <article>
+        <h2>Overused Inter</h2>
+        <p class="face-inter">Inter is the primary face on this block, so overused-font should name it.</p>
+      </article>
+      <article>
+        <h2>Overused Geist</h2>
+        <p class="face-geist">Geist is the primary face on this block, so overused-font should name it.</p>
+      </article>
+      <article>
+        <h2>Overused Montserrat</h2>
+        <p class="face-montserrat">Montserrat is the primary face on this block, so overused-font should name it.</p>
+      </article>
+      <article>
+        <h2>Overused Lato</h2>
+        <p class="face-lato">Lato is the primary face on this block, so overused-font should name it.</p>
+      </article>
+    </section>
+    <section class="col" data-col="pass">
+      <p class="col-label">Should pass</p>
+      <article>
+        <h2>Canonical System Stack</h2>
+        <p class="face-system-shorthand">Roboto sits after Apple and Segoe UI faces in this stack, so it is a fallback, not the primary.</p>
+      </article>
+      <article>
+        <h2>Font Family System Stack</h2>
+        <p class="face-system-family">The same stack written as font-family must also leave Roboto unflagged.</p>
+      </article>
+      <article>
+        <h2>System UI Only</h2>
+        <p class="face-system-ui">system-ui with a generic fallback is a platform face, not an overused web font.</p>
+      </article>
+      <article>
+        <h2>Segoe UI Lead</h2>
+        <p class="face-segoe">Segoe UI in the lead position keeps Roboto as a later platform fallback.</p>
+      </article>
+      <article>
+        <h2>Ui Sans Lead</h2>
+        <p class="face-ui-sans">ui-sans-serif in the lead position keeps Roboto as a later platform fallback.</p>
+      </article>
+    </section>
+  </div>
+<script src="/js/detect-antipatterns-browser.js"></script>
+</body>
+</html>