@mui/internal-bundle-size-checker 1.0.9-canary.17 → 1.0.9-canary.19

package/README.md

@@ -20,7 +20,6 @@ bundle-size-checker [options]
 Options:
 
 - `--analyze`: Creates a webpack-bundle-analyzer report for each bundle
-- `--accurateBundles`: Displays used bundles accurately at the cost of more CPU cycles
 - `--output`, `-o`: Path to output the size snapshot JSON file
 
 ### Configuration

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-bundle-size-checker",
-  "version": "1.0.9-canary.17",
+  "version": "1.0.9-canary.19",
   "description": "Bundle size checker for MUI packages.",
   "type": "module",
   "main": "./src/index.js",
@@ -21,37 +21,25 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.515.0",
     "@aws-sdk/credential-providers": "^3.787.0",
-    "@babel/core": "^7.27.4",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.27.1",
     "@octokit/auth-action": "^6.0.1",
     "@octokit/rest": "^22.0.0",
-    "babel-loader": "^10.0.0",
     "chalk": "^5.4.1",
-    "compression-webpack-plugin": "^10.0.0",
-    "css-loader": "^7.1.2",
     "env-ci": "^11.1.0",
     "execa": "^7.2.0",
     "fast-glob": "^3.3.3",
-    "file-loader": "^6.2.0",
     "git-url-parse": "^16.1.0",
     "micromatch": "^4.0.8",
     "piscina": "^4.2.1",
     "rollup-plugin-visualizer": "^6.0.3",
-    "terser-webpack-plugin": "^5.3.14",
     "vite": "^6.3.5",
-    "webpack": "^5.90.3",
-    "webpack-bundle-analyzer": "^4.10.2",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
     "@types/env-ci": "^3.1.4",
     "@types/micromatch": "^4.0.9",
-    "@types/webpack": "^5.28.5",
-    "@types/webpack-bundle-analyzer": "^4.7.0",
     "@types/yargs": "^17.0.33"
   },
-  "gitSha": "6851fec19094ca8bf53de0fcec686b78508b00f1",
+  "gitSha": "25211252944f876e77d486423473dcf19779a814",
   "scripts": {
     "typescript": "tsc -p tsconfig.json",
     "test": "pnpm -w test --project @mui/internal-bundle-size-checker"

package/src/{viteBuilder.js → builder.js}

@@ -29,7 +29,7 @@ const rootDir = process.cwd();
  * Creates vite configuration for bundle size checking
  * @param {ObjectEntry} entry - Entry point (string or object)
  * @param {CommandLineArgs} args
- * @returns {Promise<{configuration: import('vite').InlineConfig, externalsArray: string[]}>}
+ * @returns {Promise<import('vite').InlineConfig>}
  */
 async function createViteConfig(entry, args) {
   const entryName = entry.id;
@@ -132,7 +132,7 @@ async function createViteConfig(entry, args) {
     ],
   };
 
-  return { configuration, externalsArray };
+  return configuration;
 }
 
 /**
@@ -233,9 +233,9 @@ async function processBundleSizes(output, entryName) {
  * @param {CommandLineArgs} args - Command line arguments
  * @returns {Promise<Map<string, { parsed: number, gzip: number }>>}
  */
