Clean up <ThemeProvider> and various CSS related stuff (#5611)

* Clean CSS injection

* Clean up nonce usage

* Remove nonce from <ThemeProvider>

* Rename <WebChatTheme> to <Inject*CSS>

* Clean up

* Add comment

* Add comment

* Fix identifier

* Remove nonce requirement

* Direct inject after building style elements

* Add entry

* Remove launcher experience

* Fix imports

* Fix imports

* Fix tests

* Better imports

* Use Happy DOM

* Return children as-is

* Remove unnecessary files

* Dedupe across instances

* Add test

* Use hooks

* Mvoe from hook to leaf node

* Move to create CSS function

* Fix tsup

* Allow rectifying twice

* Mark nonce as optional

* Reverse order

* Add component

* Add /component

* Remove snapshots

* Fix script-0.mjs

* Fix script-0.mjs

* Fix styleOptions

* Allow cascaded rectify style options

* Separate stylesRoot from fluent-theme

* Mark stylesRoot as optional

* Componentize <InjectStyleElements>

* Fix --watch 200

* Fix flakiness

* Fix test

* Fix test

* Fix --watch 200

* Move stylesheet to bottommost on re-inject

* Fix hideScrollToEndButton

* Fix hideScrollToEndButton

* Clean up

* Clean up

* Clean up

* Rename *CSS -> *Stylesheet

* Componentize as <FluentThemeStylesheet>

* Rename to <CSSCustomPropertiesContainer>

* Fix tests

* Fix styleRoots and import hooks

* Add importmap for hook

* Move InjectStyleElements to styles package

* Yellow instead of white

* Add styles as devDependencies

* Fix import map

* Retrigger checks

Author: compulim

CHANGELOG.md

@@ -144,6 +144,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
       - `import { hooks } from 'botframework-webchat'` should be replaced by `import * as hooks from 'botframework-webchat/hook'`
    - Added target to Chrome 100 and re-enable Lightning CSS for ESM builds, by [@compulim](https://github.com/compulim) in PR [#5602](https://github.com/microsoft/BotFramework-WebChat/pull/5602)
 - Relaxed `role` prop to allow any string instead of ARIA landmark roles, in PR [#5561](https://github.com/microsoft/BotFramework-WebChat/pull/5561), by [@compulim](https://github.com/compulim)
+- Cleaned up `<ThemeProvider>` and various CSS related code, in PR [#5611](https://github.com/microsoft/BotFramework-WebChat/pull/5611), by [@compulim](https://github.com/compulim)
 
 ### Changed
 

__tests__/__image_snapshots__/html/hooks-use-inject-styles-change-nonce-js-use-inject-styles-should-change-nonce-2-snap.png

@@ -56,7 +56,7 @@
           );
 
           render(
-            <FluentThemeProvider>
+            <FluentThemeProvider nonce="test" stylesRoot={this.shadowRoot}>
               <App />
             </FluentThemeProvider>,
             container

__tests__/html/fluentTheme/customElement/shadowRoot.html

@@ -11,7 +11,9 @@
         "@fluentui/tokens": "https://esm.sh/@fluentui/tokens?deps=react@18&exports=createDarkTheme,webLightTheme",
         "@testduet/wait-for": "https://unpkg.com/@testduet/wait-for@main/dist/wait-for.mjs",
         "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+        "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
         "botframework-webchat/decorator": "/__dist__/packages/bundle/static/botframework-webchat/decorator.js",
+        "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
         "botframework-webchat/internal": "/__dist__/packages/bundle/static/botframework-webchat/internal.js",
         "botframework-webchat-fluent-theme": "/__dist__/packages/fluent-theme/static/botframework-webchat-fluent-theme.js",
         "react": "https://esm.sh/react@18",
@@ -57,7 +59,7 @@
 
     // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
     window.WebChat = { createStoreWithOptions };
-    
+
     run(async function () {
       const { directLine, store } = createDirectLineEmulator();
 
@@ -276,7 +278,7 @@
           author
         }]
       });
-      
+
       await pageConditions.numActivitiesShown(6);
       await host.snapshot('local');
 
@@ -362,4 +364,4 @@
   </script>
 </body>
 
-</html>
+</html>

__tests__/html/hooks.useInjectStyles.changeNonce.js

@@ -11,8 +11,10 @@
         "@fluentui/tokens": "https://esm.sh/@fluentui/tokens?deps=react@18&exports=createDarkTheme,webLightTheme",
         "@testduet/wait-for": "https://unpkg.com/@testduet/wait-for@main/dist/wait-for.mjs",
         "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+        "botframework-webchat/component": "/__dist__/packages/bundle/static/botframework-webchat/component.js",
         "botframework-webchat/decorator": "/__dist__/packages/bundle/static/botframework-webchat/decorator.js",
         "botframework-webchat/internal": "/__dist__/packages/bundle/static/botframework-webchat/internal.js",
+        "botframework-webchat/hook": "/__dist__/packages/bundle/static/botframework-webchat/hook.js",
         "botframework-webchat-fluent-theme": "/__dist__/packages/fluent-theme/static/botframework-webchat-fluent-theme.js",
         "react": "https://esm.sh/react@18",
         "react-dom": "https://esm.sh/react-dom@18",
@@ -334,10 +336,10 @@
         'mailto:support+roadmap@example.com?subject=Roadmap%20Review%20%5BTemplate%5D&body=Please%20review%20slide%203.%0AThanks%21',
         'https://example.sharepoint.com/sites/Docs/Q1%231%20Plan.pptx'
       ]);
-      
+
       await host.snapshot('local');
     });
   </script>
 </body>
 
-</html>
+</html>