[Eugene (OEvgeny)]

Fluent styles Web Chat elements by their readable class names (:global(.bubble)), so Web Chat cannot drop or rename them.

Changelog Entry

None: internal refactoring with no visible change, label no-changelog.

Description

Fluent's CSS modules selected 101 class names of Web Chat CSS modules through :global(). Fluent's rules for Web Chat elements now live in one override CSS module, which FluentThemeProvider passes whole through <CSSModuleThemeComposer> (#5984). Each element gets at most two Fluent classes.

Design

• fluent-theme/src/private/fluentCSSModuleTheme.module.css: rules moved unchanged from Fluent's PartGroupingDecorator, SendBox and Theme modules, keeping order, regions and scope, so the cascade does not change
• A rule without styles keeps its class with --webchat-preserve-reason: target-class;, which esbuildPlugins.mjs strips after the class map is built; vibe-grep fails the build if one is left

Specific Changes

• FluentThemeProvider: wraps everything in <CSSModuleThemeComposer>
• ActivityButton, SendBox: classes for themes, kept by the declaration above
• fluentCSSModuleTheme.spec.ts: only the override module uses Web Chat local names, never through :global()
• root package.json: lightningcss dev dependency (1.32.0, as installed today)
• No snapshot changes in the Fluent html2 tests

• I have added tests and executed them locally
• I have added .changelog/<PR#>-<slug>.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)

[Eugene (OEvgeny)]

PR 1 follow-up: Fluent override modules (old → new map)

Rules moved verbatim (same selectors and declarations), re-wrapped in their original scope
(:global(.webchat-fluent) .part-grouping-decorator {…}, :global(.webchat-fluent).theme, :global(.webchat-fluent) .sendbox__attachment-bar…).
One override module per Web Chat CSS module, under packages/fluent-theme/src/overrides/, each passed whole to <CSSModuleThemeComposer>.

Old (packages/fluent-theme/src/components/…)	New (packages/fluent-theme/src/overrides/…)
activity/PartGroupingDecorator.module.css	ActivityButton, ActivityStatus, AdaptiveCardRenderer, BorderFlair, Bubble, CarouselFilmStrip, CodeBlockContent, CodeBlockCopyButton, CollapsibleContent, CollapsibleGrouping, ComponentIcon, LinkDefinitions, MessageStatusLoader, PartGroupingActivity, RenderMarkdown, StackedLayout, TextContent, TranscriptFocus
sendBox/SendBox.module.css	AttachmentBar, AttachmentBarItem, FilePreview
theme/Theme.module.css	ActivityButton, AnimatedImageContent, Bubble, CodeBlock, CodeBlockContent, CodeBlockCopyButton, CollapsibleGrouping, FeedbackForm, ThumbButton, TranscriptFocus, ViewCodeDialog

Rule file: the module of the Web Chat local name closest to the rule's subject.
Fluent's own rules stay in Fluent's modules. SendBox.module.css keeps .sendbox__attachment-bar through
--webchat-preserve-reason: target-class, because its only rule moved and the override rule scopes by it.
Removed: fluentCSSModuleOverrides.ts (lists), pickCSSModule.ts. Spec renamed to fluentCSSModuleTheme.spec.ts.

Commits (on top of baed602):

• 6aeacbf preserve marker + second Lightning CSS pass
• c310cf0 feedback form, thumb buttons
• fb0812f code blocks
• 66028d0 send box
• 4c7366a transcript focus
• 4ddeb96 activity layout
• 7736c88 part grouping
• 78b3ada text and Markdown
• 4a79ead Adaptive Cards, animated images
• 518cd05 drop lists and pickCSSModule
• ba8d210 buttonText → ButtonText in overrides/ActivityButton.module.css (maintainer-lint; CSS system colors are case-insensitive)

Tests (stack 3, --maxWorkers 1), all after the last CSS change except where noted:

• 241 Fluent html2 tests at 518cd05: S/pr1split-html2.log (14 failed: timeouts, images not loaded, 2 flaky snaps) → re-run alone S/pr1split-rerun.log (12/14) → S/pr1split-rerun2.log (2/2). 0 snapshot diffs remain.
• At ba8d210: collapsible, part-grouping, forcedColors: S/pr1split-final.log (37/38, 215 snaps) + S/pr1split-final-rerun.log (navigation.html 1/1).
• 8a8dd78 keeps the scrollbar block whole in overrides/CodeBlockContent.module.css (it had been split, with the thumb rule for :hover and a focused text area input in a TextArea override that loaded later, so a 3 px border beat the 1 px thumb-hover border at equal specificity 0,6,1). overrides/TextArea.module.css is gone.
• At 8a8dd78: 66 Fluent send box, text area, code block, attachment and scroll tests: 65 passed, 1 skipped, 121 snaps (S/pr1fix-html2.log).

Cascade check (S/cascade-check.mjs <worktree> baed602d7): for every pair of Fluent rules that may style the same element (subject compound shares a non-scope class, same pseudo-element and at-rule), declare the same property, and have equal specificity, it reports pairs whose order changed. Before the fix: the scrollbar pairs; after: 0 (S/cascade-check2.log). Split blocks (expected, by design): S/split-report.log.

Tools: ~/webchat-tools/scratch/css-fluent-context/split-overrides.mjs, regen-theme.mjs.
Rule-set equivalence (Lightning CSS, nesting lowered, [local] names) at 8a8dd78: 329 rules before, 330 after; the only differences are buttonText → ButtonText and the new .sendbox__attachment-bar { --webchat-preserve-reason } rule, which the build strips.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota. Try requesting a review at a lower effort level.