-export async function getViteSizes(entry, args) {
+export async function getBundleSizes(entry, args) {
   // Create vite configuration
-  const { configuration } = await createViteConfig(entry, args);
+  const configuration = await createViteConfig(entry, args);
 
   // Run vite build
   const { output } = /** @type {import('vite').Rollup.RollupOutput} */ (await build(configuration));

package/src/cli.js

@@ -6,12 +6,11 @@ import fs from 'fs/promises';
 import yargs from 'yargs';
 import { Piscina } from 'piscina';
 import micromatch from 'micromatch';
-import { execa } from 'execa';
-import gitUrlParse from 'git-url-parse';
 import { loadConfig } from './configLoader.js';
 import { uploadSnapshot } from './uploadSnapshot.js';
 import { renderMarkdownReport } from './renderMarkdownReport.js';
 import { octokit } from './github.js';
+import { getCurrentRepoInfo } from './git.js';
 
 /**
  * @typedef {import('./sizeDiff.js').SizeSnapshot} SizeSnapshot
@@ -23,32 +22,12 @@ const DEFAULT_CONCURRENCY = os.availableParallelism();
 const rootDir = process.cwd();
 
 /**
- * Gets the current repository owner and name from git remote
- * @returns {Promise<{owner: string | null, repo: string | null}>}
- */
-async function getCurrentRepoInfo() {
-  try {
-    const { stdout } = await execa('git', ['remote', 'get-url', 'origin']);
-    const parsed = gitUrlParse(stdout.trim());
-    return {
-      owner: parsed.owner,
-      repo: parsed.name,
-    };
-  } catch (error) {
-    return {
-      owner: null,
-      repo: null,
-    };
-  }
-}
-
-/**
- * creates size snapshot for every bundle that built with webpack
+ * creates size snapshot for every bundle
  * @param {CommandLineArgs} args
  * @param {NormalizedBundleSizeCheckerConfig} config - The loaded configuration
  * @returns {Promise<Array<[string, { parsed: number, gzip: number }]>>}
  */
-async function getWebpackSizes(args, config) {
+async function getBundleSizes(args, config) {
   const worker = new Piscina({
     filename: new URL('./worker.js', import.meta.url).href,
     maxThreads: args.concurrency || DEFAULT_CONCURRENCY,
@@ -146,12 +125,14 @@ async function run(argv) {
   // eslint-disable-next-line no-console
   console.log(`Starting bundle size snapshot creation with ${concurrency} workers...`);
 
-  const webpackSizes = await getWebpackSizes(argv, config);
-  const bundleSizes = Object.fromEntries(webpackSizes.sort((a, b) => a[0].localeCompare(b[0])));
+  const bundleSizes = await getBundleSizes(argv, config);
+  const sortedBundleSizes = Object.fromEntries(
+    bundleSizes.sort((a, b) => a[0].localeCompare(b[0])),
+  );
 
   // Ensure output directory exists
   await fs.mkdir(path.dirname(snapshotDestPath), { recursive: true });
-  await fs.writeFile(snapshotDestPath, JSON.stringify(bundleSizes, null, 2));
+  await fs.writeFile(snapshotDestPath, JSON.stringify(sortedBundleSizes, null, 2));
 
   // eslint-disable-next-line no-console
   console.log(`Bundle size snapshot written to ${snapshotDestPath}`);
@@ -169,6 +150,9 @@ async function run(argv) {
       // Exit with error code to indicate failure
       process.exit(1);
     }
+  } else {
+    // eslint-disable-next-line no-console
+    console.log('No upload configuration provided, skipping upload.');
   }
 }
 
@@ -181,12 +165,7 @@ yargs(process.argv.slice(2))
         return cmdYargs
           .option('analyze', {
             default: false,
-            describe: 'Creates a webpack-bundle-analyzer report for each bundle.',
-            type: 'boolean',
-          })
-          .option('accurateBundles', {
-            default: false,
-            describe: 'Displays used bundles accurately at the cost of more CPU cycles.',
+            describe: 'Creates a report for each bundle.',
             type: 'boolean',
           })
           .option('verbose', {
@@ -194,11 +173,6 @@ yargs(process.argv.slice(2))
             describe: 'Show more detailed information during compilation.',
             type: 'boolean',
           })
-          .option('vite', {
-            default: false,
-            describe: 'Use Vite instead of webpack for bundling.',
-            type: 'boolean',
-          })
           .option('output', {
             alias: 'o',
             describe:

package/src/fetchSnapshot.js

@@ -1,10 +1,10 @@
-import { octokit } from './github.js';
+// This file must be importable in the browser
 
 /**
  *
  * @param {string} repo - The name of the repository e.g. 'mui/material-ui'
  * @param {string} sha - The commit SHA
- * @returns {Promise<import('./sizeDiff').SizeSnapshot>} - The size snapshot data
+ * @returns {Promise<import('./sizeDiff.js').SizeSnapshot>} - The size snapshot data
  */
 export async function fetchSnapshot(repo, sha) {
   const urlsToTry = [
@@ -27,7 +27,7 @@ export async function fetchSnapshot(repo, sha) {
         continue;
       }
 
-      return response.json();
+      return /** @type {Promise<any>} */ (response.json());
     } catch (error) {
       lastError = error;
       continue;
@@ -36,61 +36,3 @@ export async function fetchSnapshot(repo, sha) {
 
   throw new Error(`Failed to fetch snapshot`, { cause: lastError });
 }
-
-/**
- * Gets parent commits for a given commit SHA using GitHub API
- * @param {string} repo - Repository name (e.g., 'mui/material-ui')
- * @param {string} commit - The commit SHA to start from
- * @param {number} depth - How many commits to retrieve (including the starting commit)
- * @returns {Promise<string[]>} Array of commit SHAs in chronological order (excluding the starting commit)
- */
-async function getParentCommits(repo, commit, depth = 4) {
-  try {
-    const [owner, repoName] = repo.split('/');
-
-    const { data: commits } = await octokit.repos.listCommits({
-      owner,
-      repo: repoName,
-      sha: commit,
-      per_page: depth,
-    });
-
-    // Skip the first commit (which is the starting commit) and return the rest
-    return commits.slice(1).map((commitDetails) => commitDetails.sha);
-  } catch (/** @type {any} */ error) {
-    console.warn(`Failed to get parent commits for ${commit}: ${error.message}`);
-    return [];
-  }
-}
-
-/**
- * Attempts to fetch a snapshot with fallback to parent commits
- * @param {string} repo - Repository name
- * @param {string} commit - The commit SHA to start from
- * @param {number} [fallbackDepth=3] - How many parent commits to try as fallback
- * @returns {Promise<{snapshot: import('./sizeDiff').SizeSnapshot | null, actualCommit: string | null}>}
- */
-export async function fetchSnapshotWithFallback(repo, commit, fallbackDepth = 3) {
-  // Try the original commit first
-  try {
-    const snapshot = await fetchSnapshot(repo, commit);
-    return { snapshot, actualCommit: commit };
-  } catch (/** @type {any} */ error) {
-    // fallthrough to parent commits if the snapshot for the original commit fails
-  }
-
-  // Get parent commits and try each one
-  const parentCommits = await getParentCommits(repo, commit, fallbackDepth + 1);
-
-  for (const parentCommit of parentCommits) {
-    try {
-      // eslint-disable-next-line no-await-in-loop
-      const snapshot = await fetchSnapshot(repo, parentCommit);
-      return { snapshot, actualCommit: parentCommit };
-    } catch {
-      // fallthrough to the next parent commit if fetching fails
-    }
-  }
-
-  return { snapshot: null, actualCommit: null };
-}

package/src/fetchSnapshotWithFallback.js

@@ -0,0 +1,34 @@
+import { fetchSnapshot } from './fetchSnapshot.js';
+import { getParentCommits } from './git.js';
+
+/**
+ * Attempts to fetch a snapshot with fallback to parent commits
+ * @param {string} repo - Repository name
+ * @param {string} commit - The commit SHA to start from
+ * @param {number} [fallbackDepth=3] - How many parent commits to try as fallback
+ * @returns {Promise<{snapshot: import('./sizeDiff.js').SizeSnapshot | null, actualCommit: string | null}>}
+ */
+export async function fetchSnapshotWithFallback(repo, commit, fallbackDepth = 3) {
+  // Try the original commit first
+  try {
+    const snapshot = await fetchSnapshot(repo, commit);
+    return { snapshot, actualCommit: commit };
+  } catch (/** @type {any} */ error) {
+    // fallthrough to parent commits if the snapshot for the original commit fails
+  }
+
+  // Get parent commits and try each one
+  const parentCommits = await getParentCommits(repo, commit, fallbackDepth);
+
+  for (const parentCommit of parentCommits) {
+    try {
+      // eslint-disable-next-line no-await-in-loop
+      const snapshot = await fetchSnapshot(repo, parentCommit);
+      return { snapshot, actualCommit: parentCommit };
+    } catch {
+      // fallthrough to the next parent commit if fetching fails
+    }
+  }
+
+  return { snapshot: null, actualCommit: null };
+}

package/src/git.js

@@ -0,0 +1,45 @@
+import { execa } from 'execa';
+import gitUrlParse from 'git-url-parse';
+
+/**
+ * Gets parent commits for a given commit SHA using git CLI
+ * @param {string} repo - Repository name (e.g., 'mui/material-ui') - ignored for git CLI
+ * @param {string} commit - The commit SHA to start from
+ * @param {number} depth - How many commits to retrieve (including the starting commit)
+ * @returns {Promise<string[]>} Array of commit SHAs in chronological order (excluding the starting commit)
+ */
+export async function getParentCommits(repo, commit, depth = 3) {
+  const { stdout } = await execa('git', ['rev-list', `--max-count=${depth}`, '--skip=1', commit]);
+  return stdout.trim().split('\n').filter(Boolean);
+}
+
+/**
+ * Compares two commits and returns merge base information using git CLI
+ * @param {string} base - Base commit SHA
+ * @param {string} head - Head commit SHA
+ * @returns {Promise<string>} Object with merge base commit info
+ */
+export async function getMergeBase(base, head) {
+  const { stdout } = await execa('git', ['merge-base', base, head]);
+  return stdout.trim();
+}
+
+/**
+ * Gets the current repository owner and name from git remote
+ * @returns {Promise<{owner: string | null, repo: string | null}>}
+ */
+export async function getCurrentRepoInfo() {
+  try {
+    const { stdout } = await execa('git', ['remote', 'get-url', 'origin']);
+    const parsed = gitUrlParse(stdout.trim());
+    return {
+      owner: parsed.owner,
+      repo: parsed.name,
+    };
+  } catch (error) {
+    return {
+      owner: null,
+      repo: null,
+    };
+  }
+}

package/src/index.js

@@ -1,3 +1,5 @@
+/// <reference types="./types.d.ts" />
+
 import defineConfig from './defineConfig.js';
 import { loadConfig } from './configLoader.js';
 import { calculateSizeDiff } from './sizeDiff.js';

package/src/renderMarkdownReport.js

@@ -5,9 +5,11 @@
  */
 
 import { calculateSizeDiff } from './sizeDiff.js';
-import { fetchSnapshot, fetchSnapshotWithFallback } from './fetchSnapshot.js';
+import { fetchSnapshot } from './fetchSnapshot.js';
 import { displayPercentFormatter, byteSizeChangeFormatter } from './formatUtils.js';
 import { octokit } from './github.js';
+import { getCurrentRepoInfo, getMergeBase } from './git.js';
+import { fetchSnapshotWithFallback } from './fetchSnapshotWithFallback.js';
 
 /**
  * Generates a symbol based on the relative change value.
@@ -232,13 +234,21 @@ export async function renderMarkdownReport(prInfo, circleciBuildNumber, options
   const { fallbackDepth = 3 } = options;
 
   const [owner, repoName] = repo.split('/');
-  const { data } = await octokit.repos.compareCommits({
-    owner,
-    repo: repoName,
-    base: prInfo.base.sha,
-    head: prCommit,
-  });
-  const baseCommit = data.merge_base_commit.sha;
+
+  const currentRepo = await getCurrentRepoInfo();
+
+  let baseCommit;
+  if (owner === currentRepo.owner && repoName === currentRepo.repo) {
+    baseCommit = await getMergeBase(prInfo.base.sha, prCommit);
+  } else {
+    const { data } = await octokit.repos.compareCommits({
+      owner,
+      repo: repoName,
+      base: prInfo.base.sha,
+      head: prCommit,
+    });
+    baseCommit = data.merge_base_commit.sha;
+  }
 
   const [baseResult, prSnapshot] = await Promise.all([
     fetchSnapshotWithFallback(repo, baseCommit, fallbackDepth),

package/src/renderMarkdownReport.test.js

@@ -2,9 +2,12 @@
 import { vi, describe, it, expect, beforeEach } from 'vitest';
 import { renderMarkdownReport } from './renderMarkdownReport.js';
 import * as fetchSnapshotModule from './fetchSnapshot.js';
+import * as fetchSnapshotWithFallbackModule from './fetchSnapshotWithFallback.js';
 
 // Mock the fetchSnapshot module
 vi.mock('./fetchSnapshot.js');
+// Mock the fetchSnapshotWithFallback module
+vi.mock('./fetchSnapshotWithFallback.js');
 // Mock the @octokit/rest module
 vi.mock('@octokit/rest', () => ({
   Octokit: vi.fn(() => ({
@@ -20,7 +23,9 @@ vi.mock('@octokit/rest', () => ({
 
 describe('renderMarkdownReport', () => {
   const mockFetchSnapshot = vi.mocked(fetchSnapshotModule.fetchSnapshot);
-  const mockFetchSnapshotWithFallback = vi.mocked(fetchSnapshotModule.fetchSnapshotWithFallback);
+  const mockFetchSnapshotWithFallback = vi.mocked(
+    fetchSnapshotWithFallbackModule.fetchSnapshotWithFallback,
+  );
 
   /** @type {PrInfo} */
   const mockPrInfo = {

package/src/types.d.ts

@@ -1,23 +1,3 @@
-// WebpackEntry type
-interface WebpackEntry {
-  import: string;
-  importName?: string;
-}
-
-// Webpack stats types
-interface StatsAsset {
-  name: string;
-  size: number;
-  related?: {
-    find: (predicate: (asset: any) => boolean) => { size: number; type: string };
-  };
-}
-
-interface StatsChunkGroup {
-  name: string;
-  assets: Array<{ name: string; size: number }>;
-}
-
 // Upload configuration with optional properties
 interface UploadConfig {
   repo?: string; // The repository name (e.g., "mui/material-ui")
@@ -65,12 +45,10 @@ interface NormalizedBundleSizeCheckerConfig {
 // Command line argument types
 interface CommandLineArgs {
   analyze?: boolean;
-  accurateBundles?: boolean;
   output?: string;
   verbose?: boolean;
   filter?: string[];
   concurrency?: number;
-  vite?: boolean;
 }
 
 interface ReportCommandArgs {

package/src/uploadSnapshot.js

@@ -20,7 +20,7 @@ async function getCurrentCommitSHA() {
  */
 function sanitizeS3TagString(str) {
   // Replace disallowed characters with underscore
-  const safe = str.replace(/[^a-zA-Z0-9 +-=.:/@]+/g, '_');
+  const safe = str.replace(/[^a-zA-Z0-9 +\-=.:/@]+/g, '_');
   // Truncate to max lengths (256 for value)
   const maxLen = 256;
   return safe.length > maxLen ? safe.substring(0, maxLen) : safe;

package/src/worker.js

@@ -4,8 +4,7 @@ import fs from 'fs/promises';
 import chalk from 'chalk';
 import * as module from 'module';
 import { byteSizeFormatter } from './formatUtils.js';
-import { getWebpackSizes } from './webpackBuilder.js';
-import { getViteSizes } from './viteBuilder.js';
+import { getBundleSizes } from './builder.js';
 
 const require = module.createRequire(import.meta.url);
 
@@ -83,12 +82,7 @@ export default async function getSizes({ entry, args, index, total }) {
   }
 
   try {
-    let sizeMap;
-    if (args.vite) {
-      sizeMap = await getViteSizes(entry, args);
-    } else {
-      sizeMap = await getWebpackSizes(entry, args);
-    }
+    const sizeMap = await getBundleSizes(entry, args);
 
     // Create a concise log message showing import details
     let entryDetails = '';
@@ -112,7 +106,6 @@ export default async function getSizes({ entry, args, index, total }) {
 ${chalk.green('✓')} ${chalk.green.bold(`Completed ${index + 1}/${total}: [${entry.id}]`)}
   ${chalk.cyan('Import:')}    ${entryDetails}
   ${chalk.cyan('Externals:')} ${entry.externals.join(', ')}
-  ${chalk.cyan('Bundler:')}   ${args.vite ? 'vite' : 'webpack'}
   ${chalk.cyan('Sizes:')}     ${chalk.yellow(byteSizeFormatter.format(entrySize.parsed))} (${chalk.yellow(byteSizeFormatter.format(entrySize.gzip))} gzipped)
 ${args.analyze ? `  ${chalk.cyan('Analysis:')}  ${chalk.underline(pathToFileURL(path.join(rootDir, 'build', `${entry.id}.html`)).href)}` : ''}
 `.trim(),

package/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "node",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "allowJs": true,
     "checkJs": true,
     "skipLibCheck": true,

package/src/webpackBuilder.js

@@ -1,267 +0,0 @@
-import { promisify } from 'util';
-import path from 'path';
-import webpackCallbackBased from 'webpack';
-import CompressionPlugin from 'compression-webpack-plugin';
-import TerserPlugin from 'terser-webpack-plugin';
-import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
-import { createRequire } from 'node:module';
-
-/**
- * @type {(options: webpackCallbackBased.Configuration) => Promise<webpackCallbackBased.Stats>}
- */
-// @ts-expect-error Can't select the right overload
-const webpack = promisify(webpackCallbackBased);
-const rootDir = process.cwd();
-const require = createRequire(import.meta.url);
-
-/**
- * Creates webpack configuration for bundle size checking
- * @param {ObjectEntry} entry - Entry point (string or object)
- * @param {CommandLineArgs} args
- * @returns {Promise<{configuration: import('webpack').Configuration, externalsArray: string[]}>}
- */
-async function createWebpackConfig(entry, args) {
-  const analyzerMode = args.analyze ? 'static' : 'disabled';
-  const concatenateModules = !args.accurateBundles;
-
-  const entryName = entry.id;
-  let entryContent;
-
-  if (entry.code && (entry.import || entry.importedNames)) {
-    entryContent = entry.code;
-  } else if (entry.code) {
-    entryContent = entry.code;
-  } else if (entry.import) {
-    if (entry.importedNames && entry.importedNames.length > 0) {
-      // Generate named imports for each name in the importedNames array
-      const imports = entry.importedNames
-        .map((name) => `import { ${name} } from '${entry.import}';`)
-        .join('\n');
-      const logs = entry.importedNames.map((name) => `console.log(${name});`).join('\n');
-      entryContent = `${imports}\n${logs}`;
-    } else {
-      // Default to import * as if importedNames is not defined
-      entryContent = `import * as _ from '${entry.import}';\nconsole.log(_);`;
-    }
-  } else {
-    throw new Error(`Entry "${entry.id}" must have either code or import property defined`);
-  }
-
-  /**
-   * Generate externals function from an array of package names
-   * @param {string[]} packages - Array of package names to exclude (defaults to react and react-dom)
-   * @returns {function} - Function to determine if a request should be treated as external
-   */
-  function createExternalsFunction(packages = ['react', 'react-dom']) {
-    /**
-     * Check if a request should be treated as external
-     * Uses the new recommended format to avoid deprecation warnings
-     * @param {{ context: string, request: string }} params - Object containing context and request
-     * @param {Function} callback - Callback to handle the result
-     */
-    return ({ request }, callback) => {
-      // Iterate through all packages and check if request is equal to or starts with package + '/'
-      for (const pkg of packages) {
-        if (request === pkg || request.startsWith(`${pkg}/`)) {
-          return callback(null, `commonjs ${request}`);
-        }
-      }
-
-      return callback();
-    };
-  }
-
-  // Use externals from the entry object
-  const externalsArray = entry.externals || ['react', 'react-dom'];
-
-  /**
-   * @type {import('webpack').Configuration}
-   */
-  const configuration = {
-    externals: [
-      // @ts-expect-error -- webpack types are not compatible with the current version
-      createExternalsFunction(externalsArray),
-    ],
-    mode: 'production',
-    optimization: {
-      concatenateModules,
-      minimizer: [
-        new TerserPlugin({
-          test: /\.m?js(\?.*)?$/i,
-          // Avoid creating LICENSE.txt files for each module
-          // See https://github.com/webpack-contrib/terser-webpack-plugin#remove-comments
-          terserOptions: {
-            format: {
-              comments: false,
-            },
-          },
-          extractComments: false,
-        }),
-      ],
-    },
-    module: {
-      rules: [
-        {
-          test: /\.[jt]sx?$/,
-          include: rootDir,
-          exclude: /node_modules/,
-          use: {
-            loader: require.resolve('babel-loader'),
-            options: {
-              presets: [
-                require.resolve('@babel/preset-react'),
-                require.resolve('@babel/preset-typescript'),
-              ],
-            },
-          },
-        },
-        {
-          test: /\.css$/,
-          use: [require.resolve('css-loader')],
-        },
-        {
-          test: /\.(png|svg|jpg|gif)$/,
-          use: [require.resolve('file-loader')],
-        },
-      ],
-    },
-    output: {
-      filename: '[name].js',
-      library: {
-        // TODO: Use `type: 'module'` once it is supported (currently incompatible with `externals`)
-        name: 'M',
-        type: 'var',
-        // type: 'module',
-      },
-      path: path.join(rootDir, 'build'),
-    },
-    plugins: [
-      new CompressionPlugin({
-        filename: '[path][base][fragment].gz',
-      }),
-      new BundleAnalyzerPlugin({
-        analyzerMode,
-        // We create a report for each bundle so around 120 reports.
-        // Opening them all is spam.
-        // If opened with `webpack --config . --analyze` it'll still open one new tab though.
-        openAnalyzer: false,
-        // '[name].html' not supported: https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/12
-        reportFilename: `${entryName}.html`,
-        logLevel: 'warn',
-      }),
-    ],
-    // A context to the current dir, which has a node_modules folder with workspace dependencies
-    context: rootDir,
-    entry: {
-      // This format is a data: url combined with inline matchResource to obtain a virtual entry.
-      // See https://github.com/webpack/webpack/issues/6437#issuecomment-874466638
-      // See https://webpack.js.org/api/module-methods/#import
-      // See https://webpack.js.org/api/loaders/#inline-matchresource
-      [entryName]: `./index.js!=!data:text/javascript;charset=utf-8;base64,${Buffer.from(entryContent.trim()).toString('base64')}`,
-    },
-    // TODO: 'browserslist:modern'
-    // See https://github.com/webpack/webpack/issues/14203
-    target: 'web',
-  };
-
-  // Return both the configuration and the externals array
-  return { configuration, externalsArray };
-}
-
-/**
- * Process webpack stats to extract bundle sizes
- * @param {import('webpack').Stats} webpackStats - The webpack stats object
- * @returns {Map<string, { parsed: number, gzip: number }>} - Map of bundle names to size information
- */
-function processBundleSizes(webpackStats) {
-  /** @type {Map<string, { parsed: number, gzip: number }>} */
-  const sizeMap = new Map();
-
-  if (!webpackStats) {
-    throw new Error('No webpack stats were returned');
-  }
-
-  if (webpackStats.hasErrors()) {
-    const statsJson = webpackStats.toJson({
-      all: false,
-      entrypoints: true,
-      errors: true,
-    });
-
-    const entrypointKeys = statsJson.entrypoints ? Object.keys(statsJson.entrypoints) : [];
-
-    throw new Error(
-      `ERROR: The following errors occurred during bundling of ${entrypointKeys.join(', ')} with webpack: \n${(
-        statsJson.errors || []
-      )
-        .map((error) => {
-          return `${JSON.stringify(error, null, 2)}`;
-        })
-        .join('\n')}`,
-    );
-  }
-
-  const stats = webpackStats.toJson({
-    all: false,
-    assets: true,
-    entrypoints: true,
-    relatedAssets: true,
-  });
-
-  if (!stats.assets) {
-    return sizeMap;
-  }
-
-  const assets = new Map(stats.assets.map((asset) => [asset.name, asset]));
-
-  if (stats.entrypoints) {
-    Object.values(stats.entrypoints).forEach((entrypoint) => {
-      let parsedSize = 0;
-      let gzipSize = 0;
-
-      if (entrypoint.assets) {
-        entrypoint.assets.forEach(({ name, size }) => {
-          const asset = assets.get(name);
-          if (asset && asset.related) {
-            const gzippedAsset = asset.related.find((relatedAsset) => {
-              return relatedAsset.type === 'gzipped';
-            });
-
-            if (size !== undefined) {
-              parsedSize += size;
-            }
-
-            if (gzippedAsset && gzippedAsset.size !== undefined) {
-              gzipSize += gzippedAsset.size;
-            }
-          }
-        });
-      }
-
-      if (!entrypoint.name) {
-        throw new Error('Entrypoint name is undefined');
-      }
-
-      sizeMap.set(entrypoint.name, { parsed: parsedSize, gzip: gzipSize });
-    });
-  }
-
-  return sizeMap;
-}
-
-/**
- * Get sizes for a webpack bundle
- * @param {ObjectEntry} entry - The entry configuration
- * @param {CommandLineArgs} args - Command line arguments
- * @returns {Promise<Map<string, { parsed: number, gzip: number }>>}
- */
-export async function getWebpackSizes(entry, args) {
-  // Create webpack configuration
-  const { configuration } = await createWebpackConfig(entry, args);
-
-  // Run webpack
-  const webpackStats = await webpack(configuration);
-
-  // Process the webpack stats to get bundle sizes
-  return processBundleSizes(webpackStats);
-}