ESM static build should target Chrome 100 with Lightning CSS (#5602)

* Fix Fluent CSS

* Update PR number

Author: compulim

CHANGELOG.md

@@ -142,6 +142,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
    - Bundling vendor chunks, by [@compulim](https://github.com/compulim) in PR [#5595](https://github.com/microsoft/BotFramework-WebChat/pull/5595)
    - Added deprecation notes for legacy imports, by [@compulim](https://github.com/compulim) in PR [#5600](https://github.com/microsoft/BotFramework-WebChat/pull/5600)
       - `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)
 
 ### Changed

__tests__/html2/simple/fatModule/esm.sh/fluentTheme.html.snap-1.png

@@ -0,0 +1,31 @@
+import lightningCssPlugin from 'unplugin-lightningcss/esbuild';
+
+// 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`.
+// Otherwise, unplugin will apply `filter: /.*/` and trigger the bug down the road.
+
+/** @type { import('esbuild').Plugin } */
+const cssPlugin = {
+  name: 'lightningcss',
+  setup: build => {
+    lightningCssPlugin({
+      include: [/\.module\.css$/u],
+      options: {
+        cssModules: {
+          pattern: 'w[hash]_[local]',
+          pure: true,
+          animation: false,
+          grid: false,
+          customIdents: false
+        }
+      }
+    }).setup({
+      ...build,
+      // eslint-disable-next-line require-unicode-regexp
+      onLoad: (_filter, fn) => build.onLoad({ filter: /(\.module_built\.css|\?css_module)$/ }, fn)
+    });
+  }
+};
+
+export { cssPlugin };

__tests__/html2/simple/fatModule/esm.sh/tsx/fluentTheme.html.snap-1.png

@@ -9,6 +9,7 @@ import { build, context } from 'esbuild';
 import { resolve } from 'path';
 import { readPackage } from 'read-pkg';
 import { fileURLToPath } from 'url';
+import { cssPlugin } from '../../esbuildPlugins.mjs';
 
 // eslint-disable-next-line no-unused-vars
 const isomorphicReactPlugin = {
@@ -73,8 +74,10 @@ const BASE_CONFIG = {
   minify: true,
   outdir: resolve(fileURLToPath(import.meta.url), `../static/`),
   platform: 'browser',
+  plugins: [cssPlugin],
   sourcemap: true,
-  splitting: true
+  splitting: true,
+  target: ['chrome100', 'firefox100', 'safari15']
 };
 
 function* getKeysRecursive(exports) {

__tests__/html2/simple/fatModule/fluentTheme.html.snap-1.png

@@ -10,6 +10,7 @@ import { build, context } from 'esbuild';
 import { mkdir, writeFile } from 'fs/promises';
 import { dirname, resolve } from 'path';
 import { fileURLToPath } from 'url';
+import { cssPlugin } from '../../esbuildPlugins.mjs';
 
 // TODO: [P0] We cannot import TypeScript file here.
 const fluentStyleContentPlaceholder = '@--FLUENT-STYLES-CONTENT--@';
@@ -53,6 +54,7 @@ const config = {
   outdir: resolve(fileURLToPath(import.meta.url), `../static/`),
   platform: 'browser',
   plugins: [
+    cssPlugin,
     injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder }),
     {
       // `write` is set to `false`, we need to emit files ourselves.
@@ -74,6 +76,7 @@ const config = {
   ],
   sourcemap: true,
   splitting: true,
+  target: ['chrome100', 'firefox100', 'safari15'],
   // Set write to false for the `injectCSSPlugin` to work.
   // We will emit the output in another plugin.
   write: false

esbuildPlugins.mjs

@@ -1,8 +1,7 @@
-import { type Plugin } from 'esbuild';
 import { type Options } from 'tsup';
-import lightningCssPlugin from 'unplugin-lightningcss/esbuild';
 
 import { babelPlugin, defaultPredicate, type Predicate } from './esbuildBabelPluginIstanbul';
+import { cssPlugin } from './esbuildPlugins.mjs';
 
 type Target = Exclude<Options['target'], Array<unknown> | undefined>;
 
@@ -21,32 +20,6 @@ const disablePlugin = (pluginName: string): EsbuildPlugin => ({
   }
 });
 
-// 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`.
-// Otherwise, unplugin will apply `filter: /.*/` and trigger the bug down the road.
-const cssPlugin: Plugin = {
-  name: 'lightningcss',
-  setup: build => {
-    lightningCssPlugin({
-      include: [/\.module\.css$/u],
-      options: {
-        cssModules: {
-          pattern: 'w[hash]_[local]',
-          pure: true,
-          animation: false,
-          grid: false,
-          customIdents: false
-        }
-      }
-    }).setup({
-      ...build,
-      // eslint-disable-next-line require-unicode-regexp
-      onLoad: (_filter, fn) => build.onLoad({ filter: /(\.module_built\.css|\?css_module)$/ }, fn)
-    });
-  }
-};
-
 function applyConfig(
   overrideOptions: (
     options: Omit<Options, 'entry' | 'onSuccess'> & {