feat(css): add bundleAllCSS option to control CSS asset inclusion in exposed modules (#347)

Author: pcfreak30

README.md

@@ -114,6 +114,10 @@ export default defineConfig({
       // You can set this to "entry" to inject it into the entry script instead.
       // Useful if your application does not load from index.html.
       hostInitInjectLocation: "html", // or "entry"
+      // Controls whether all CSS assets from the bundle should be added to every exposed module.
+      // When false (default), the plugin will not process any CSS assets.
+      // When true, all CSS assets are bundled into every exposed module.
+      bundleAllCSS: false, // or true
     }),
   ],
   server: {

src/plugins/pluginMFManifest.ts

@@ -163,7 +163,7 @@ const Manifest = (): Plugin[] => {
         }
 
         // Second pass: Collect all CSS assets
-        const allCssAssets = collectCssAssets(bundle);
+        const allCssAssets = mfOptions.bundleAllCSS ? collectCssAssets(bundle) : new Set<string>();
 
         const exposesModules = Object.keys(mfOptions.exposes).map(
           (item) => mfOptions.exposes[item].import
@@ -200,8 +200,10 @@ const Manifest = (): Plugin[] => {
         );
         processModuleAssets(bundle, filesMap, (modulePath) => fileToShareKey.get(modulePath));
 
-        // Add all CSS assets to every export
-        addCssAssetsToAllExports(filesMap, allCssAssets);
+        // Add all CSS assets to every export if bundleAllCSS is enabled
+        if (mfOptions.bundleAllCSS) {
+          addCssAssetsToAllExports(filesMap, allCssAssets);
+        }
 
         // Final deduplication of all assets
         filesMap = deduplicateAssets(filesMap);

src/utils/__tests__/cssModuleHelpers.test.ts

@@ -9,6 +9,7 @@ import {
   buildFileToShareKeyMap,
 } from '../cssModuleHelpers';
 import type { OutputBundleItem, PreloadMap } from '../cssModuleHelpers';
+import { normalizeModuleFederationOptions } from '../normalizeModuleFederationOptions';
 
 describe('cssModuleHelpers', () => {
   describe('createEmptyAssetMap', () => {
@@ -167,11 +168,54 @@ describe('cssModuleHelpers', () => {
         getNormalizeModuleFederationOptions: vi.fn(() => ({
           name: 'test-app',
           virtualModuleDir: '__mf_virtual_test',
+          bundleAllCSS: false,
+        })),
+        normalizeModuleFederationOptions: vi.fn((options) => ({
+          name: 'test-app',
+          virtualModuleDir: '__mf_virtual_test',
+          bundleAllCSS: options.bundleAllCSS || false,
         })),
       }));
 
       const result = await buildFileToShareKeyMap(shareKeys, resolveFn);
       expect(result.get('path/to/react.js')).toBe('react');
     });
   });
+
+  describe('bundleAllCSS option', () => {
+    it('should default bundleAllCSS to false when not specified', () => {
+      const options = normalizeModuleFederationOptions({
+        name: 'test-app',
+        exposes: {
+          './Button': './src/Button.jsx',
+        },
+      });
+
+      expect(options.bundleAllCSS).toBe(false);
+    });
+
+    it('should set bundleAllCSS to false when explicitly set to false', () => {
+      const options = normalizeModuleFederationOptions({
+        name: 'test-app',
+        exposes: {
+          './Button': './src/Button.jsx',
+        },
+        bundleAllCSS: false,
+      });
+
+      expect(options.bundleAllCSS).toBe(false);
+    });
+
+    it('should set bundleAllCSS to true when explicitly set to true', () => {
+      const options = normalizeModuleFederationOptions({
+        name: 'test-app',
+        exposes: {
+          './Button': './src/Button.jsx',
+        },
+        bundleAllCSS: true,
+      });
+
+      expect(options.bundleAllCSS).toBe(true);
+    });
+  });
 });

src/utils/__tests__/normalizeModuleFederationOption.test.ts

@@ -28,6 +28,9 @@ describe('normalizeModuleFederationOption', () => {
       ignoreOrigin: false,
       virtualModuleDir: '__mf__virtual',
       hostInitInjectLocation: 'html',
+      bundleAllCSS: false,
+      getPublicPath: undefined,
+      publicPath: undefined,
     });
   });
 

src/utils/normalizeModuleFederationOptions.ts

@@ -286,6 +286,12 @@ export type ModuleFederationOptions = {
    * Defaults to Vite's base config or "auto" if base is empty
    */
   publicPath?: string;
+  /**
+   * Controls whether all CSS assets from the bundle should be added to every exposed module.
+   * When false (default), the plugin will not process any CSS assets.
+   * When true, all CSS assets are bundled into every exposed module.
+   */
+  bundleAllCSS?: boolean;
   shared?:
     | string[]
     | Record<
@@ -335,6 +341,12 @@ export interface NormalizedModuleFederationOptions {
   ignoreOrigin?: boolean;
   virtualModuleDir: string;
   hostInitInjectLocation: HostInitInjectLocationOptions;
+  /**
+   * Controls whether all CSS assets from the bundle should be added to every exposed module.
+   * When false (default), the plugin will not process any CSS assets.
+   * When true, all CSS assets are bundled into every exposed module.
+   */
+  bundleAllCSS: boolean;
 }
 
 type HostInitInjectLocationOptions = 'entry' | 'html';
@@ -426,5 +438,6 @@ export function normalizeModuleFederationOptions(
     ignoreOrigin: options.ignoreOrigin || false,
     virtualModuleDir: options.virtualModuleDir || '__mf__virtual',
     hostInitInjectLocation: options.hostInitInjectLocation || 'html',
+    bundleAllCSS: options.bundleAllCSS || false,
   });
 }