Repository navigation
Add an internal CSS module theme context to useStyles(), shared by all packages - #5984
Merged
Merged
Conversation
added 2 commits
October 29, 2026 16:04
…l packages
- styles/react: CSSModuleThemeContext, combineCSSModules() (concatenates class names of the same local name),
<CSSModuleThemeComposer> (combines its theme with the one from a composer above), and
useStyles(styles, transform?) adding the theme classes of the same local name. The default transform keeps
today's output ("<local name> <hashed name>"); webChatPrefixedClassName() gives "webchat__<local name>".
- One runtime copy: the styles package is bundled into every package that imports it and each copy has its own
context. botframework-webchat-component/internal.js re-exports it (like InjectStyleElements), botframework-webchat
re-exports that, and bundle/Fluent use it instead of their own copy (enforced by no-restricted-imports).
- Tests: unit tests for combine/useStyles/composer, a dist test for one runtime copy, and an html2 test where a
composer above Fluent reaches component, bundle and Fluent elements.
…do not use the ambient CSSModuleClasses The typings of botframework-webchat/internal.js referred to CSSModuleClasses, which is declared only in the styles package's env.d.ts: consumers with skipLibCheck: false got TS2304.
Eugene (OEvgeny)
added
the
no-changelog
…the styles runtime
The package does not publish its esbuild metafiles ("files" in package.json), so the test found
none in CI, where packages are unpacked from npm pack tarballs.
Eugene (OEvgeny)
marked this pull request as ready for review
October 30, 2026 05:59
Eugene (OEvgeny)
requested review from
William Wong (compulim),
Chris Whitten (cwhitten) and
Thomas Durnford (tdurnford)
as code owners
October 30, 2026 05:59
William Wong (compulim)
approved these changes
Oct 30, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changelog Entry
None: internal plumbing with no visible change, label
no-changelog.Description
Fluent can only style Web Chat elements through readable class names (
:global(.bubble)).useStyles()now also adds the classes an internal<CSSModuleThemeComposer>above it provides for the same local name; without one, output is unchanged.Design
internal.js, likeInjectStyleElements; publishing the private package was the alternative.useStylestransform keeps<local> <hashed>;webChatPrefixedClassNameis ready for dropping plain names.Specific Changes
styles/react:CSSModuleThemeContext,combineCSSModules()(concatenates, frozen),CSSModuleThemeComposer, transforms,useStyles()no-restricted-importssharedStylesRuntime.spec.js: one copy in the buildsCSSModuleTheme: published typings check withskipLibCheck: falsecssModuleTheme.fluent.html: snapshot 1, a composer above Fluent outlines bubbles, Adaptive Card and send box.changelog/<PR#>-<slug>.mdReview Checklist
z-index)package.jsonandpackage-lock.jsonreviewed