build: Deduplicate build emissions

Certain files are emitted again without changes in subsequent
build passes. This patch adds a Vite plugin that allows us to
declare allowed file extensions to emit in each build config.

Bug: T349566
Change-Id: I79d6a890baa463695a292c92c199506f3b3de040

packages/codex/build.mjs

@@ -7,6 +7,7 @@ import autoprefixer from 'autoprefixer';
 import postcssRtlcss from 'postcss-rtlcss';
 import { codexIconNames, getComponentEntryPoints } from './build/utils.mjs';
 import generateCodexBundle from './build/generateCodexBundle.mjs';
+import emitAllowlist from './build/vite-plugin-emit-allowlist.mjs';
 
 const __dirname = url.fileURLToPath( /** @type {url.URL} */ ( new URL( '.', import.meta.url ) ) );
 const componentMap = getComponentEntryPoints( resolve( __dirname, 'src', 'components' ) );
@@ -89,21 +90,26 @@ const baseLibraryConfig = mergeConfig( baseConfig, {
 		}
 	}
 } );
-// Minify the CJS and UMD builds
-const minifiedLibraryConfig = mergeConfig( baseLibraryConfig, {
-	build: {
-		lib: {
-			formats: [ 'cjs', 'umd' ]
-		}
-	}
-} );
-// Don't minify the ES build
+
+// Don't minify the ES build, emit the mjs file
 const unminifiedLibraryConfig = mergeConfig( baseLibraryConfig, {
 	build: {
 		lib: {
 			formats: [ 'es' ]
 		},
 		minify: false
+	},
+	plugins: [
+		emitAllowlist( [ 'mjs' ] )
+	]
+} );
+
+// Minify the CJS and UMD builds, emit all files
+const minifiedLibraryConfig = mergeConfig( baseLibraryConfig, {
+	build: {
+		lib: {
+			formats: [ 'cjs', 'umd' ]
+		}
 	}
 } );
 
@@ -153,8 +159,6 @@ await build( {
 } );
 
 // Build the Codex bundles
-// Build the unminified files first and the minified files second, otherwise
-// the minified CSS files are overwritten with unminified ones
 await generateCodexBundle( unminifiedLibraryConfig );
 await generateCodexBundle( minifiedLibraryConfig );
 await generateCodexBundle( splitConfig );

packages/codex/build/generateCodexBundle.mjs

@@ -3,6 +3,7 @@ import { build, mergeConfig } from 'vite';
 import autoprefixer from 'autoprefixer';
 import rtlcss from 'rtlcss';
 import * as url from 'url';
+import emitAllowlist from './vite-plugin-emit-allowlist.mjs';
 
 const __dirname = url.fileURLToPath( /** @type {url.URL} */ ( new URL( '.', import.meta.url ) ) );
 
@@ -67,6 +68,7 @@ export default async function generateCodexBundle( bundleConfig = {} ) {
 		};
 
 		switch ( mode ) {
+			// Emit all files for the default mode, and only CSS files for other modes
 			case '':
 				overrides = {
 					css: {
@@ -86,7 +88,10 @@ export default async function generateCodexBundle( bundleConfig = {} ) {
 								replacement: resolve( __dirname, '../../codex-design-tokens/dist/theme-wikimedia-ui-legacy.less' )
 							}
 						]
-					}
+					},
+					plugins: [
+						emitAllowlist( [ 'css' ] )
+					]
 				};
 				break;
 			case 'rtl':
@@ -98,7 +103,10 @@ export default async function generateCodexBundle( bundleConfig = {} ) {
 								autoprefixer()
 							]
 						}
-					}
+					},
+					plugins: [
+						emitAllowlist( [ 'css' ] )
+					]
 				};
 				break;
 			case 'legacy-rtl':
@@ -118,7 +126,10 @@ export default async function generateCodexBundle( bundleConfig = {} ) {
 								replacement: resolve( __dirname, '../../codex-design-tokens/dist/theme-wikimedia-ui-legacy.less' )
 							}
 						]
-					}
+					},
+					plugins: [
+						emitAllowlist( [ 'css' ] )
+					]
 				};
 				break;
 		}

packages/codex/build/vite-plugin-emit-allowlist.mjs

@@ -0,0 +1,39 @@
+/**
+ * A Vite/Rollup plugin to allow only files with specific extensions to be emitted.
+ *
+ * @param {Iterable<string>} extensions A list of extensions to allow, e.g. ['css', 'mjs']
+ * @return {import('vite').Plugin}
+ *
+ * @example
+ * import { build } from 'vite';
+ * import emitAllowlist from './vite-plugin-emit-allowlist.mjs';
+ *
+ * const config = {
+ *    plugins: [
+ *      emitAllowlist(['mjs', 'css'])
+ *    ]
+ * ];
+ *
+ * await build(config);
+ */
+export default function emitAllowlist( extensions = [] ) {
+	const allowedExtensions = new Set( extensions );
+
+	return {
+		name: 'emit-allowlist',
+		generateBundle: {
+			order: 'post',
+			handler( _, bundle = {} ) {
+				for ( const fileName in bundle ) {
+					const fileExtension = fileName.split( '.' ).pop();
+
+					if ( fileExtension && allowedExtensions.has( fileExtension ) ) {
+						continue;
+					}
+
+					delete bundle[ fileName ];
+				}
+			}
+		}
+	};
+}