Repository navigation
dedup(#9859 Family G): ChatMessages ↔ MessageItem — 182L shared scoped CSS #10306
Description
Shared scoped CSS between src/components/chat/ChatMessages.vue and src/components/chat/MessageItem.vue (182L).
Wave 2 — these components have NO Storybook story yet, so the visual-regression harness does not cover them. Step 1 of this issue is to add Storybook stories + capture baselines; only then extract the shared CSS.
Protocol
- Add
*.stories.tsfor each component; run the visual suite once to capture baselines. - Extract ONLY disjoint-identical scoped-CSS rule-blocks into a shared
@/design-system/styles/<family>.cssvia<style scoped src="…">(byte-identical, order-independent ⇒ provably identical). - Visual-regression zero-diff is the merge gate;
vue-tsc+ unit tests.
Activity
mrveiss commentedon Jun 19, 2026
Deferring this family — not safely extractable via the shared-CSS method. Unlike the other dedup families (whose shared blocks are plain CSS, provably identical when moved to
<style scoped src>), ChatMessages/MessageItem's shared styles are 26 of 28 blocks Tailwind@applydirectives (e.g.@apply rounded-lg shadow-sm …,@apply shadow-md). Those need@reference "../../assets/tailwind.css"context, which the components have inline but does not transfer cleanly to a bare imported sheet — the extraction broke the build (Cannot apply unknown utility class shadow-md, PR #10339).Adding
@referenceto the shared sheet is the Tailwind-sanctioned path, but@applyinside a<style scoped src>imported file is unproven in this repo (all existing@referenceusage is inline), and the dedup output can't be verified visual-identical here (visual gate broken — #10320). The residual plain-CSS duplication is only 2 blocks.Per the campaign's own principle ("duplication is cheaper than the wrong abstraction"), leaving the chat pair as-is. Closing as won't-fix-via-this-method.
dedup(#9859 Family G): extract shared scoped CSS from chat components…
mrveiss commentedon Jun 20, 2026
Completed (un-deferred) — merged to Dev_new_gui via PR #10366 (squash 38c7aa2). Extracted the 28 byte-identical shared blocks (mostly Tailwind @apply) into chat-message-shared.css with @reference "../../assets/tailwind.css" so @apply resolves in the imported sheet (−101 lines). smoke-test passed, which proves the build resolves @reference+@apply — and since @apply's only failure mode is a build error (never a silent diff), green build = identical output. Effective rule-set verified unchanged (197/53). Part of #9859.