Fluent: style Web Chat elements through the CSS module theme

esbuildPlugins.mjs

@@ -1,6 +1,17 @@
+import { Buffer } from 'buffer';
+import { transform } from 'lightningcss';
 import { fileURLToPath } from 'url';
 import lightningCssPlugin from 'unplugin-lightningcss/esbuild';
 
+// A CSS module rule without styles of its own keeps its class name (e.g. for themes) with this declaration:
+// Lightning CSS drops empty rules, and their class names with them.
+// Once the class map is built, the declaration, and the rule if it becomes empty, are removed from the CSS.
+const PRESERVE_REASON_PROPERTY = '--webchat-preserve-reason';
+
+const removePreserveReasonVisitor = Object.freeze({
+  Declaration: Object.freeze({ custom: Object.freeze({ [PRESERVE_REASON_PROPERTY]: () => [] }) })
+});
+
 // Due to a bug in unplugin, we cannot use the Lightning CSS unplugin directly.
 // https://github.com/unjs/unplugin/issues/546
 // To workaround the bug, we are converting it back to esbuild plugin so we can apply a custom `filter`.
@@ -26,8 +37,25 @@ const cssPlugin = {
       }
     }).setup({
       ...build,
-      // eslint-disable-next-line require-unicode-regexp
-      onLoad: (_filter, fn) => build.onLoad({ filter: /(\.module_built\.css|\?css_module)$/ }, fn)
+      onLoad: (_filter, fn) =>
+        // eslint-disable-next-line require-unicode-regexp
+        build.onLoad({ filter: /(\.module_built\.css|\?css_module)$/ }, async args => {
+          const result = await fn(args);
+
+          // Only the CSS of a CSS module, not its JavaScript class map, and only if it has the declaration.
+          return args.path.endsWith('.module_built.css') &&
+            typeof result?.contents === 'string' &&
+            result.contents.includes(PRESERVE_REASON_PROPERTY)
+            ? {
+                ...result,
+                contents: transform({
+                  code: Buffer.from(result.contents),
+                  filename: args.path,
+                  visitor: removePreserveReasonVisitor
+                }).code.toString()
+              }
+            : result;
+        })
     });
   }
 };

package.json

@@ -275,6 +275,7 @@
     "jest": "^29.7.0",
     "jest-image-snapshot": "^6.5.2",
     "keep-a-changelog": "^3.0.4",
+    "lightningcss": "^1.32.0",
     "lint-staged": "^17.0.5",
     "lolex": "^6.0.0",
     "minimatch": "^10.2.5",

packages/component/src/Attachment/Text/private/ActivityButton.module.css

@@ -46,4 +46,8 @@
       --webchat__component-icon--color: buttonText;
     }
   }
+
+  .activity-button__text {
+    --webchat-preserve-reason: target-class;
+  }
 }

packages/component/src/Attachment/Text/private/ActivityButton.tsx

@@ -64,7 +64,7 @@ const ActivityButton = forwardRef<HTMLButtonElement, ActivityButtonProps>((props
       type="button"
     >
       {icon && <ComponentIcon appearance="text" className={classNames['activity-button__icon']} icon={icon} />}
-      {text && <span className="activity-button__text">{text}</span>}
+      {text && <span className={classNames['activity-button__text']}>{text}</span>}
       {children}
     </button>
   );