[LG-5635] chore: Fixes flaky icon builds (#3244)

* create new node externals instance

* rm debug script

* add postbuild

* Delete tsconfig.json

* rm extra console.logs

* Update index.ts

* Create icon-build-process.md

* Update index.ts

Author: TheSonOfThomp

.changeset/icon-build-process.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/icon': patch
+---
+
+Updates build process to avoid race conditions in `rollup` plugins that intermittently caused `@emotion/server/create-instance` to be marked as a direct dependency of icon

packages/icon/package.json

@@ -26,6 +26,7 @@
   "scripts": {
     "prebuild": "ts-node ./scripts/prebuild/index.ts",
     "build": "ts-node ./scripts/build/build.ts",
+    "postbuild": "ts-node ./scripts/postbuild/index.ts",
     "tsc": "lg-build tsc",
     "docs": "lg-build docs"
   },
@@ -43,14 +44,16 @@
     "@lg-tools/build": "workspace:^",
     "@lg-tools/lint": "workspace:^",
     "@lg-tools/storybook-utils": "workspace:^",
+    "@rollup/plugin-node-resolve": "15.1.0",
     "@svgr/core": "^5.3.1",
     "@types/xml2json": "^0.11.0",
     "commander": "^11.0.0",
+    "fs-extra": "11.1.1",
+    "p-queue": "^8.1.0",
     "rollup": "4.16.1",
+    "rollup-plugin-node-externals": "7.1.1",
     "ts-node": "^10.9.2",
-    "xml2json": "^0.12.0",
-    "p-queue": "^8.1.0",
-    "fs-extra": "11.1.1"
+    "xml2json": "^0.12.0"
   },
   "gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0",
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/icon",

packages/icon/scripts/build/build-batch.ts

@@ -10,6 +10,8 @@ async function getBatchBuildOptions(
     '@lg-tools/build/config/utils/constructUMDGlobalName.mjs'
   );
 
+  const { nodeExternals } = await import('rollup-plugin-node-externals');
+
   const { esmConfig, umdConfig } = await import(
     '@lg-tools/build/config/rollup.config.mjs'
   );
@@ -20,6 +22,11 @@ async function getBatchBuildOptions(
       ...esmConfig,
       input: batch.map(icon => `${GENERATED_DIR}/${icon}.tsx`),
       output: [esmConfig.output],
+      plugins: [
+        // Ensure @emotion packages are externalized (not bundled into icons)
+        nodeExternals({ deps: true, include: [/@emotion/] }),
+        ...esmConfig.plugins,
+      ],
     },
     // UMD builds need a single input file
     ...batch.map(iconName => {
@@ -33,6 +40,11 @@ async function getBatchBuildOptions(
             dir: `dist/umd`,
           },
         ],
+        plugins: [
+          // Ensure @emotion packages are externalized (not bundled into icons)
+          nodeExternals({ deps: true, include: [/@emotion/] }),
+          ...umdConfig.plugins,
+        ],
       };
     }),
   ];
@@ -45,16 +57,13 @@ export async function buildBatch(
   batch: Array<string>,
   verbose = false,
 ): Promise<void> {
+  verbose && console.log('Building batch', batch);
   try {
     const rollupConfigs = await getBatchBuildOptions(batch);
 
     for (const config of rollupConfigs) {
       const bundle = await rollup(config);
 
-      if (verbose) {
-        console.log(bundle.watchFiles);
-      }
-
       await Promise.all(config.output.map(bundle.write));
       await bundle.close();
     }

packages/icon/scripts/postbuild/index.ts

@@ -0,0 +1,71 @@
+/* eslint-disable no-console */
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * Validates that built icon files do not import @emotion packages directly.
+ * Icons should only depend on @leafygreen-ui/emotion, not @emotion/* packages.
+ */
+function validateBuiltIcons(): void {
+  const distDirs = ['dist/esm', 'dist/umd'];
+  const emotionPattern = /@emotion\//g;
+  let hasErrors = false;
+  const errors: Array<{ file: string; matches: Array<string> }> = [];
+
+  console.log('Validating built icons...\n');
+
+  for (const distDir of distDirs) {
+    const fullPath = path.join(process.cwd(), distDir);
+
+    if (!fs.existsSync(fullPath)) {
+      console.warn(`Warning: ${distDir} directory does not exist. Skipping...`);
+      continue;
+    }
+
+    const files = fs.readdirSync(fullPath);
+    const jsFiles = files.filter(file => file.endsWith('.js'));
+
+    for (const file of jsFiles) {
+      // Skip the main index file and glyphCommon as they may have different rules
+      if (file === 'index.js' || file === 'glyphCommon.js') {
+        continue;
+      }
+
+      const filePath = path.join(fullPath, file);
+      const content = fs.readFileSync(filePath, 'utf-8');
+
+      // Check for @emotion imports/requires
+      const matches = content.match(emotionPattern);
+
+      if (matches) {
+        hasErrors = true;
+        const uniqueMatches = Array.from(new Set(matches));
+        errors.push({ file: `${distDir}/${file}`, matches: uniqueMatches });
+      }
+    }
+  }
+
+  if (hasErrors) {
+    console.error('❌ ERROR: Found @emotion imports in built icon files!\n');
+    console.error(
+      'Icons should only depend on @leafygreen-ui/emotion, not @emotion/* packages directly.\n',
+    );
+    console.error('Files with @emotion imports:');
+    for (const error of errors) {
+      console.error(`  - ${error.file}`);
+      for (const match of error.matches) {
+        console.error(`    → ${match}`);
+      }
+    }
+    console.error('\nThis indicates a build configuration issue.');
+    console.error(
+      'Check packages/icon/scripts/build/build-batch.ts for proper externalization rules.',
+    );
+    process.exit(1);
+  } else {
+    console.log('Icon builds OK \n');
+    process.exit(0);
+  }
+}
+
+validateBuiltIcons();

packages/icon/scripts/tsconfig.json

@@ -5,6 +5,7 @@
   },
   "include": [
     "./prebuild/**/*",
-    "./build/**/*"
+    "./build/**/*",
+    "./postbuild/**/*"
   ]
 }