mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-17 00:26:41 +03:00
Paul BakausandClaude Opus 4.6
37393f1793
Architecture simplified to two paths: - HTML files: jsdom with getComputedStyle (resolves linked CSS, cascade) - Non-HTML files: regex fallback (CSS, JSX, TSX, etc.) - URLs: Puppeteer (unchanged) - --fast flag forces regex-only for all files Removed --deep flag (jsdom is now the default). Removed static mode from browser script (always uses getComputedStyle — it's in a real browser). Anti-pattern definitions split into: - checkElementBorders() — shared element-level computed style checker - checkPageTypography() — shared page-level checker - REGEX_MATCHERS/REGEX_ANALYZERS — regex fallback for non-HTML Browser script simplified from 470 lines to 250. CLI script reduced from 810 lines to 440. Detection logic is now single-source for jsdom/puppeteer/browser. Fixtures now served via /fixtures/* route in dev server for proper CORS handling of linked stylesheets. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
49 lines
1.8 KiB
HTML
49 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Anti-Patterns From Linked Stylesheet</title>
|
|
<link rel="stylesheet" href="external-styles.css">
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 2rem; }
|
|
h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
|
|
h2 { font-size: 1.125rem; margin: 2rem 0 0.75rem; color: #6b7280; }
|
|
p.intro { color: #6b7280; margin-bottom: 2rem; max-width: 36rem; }
|
|
.cards { display: grid; gap: 1rem; max-width: 28rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Linked Stylesheet Anti-Patterns</h1>
|
|
<p class="intro">
|
|
These elements get their anti-pattern styles from an external CSS file.
|
|
Regex-only scanning misses these — only computed style analysis catches them.
|
|
</p>
|
|
|
|
<h2>Side-Tab (from external CSS)</h2>
|
|
<div class="cards">
|
|
<div class="external-side-tab">
|
|
<h3 style="font-weight: 600;">External side-tab class</h3>
|
|
<p style="font-size: 0.875rem; color: #6b7280;">border-left + border-radius from linked stylesheet.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Top Accent + Rounded (from external CSS)</h2>
|
|
<div class="cards">
|
|
<div class="external-top-accent">
|
|
<h3 style="font-weight: 600;">External top accent class</h3>
|
|
<p style="font-size: 0.875rem; color: #6b7280;">border-top + border-radius from linked stylesheet.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Clean Card (from external CSS)</h2>
|
|
<div class="cards">
|
|
<div class="external-clean">
|
|
<h3 style="font-weight: 600;">External clean card</h3>
|
|
<p style="font-size: 0.875rem; color: #6b7280;">Uniform 1px border — should NOT flag.</p>
|
|
</div>
|
|
</div>
|
|
<script src="/js/detect-antipatterns-browser.js"></script>
|
|
</body>
|
|
</html>
|