Workaround unplugin bug

Author: compulim

packages/bundle/tsup.config.ts

@@ -44,8 +44,7 @@ const commonConfig = applyConfig(config => ({
     SPEECH_CONDUCT_OCSP_CHECK: '',
     SPEECH_OCSP_CACHE_ROOT: ''
   },
-  // Intentionally overriding existing esbuild plugins.
-  esbuildPlugins: [resolveCognitiveServicesToES2015],
+  esbuildPlugins: [...(config.esbuildPlugins ?? []), resolveCognitiveServicesToES2015],
   noExternal: [
     ...(config.noExternal ?? []),
     '@babel/runtime',
@@ -76,7 +75,7 @@ export default defineConfig([
       'webchat-es5': './src/boot/bundle/full-es5.ts',
       'webchat-minimal': './src/boot/bundle/minimal.ts'
     },
-    esbuildPlugins: [...commonConfig.esbuildPlugins, resolveReact],
+    esbuildPlugins: [...(commonConfig.esbuildPlugins ?? []), resolveReact],
     format: 'iife',
     outExtension() {
       return { js: '.js' };

packages/directlinespeech/tsup.config.ts

@@ -31,8 +31,7 @@ const config = applyConfig(config => ({
     SPEECH_CONDUCT_OCSP_CHECK: '',
     SPEECH_OCSP_CACHE_ROOT: ''
   },
-  // Intentionally overriding existing esbuild plugins.
-  esbuildPlugins: [resolveCognitiveServicesToES2015],
+  esbuildPlugins: [...(config.esbuildPlugins ?? []), resolveCognitiveServicesToES2015],
   // We need to internalize event-target-shim because it appear as transient packages with a different version.
   noExternal: [...(config.noExternal ?? []), 'event-target-shim']
 }));

packages/fluent-theme/tsup.config.ts

@@ -56,7 +56,7 @@ export default defineConfig([
     },
     entry: { 'botframework-webchat-fluent-theme': './src/index.ts' },
     esbuildPlugins: [
-      ...(config.esbuildPlugins || []),
+      ...(config.esbuildPlugins ?? []),
       injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder })
     ],
     format: ['cjs'],
@@ -70,7 +70,7 @@ export default defineConfig([
     },
     entry: { 'botframework-webchat-fluent-theme': './src/index.ts' },
     esbuildPlugins: [
-      ...(config.esbuildPlugins || []),
+      ...(config.esbuildPlugins ?? []),
       injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder })
     ],
     format: ['esm']
@@ -83,7 +83,7 @@ export default defineConfig([
     },
     entry: { 'botframework-webchat-fluent-theme.development': './src/bundle.ts' },
     esbuildPlugins: [
-      // ...(config.esbuildPlugins || []),
+      ...(config.esbuildPlugins ?? []),
       injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder }),
       umdResolvePlugin
     ],
@@ -100,7 +100,7 @@ export default defineConfig([
     },
     entry: { 'botframework-webchat-fluent-theme.production.min': './src/bundle.ts' },
     esbuildPlugins: [
-      // ...(config.esbuildPlugins || []),
+      ...(config.esbuildPlugins ?? []),
       injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder }),
       umdResolvePlugin
     ],

tsup.base.config.ts

@@ -1,3 +1,4 @@
+import { type Plugin } from 'esbuild';
 import { type Options } from 'tsup';
 import lightningCssPlugin from 'unplugin-lightningcss/esbuild';
 
@@ -9,8 +10,8 @@ const env = process.env.NODE_ENV || 'development';
 const { npm_package_version } = process.env;
 const istanbulPredicate: Predicate = args => defaultPredicate(args) && !/\.worker\.[cm]?[jt]s$/u.test(args.path);
 
-type Plugin = NonNullable<Options['plugins']>[number];
-const disablePlugin = (pluginName: string): Plugin => ({
+type EsbuildPlugin = NonNullable<Options['plugins']>[number];
+const disablePlugin = (pluginName: string): EsbuildPlugin => ({
   name: `disable-plugin-${pluginName}`,
   esbuildOptions: options => {
     const plugin = options.plugins?.find(({ name }) => name === pluginName);
@@ -20,34 +21,47 @@ const disablePlugin = (pluginName: string): Plugin => ({
   }
 });
 
-const cssPlugin = lightningCssPlugin({
-  include: [/\.module\.css$/u],
-  options: {
-    cssModules: {
-      pattern: 'w[hash]_[local]',
-      pure: true,
-      animation: false,
-      grid: false,
-      customIdents: false
-    }
+// 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'> & {
       define: Record<string, string>;
-      esbuildPlugins: Plugin[];
+      esbuildPlugins: EsbuildPlugin[];
       target: Target[];
     }
   ) => Options & {
     define: Record<string, string>;
-    esbuildPlugins: Plugin[];
+    esbuildPlugins: EsbuildPlugin[];
     target: Target[];
   }
 ): Options & {
   define: Record<string, string>;
-  esbuildPlugins: Plugin[];
+  esbuildPlugins: EsbuildPlugin[];
   target: Target[];
 } {
   const nextOptions = overrideOptions({