chore: build package maintenance

.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/emotion/src/version.ts

@@ -1 +1 @@
-export const VERSION = '5.0.3';
+export const VERSION = '5.0.4';

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

@@ -6,8 +6,8 @@ import { GENERATED_DIR } from './constants';
 async function getBatchBuildOptions(
   batch: Array<string>,
 ): Promise<Array<MergedRollupOptions>> {
-  const { constructUMDGlobalName } = await import(
-    '@lg-tools/build/config/utils/constructUMDGlobalName.mjs'
+  const { constructUMDGlobalName, createConfigForFormat } = await import(
+    '@lg-tools/build/config/utils/index.mjs'
   );
 
   const { esmConfig, umdConfig } = await import(
@@ -16,15 +16,13 @@ async function getBatchBuildOptions(
 
   return [
     // ESM build can take an array of input files
-    {
-      ...esmConfig,
+    createConfigForFormat('esm', {
       input: batch.map(icon => `${GENERATED_DIR}/${icon}.tsx`),
       output: [esmConfig.output],
-    },
+    }),
     // UMD builds need a single input file
     ...batch.map(iconName => {
-      return {
-        ...umdConfig,
+      return createConfigForFormat('umd', {
         input: `${GENERATED_DIR}/${iconName}.tsx`,
         output: [
           {
@@ -33,7 +31,7 @@ async function getBatchBuildOptions(
             dir: `dist/umd`,
           },
         ],
-      };
+      });
     }),
   ];
 }
@@ -45,16 +43,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,70 @@
+/* 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 for @emotion imports...\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 {
+    process.exit(0);
+  }
+}
+
+validateBuiltIcons();

packages/icon/scripts/tsconfig.json

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