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>

cli/engine/engines/regex/detect-text.mjs

@@ -2,7 +2,7 @@ import { GENERIC_FONTS, OVERUSED_FONTS, EM_DASH_FLOOR, EM_DASH_CHARS_PER_DASH }
 import { isNeutralColor } from '../../shared/color.mjs';
 import { extractGoogleFontFamilies } from '../../shared/fonts.mjs';
 import { checkSourceDesignSystem } from '../../design-system.mjs';
-import { scanCssTextForGlow, scanCssTextForGridBackground, scanCssTextForMarquee, scanCssTextForRadialHalo } from '../../rules/checks.mjs';
+import { scanCssTextForGlow, scanCssTextForGridBackground, scanCssTextForMarquee, scanCssTextForPseudoStripe, scanCssTextForRadialHalo } from '../../rules/checks.mjs';
 import { isFullPage } from '../../shared/page.mjs';
 import { applyInlineIgnores } from '../../shared/inline-ignores.mjs';
 import { finding } from '../../findings.mjs';
@@ -653,7 +653,15 @@ function detectText(content, filePath, options = {}) {
     profile,
     phase: 'source',
   }));
-  if (cssLike.has(ext)) findings.push(...scanInsetStripeCss(content, filePath));
+  if (cssLike.has(ext)) {
+    findings.push(...scanInsetStripeCss(content, filePath));
+    // Pseudo-element stripes (::before/::after absolute bars) carry the same
+    // side-tab silhouette without any border token, so the line matchers
+    // can't see them (issue #394). The shared scanner already runs on full
+    // HTML pages via checkHtmlPatterns; give standalone stylesheets the
+    // same coverage.
+    findings.push(...scanCssTextForPseudoStripe(content).map(hit => finding(hit.id, filePath, hit.snippet)));
+  }
 
   // Block-level CSS checks that need multiple declarations must run over the
   // complete source, not line-by-line. This covers standalone stylesheets,
@@ -690,6 +698,7 @@ function detectText(content, filePath, options = {}) {
     // reported every selector one line low. runRegexMatchers keeps startLine - 1
     // because it indexes its split lines from zero.
     findings.push(...scanInsetStripeCss(block.content, filePath, block.startLine - 2));
+    findings.push(...scanCssTextForPseudoStripe(block.content).map(hit => finding(hit.id, filePath, hit.snippet)));
   }
 
   // Extract and scan CSS-in-JS template literals
@@ -708,6 +717,7 @@ function detectText(content, filePath, options = {}) {
       phase: 'css-in-js',
     }));
     findings.push(...scanInsetStripeCss(block.content, filePath, block.startLine - 1));
+    findings.push(...scanCssTextForPseudoStripe(block.content).map(hit => finding(hit.id, filePath, hit.snippet)));
   }
 
   if (options?.designSystem) {

tests/detect-antipatterns-fixtures.test.mjs

@@ -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'));

tests/fixtures/antipatterns/pseudo-stripe.css

@@ -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;
+}

tests/fixtures/antipatterns/pseudo-stripe.vue

@@ -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>