@leafygreen-ui/icon 14.5.1 → 14.6.1-next.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/icon",
-  "version": "14.5.1",
+  "version": "14.6.1-next.0",
   "description": "LeafyGreen UI Kit Icons",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",
@@ -29,22 +29,24 @@
   },
   "dependencies": {
     "lodash": "^4.17.21",
-    "@leafygreen-ui/emotion": "^5.0.3"
+    "@leafygreen-ui/emotion": "^5.0.4"
   },
   "devDependencies": {
+    "@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",
+    "@lg-tools/storybook-utils": "^0.3.3",
     "@lg-tools/build": "^0.8.3",
+    "@leafygreen-ui/palette": "^5.0.2",
     "@lg-tools/lint": "^3.1.0",
-    "@leafygreen-ui/lib": "^15.4.0",
-    "@lg-tools/storybook-utils": "^0.3.2",
-    "@leafygreen-ui/palette": "^5.0.2"
+    "@leafygreen-ui/lib": "^15.6.2"
   },
   "gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0",
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/icon",
@@ -59,6 +61,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"
   }

package/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();
     }

package/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();

package/scripts/tsconfig.json

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

package/src/index.ts

@@ -3,6 +3,12 @@ export type { IconProps } from './createIconComponent';
 export { createIconComponent } from './createIconComponent';
 export { Size, sizeMap } from './glyphCommon';
 export { type GlyphName, glyphs } from './glyphs';
-export { Icon as default } from './Icon';
+export {
+  /**
+   * @deprecated Use named export `{ Icon }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  Icon as default,
+  Icon,
+} from './Icon';
 export { isComponentGlyph } from './isComponentGlyph';
 export { LGGlyph } from './types';