mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-19 09:36:59 +03:00
Scan pseudo-element stripes in standalone stylesheets and style blocks
The side-tab silhouette drawn as an absolutely-positioned ::before/ ::after bar carries no border token, so the regex engine's line matchers never saw it in .css/.scss files, component style blocks, or CSS-in-JS templates — while the identical construction on a full HTML page was flagged via checkHtmlPatterns (issue #394). Wire the existing scanCssTextForPseudoStripe scanner into all three regex-engine paths. New fixtures (pseudo-stripe.css, pseudo-stripe.vue) pin four flag shapes (inset shorthand, longhand pins, bottom edge, height:100%) and six pass shapes (neutral divider, wide panel, static, hairline, hover-conditional underline, non-full-height badge), attributed per case via data-case selectors in the finding snippet. Prepared with AI assistance (Claude Code), directed by @pbakaus. Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
co-authored by
Claude Code
Claude Code
parent
af78b1e512
commit
b8f1dbf92c
@@ -86,6 +86,49 @@ describe('detectText - Astro structural CSS fixtures', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('detectText — pseudo-element stripe fixtures (issue #394)', () => {
|
||||
// The side-tab silhouette drawn as an absolutely-positioned ::before/::after
|
||||
// bar instead of a border. The scanner already ran on full HTML pages via
|
||||
// checkHtmlPatterns; these pin the standalone-stylesheet and component
|
||||
// style-block paths, which used to pass this construction clean.
|
||||
const SHOULD_FLAG = [
|
||||
'Inset Shorthand Left Edge',
|
||||
'Longhand Left Edge',
|
||||
'Bottom Edge',
|
||||
'Full Height Right Edge',
|
||||
];
|
||||
const SHOULD_PASS = [
|
||||
'Neutral Divider',
|
||||
'Wide Panel',
|
||||
'Static Underline',
|
||||
'Hairline Divider',
|
||||
'Hover Underline',
|
||||
'Floating Badge',
|
||||
];
|
||||
|
||||
it('standalone .css files flag chromatic pseudo-element stripes only', () => {
|
||||
const filePath = path.join(FIXTURES, 'pseudo-stripe.css');
|
||||
const source = fs.readFileSync(filePath, 'utf8');
|
||||
const findings = detectText(source, filePath).filter(r => r.antipattern === 'side-tab');
|
||||
const snippets = findings.map(r => r.snippet || '').join(' | ');
|
||||
for (const heading of SHOULD_FLAG) {
|
||||
assert.match(snippets, new RegExp(`data-case=${JSON.stringify(heading)}`), `expected "${heading}" to flag`);
|
||||
}
|
||||
for (const heading of SHOULD_PASS) {
|
||||
assert.doesNotMatch(snippets, new RegExp(`data-case=${JSON.stringify(heading)}`), `"${heading}" should pass`);
|
||||
}
|
||||
});
|
||||
|
||||
it('component style blocks flag pseudo-element stripes', () => {
|
||||
const filePath = path.join(FIXTURES, 'pseudo-stripe.vue');
|
||||
const source = fs.readFileSync(filePath, 'utf8');
|
||||
const findings = detectText(source, filePath).filter(r => r.antipattern === 'side-tab');
|
||||
const snippets = findings.map(r => r.snippet || '').join(' | ');
|
||||
assert.match(snippets, /data-case="Component Left Edge"/, 'expected the component stripe to flag');
|
||||
assert.doesNotMatch(snippets, /data-case="Component Neutral Divider"/, 'neutral divider should pass');
|
||||
});
|
||||
});
|
||||
|
||||
describe('detectHtml — static HTML/CSS fixtures', () => {
|
||||
it('should-flag: catches border anti-patterns', async () => {
|
||||
const f = await detectHtml(path.join(FIXTURES, 'should-flag.html'));
|
||||
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
/*
|
||||
* Pseudo-element stripe fixture for the regex engine (issue #394).
|
||||
*
|
||||
* The side-tab silhouette built as an absolutely-positioned ::before/::after
|
||||
* bar instead of a border. scanCssTextForPseudoStripe already caught these on
|
||||
* full HTML pages; this fixture pins the standalone-stylesheet path. The
|
||||
* data-case attribute in each selector lands in the finding snippet, so the
|
||||
* test can attribute every flag/pass case individually.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--stripe-fixture-neutral: #e5e7eb;
|
||||
}
|
||||
|
||||
/* ── FLAG: the issue reproducer — inset shorthand pin + 4px chromatic bar ── */
|
||||
.card[data-case="Inset Shorthand Left Edge"]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
width: 4px;
|
||||
background: #7c3aed;
|
||||
}
|
||||
|
||||
/* ── FLAG: longhand edge pins; unresolvable var() errs toward detection ── */
|
||||
.card[data-case="Longhand Left Edge"]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
/* ── FLAG: horizontal variant riding the bottom edge ── */
|
||||
.card[data-case="Bottom Edge"]::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 4px;
|
||||
background: #f43f5e;
|
||||
}
|
||||
|
||||
/* ── FLAG: height:100% full-height stripe on the right edge ── */
|
||||
.card[data-case="Full Height Right Edge"]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 3px;
|
||||
background: oklch(60% 0.2 300);
|
||||
}
|
||||
|
||||
/* ── PASS: neutral gray divider is not an accent stripe ── */
|
||||
.card[data-case="Neutral Divider"]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
width: 4px;
|
||||
background: var(--stripe-fixture-neutral);
|
||||
}
|
||||
|
||||
/* ── PASS: 24px is a panel, not a stripe ── */
|
||||
.card[data-case="Wide Panel"]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
width: 24px;
|
||||
background: #7c3aed;
|
||||
}
|
||||
|
||||
/* ── PASS: no position: absolute — not an overlay stripe ── */
|
||||
.card[data-case="Static Underline"]::before {
|
||||
content: "";
|
||||
width: 4px;
|
||||
background: #7c3aed;
|
||||
}
|
||||
|
||||
/* ── PASS: 1px hairline is a divider ── */
|
||||
.card[data-case="Hairline Divider"]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
width: 1px;
|
||||
background: #7c3aed;
|
||||
}
|
||||
|
||||
/* ── PASS: hover-conditional underline is an affordance, not decoration ── */
|
||||
.link-row[data-case="Hover Underline"]:hover::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 4px;
|
||||
background: #7c3aed;
|
||||
}
|
||||
|
||||
/* ── PASS: pinned to one edge but not full-height — a badge, not a stripe ── */
|
||||
.card[data-case="Floating Badge"]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 12px;
|
||||
background: #7c3aed;
|
||||
}
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="body">Component with a pseudo-element stripe in its style block</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const label = 'pseudo-stripe fixture';
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* FLAG: same silhouette as a border side-tab, drawn as a ::before bar */
|
||||
.card[data-case="Component Left Edge"]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
width: 4px;
|
||||
background: #7c3aed;
|
||||
}
|
||||
|
||||
/* PASS: neutral hairline divider */
|
||||
.card[data-case="Component Neutral Divider"]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
width: 1px;
|
||||
background: #e5e7eb;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user