Fluent: QoL improvements (#5327)

* Check CI

* Try again

* Minify on test

* Better short-term fix

* Remove debug

* Better wording

* Changelog

Author: OEvgeny

CHANGELOG.md

@@ -84,7 +84,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Fixes [#5306](https://github.com/microsoft/BotFramework-WebChat/issues/5306). Title and subtitle in pre-chat message activity should wrap, in PR [#5307](https://github.com/microsoft/BotFramework-WebChat/pull/5307), by [@compulim](https://github.com/compulim)
 -  Fixes [#5319](https://github.com/microsoft/BotFramework-WebChat/issues/5319). Some Markdown text are not rendered after HTML tags, in PR [#5320](https://github.com/microsoft/BotFramework-WebChat/pull/5320), by [@compulim](https://github.com/compulim)
 -  Fixes [#5323](https://github.com/microsoft/BotFramework-WebChat/issues/5323). Removed unused CSS class from carousel component, eliminating unintended styling, in PR [#5325](https://github.com/microsoft/BotFramework-WebChat/pull/5325), by [@OEvgeny](https://github.com/OEvgeny)
--  Resolved CSS class name conflicts between component and fluent packages to prevent styling issues, in PR [#5326](https://github.com/microsoft/BotFramework-WebChat/pull/5326), by [@OEvgeny](https://github.com/OEvgeny)
+-  Resolved CSS class name conflicts between component and fluent packages to prevent styling issues, in PR [#5326](https://github.com/microsoft/BotFramework-WebChat/pull/5326), in PR [#5327](https://github.com/microsoft/BotFramework-WebChat/pull/5327), by [@OEvgeny](https://github.com/OEvgeny)
 
 # Removed
 

docker-compose-wsl2.yml

@@ -48,6 +48,8 @@ services:
       - ./packages/test/fluent-bundle/dist/:/var/web/packages/test/fluent-bundle/dist/
       - ./packages/test/harness/dist/:/var/web/packages/test/harness/dist/
       - ./packages/test/page-object/dist/:/var/web/packages/test/page-object/dist/
+    ports:
+      - '5081:80'
 
   jest-server:
     build:

packages/component/src/decorator/private/BorderFlair.module.css

@@ -86,7 +86,7 @@
   }
 }
 
-:global(.webchat) .border-flair:global(.border-flair) {
+:global(.webchat) .border-flair {
   /* Configurable variables */
   --webchat-decorator-borderFlair-color1: var(--webchat-borderFlair-color1, var(--webchat__border-animation--color-1));
   --webchat-decorator-borderFlair-color2: var(--webchat-borderFlair-color2, var(--webchat__border-animation--color-2));
@@ -126,7 +126,7 @@
   position: absolute;
 }
 
-:global(.webchat) .border-flair--complete:global(.border-flair--complete) {
+:global(.webchat) .border-flair--complete {
   animation-play-state: paused;
 }
 
@@ -538,7 +538,7 @@
     }
   }
 
-  :global(.webchat) .border-flair:global(.border-flair) {
+  :global(.webchat) .border-flair {
     --webchat-decorator-borderFlair-animated-angle: calc(0.75 + 2 * var(--webchat-decorator-borderFlair-animated));
     --webchat-decorator-borderFlair-animated-color1: color-mix(
       in srgb,

packages/component/src/decorator/private/BorderLoader.module.css

@@ -10,11 +10,11 @@
   }
 }
 
-:global(.webchat) .border-loader:global(.border-loader) {
+:global(.webchat) .border-loader {
   border-radius: inherit;
 }
 
-:global(.webchat) .border-loader__track:global(.border-loader__track) {
+:global(.webchat) .border-loader__track {
   --webchat-decorator-borderLoader-borderSize: var(--webchat-borderLoader-borderSize, 4px);
 
   background-color: var(--webchat-colorNeutralBackground6, #e6e6e6);
@@ -23,7 +23,7 @@
   width: 100%;
 }
 
-:global(.webchat) .border-loader__loader:global(.border-loader__loader) {
+:global(.webchat) .border-loader__loader {
   --webchat-decorator-borderLoader-color1: var(--webchat-borderLoader-color1, var(--webchat__border-animation--color-1));
   --webchat-decorator-borderLoader-color2: var(--webchat-borderLoader-color2, var(--webchat__border-animation--color-2));
   --webchat-decorator-borderLoader-color3: var(--webchat-borderLoader-color3, var(--webchat__border-animation--color-3));

packages/fluent-theme/src/components/activity/ActivityDecorator.module.css

@@ -88,15 +88,15 @@
     margin-inline-start: 28px;
   }
 
-  :global(.border-loader):global(.border-loader) {
+  :global(.border-loader) {
     display: flex;
     flex-flow: column nowrap;
     gap: var(--webchat-spacingVerticalS);
     padding-inline-end: var(--webchat-spacingHorizontalM);
     width: 500px;
   }
 
-  :global(.border-loader__track):global(.border-loader__track) {
+  :global(.border-loader__track) {
     border-radius: inherit;
     box-sizing: border-box;
     clip-path: border-box;

packages/fluent-theme/src/components/theme/Theme.module.css

@@ -1,3 +1,11 @@
+:global {
+  /* biome-ignore format: do not print each class on the new line */
+  .a, .b, .c, .d, .e, .f, .g, .h, .i, .j, .k, .l, .m, .n, .o, .p, .q, .r, .s, .t, .v, .w, .u, .x, .y, .z,
+  .A, .B, .C, .D, .E, .F, .G, .H, .I, .J, .K, .L, .M, .N, .O, .P, .Q, .R, .S, .T, .V, .W, .U, .X, .Y, .Z {
+    /* biome-ignore lint: esbuild considers empty global classes as used and removes them due to lack of rules */
+  }
+}
+
 :global(.webchat-fluent).theme {
   display: contents;
 

tsup.base.config.ts

@@ -51,7 +51,7 @@ const baseConfig: Options & { target: Target[] } = {
   format: 'esm',
   loader: { '.js': 'jsx' },
   metafile: true,
-  minify: env === 'production',
+  minify: env === 'production' || env === 'test',
   platform: 'browser',
   sourcemap: true,
   splitting: true,