skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-18 17:16:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

Test: cover overused-font system stacks in the fixture matrix

Browse Source 
Move the #671 regressions into tests/fixtures/antipatterns/overused-font.html so the static fixture suite owns the pass cases (system stacks) and the flag cases (named overused primaries).

AI-assisted (Cursor).

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Abdul Wahab
2026-08-31 01:57:34 +05:00
co-authored by Cursor
parent 1828415f84
commit cb670ceb23
3 changed files with 117 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/detect-antipatterns-fixtures.test.mjs
+15
View File
@@ -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: {
tests/detect-antipatterns.test.js
-38
View File
@@ -675,44 +675,6 @@ describe('detectText — overused fonts', () => {
});
describe('detectHtml — overused fonts system stack', () => {
const systemStackCss = `body { font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
h1 { font-size: 34px; }
p { font-size: 15px; }
small { font-size: 12px; }`;
const systemStackPage = `<!DOCTYPE html><html><head><style>${systemStackCss}</style></head><body><h1>Hello</h1><p>world</p><small>meta</small></body></html>`;
test('font shorthand system stack does not flag Roboto as overused', async () => {
await withStaticFixture({ 'index.html': systemStackPage }, async ({ file }) => {
const f = await detectHtml(file);
expect(f.filter(r => r.antipattern === 'overused-font')).toHaveLength(0);
});
});
test('font-family system stack does not flag Roboto as overused', async () => {
const page = `<!DOCTYPE html><html><head><style>
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
h1 { font-size: 34px; }
p { font-size: 15px; }
small { font-size: 12px; }
</style></head><body><h1>Hello</h1><p>world</p><small>meta</small></body></html>`;
await withStaticFixture({ 'index.html': page }, async ({ file }) => {
const f = await detectHtml(file);
expect(f.filter(r => r.antipattern === 'overused-font')).toHaveLength(0);
});
});
test('Inter before 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; }
tests/fixtures/antipatterns/overused-font.html
Vendored
+102
View File
@@ -0,0 +1,102 @@
<!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-inter-system { font-family: Inter, -apple-system, BlinkMacSystemFont, 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>
<article>
<h2>Inter Before System Stack</h2>
<p class="face-inter-system">Inter ahead of -apple-system is still the primary face, 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>