mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-19 17:46:36 +03:00
Paul BakausandClaude Code
b8f1dbf92c
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>
30 lines
639 B
Vue
30 lines
639 B
Vue
<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>
|