[code-infra] Update package layout for better ESM support

.circleci/config.yml

@@ -43,6 +43,7 @@ default-job: &default-job
     REACT_VERSION: << parameters.react-version >>
     TEST_GATE: << parameters.test-gate >>
     AWS_REGION_ARTIFACTS: eu-central-1
+    MUI_USE_PACKAGE_EXPORTS: 'true'
   working_directory: /tmp/material-ui
   docker:
     - image: cimg/node:18.20

.github/workflows/ci.yml

@@ -13,6 +13,9 @@ on:
 
 permissions: {}
 
+env:
+  MUI_USE_PACKAGE_EXPORTS: 'true'
+
 jobs:
   # Tests dev-only scripts across all supported dev environments
   test-dev:

apps/pigment-css-vite-app/vite.config.ts

@@ -45,12 +45,4 @@ export default defineConfig({
     Pages(),
     splitVendorChunkPlugin(),
   ],
-  resolve: {
-    alias: [
-      {
-        find: /^@mui\/icons-material\/(.*)/,
-        replacement: '@mui/icons-material/esm/$1',
-      },
-    ],
-  },
 });

babel.config.js

@@ -52,7 +52,7 @@ module.exports = function getBabelConfig(api) {
       '@babel/preset-env',
       {
         bugfixes: true,
-        browserslistEnv: process.env.BABEL_ENV || process.env.NODE_ENV,
+        browserslistEnv: api.env() || process.env.NODE_ENV,
         debug: process.env.MUI_BUILD_VERBOSE === 'true',
         modules: useESModules ? false : 'commonjs',
         shippedProposals: api.env('modern'),
@@ -74,7 +74,7 @@ module.exports = function getBabelConfig(api) {
     // in webpack config:
     api.env(['regressions']);
 
-  const outFileExtension = '.js';
+  const outFileExtension = useESModules ? '.mjs' : '.js';
 
   /** @type {babel.PluginItem[]} */
   const plugins = [

package.json

@@ -11,7 +11,7 @@
     "build:ci": "lerna run build --ignore docs --concurrency 8 --skip-nx-cache",
     "build:public": "lerna run --no-private build",
     "build:public:ci": "lerna run --no-private build --concurrency 8 --skip-nx-cache",
-    "build:codesandbox": "NODE_OPTIONS=\"--max_old_space_size=4096\" lerna run --concurrency 8 --scope \"@mui/*\" --scope \"@mui-internal/*\" --no-private build",
+    "build:codesandbox": "MUI_USE_PACKAGE_EXPORTS=true NODE_OPTIONS=\"--max_old_space_size=4096\" lerna run --concurrency 8 --scope \"@mui/*\" --scope \"@mui-internal/*\" --no-private build",
     "release:version": "lerna version --no-changelog --no-push --no-git-tag-version --no-private --force-publish=@mui/core-downloads-tracker",
     "release:build": "lerna run --concurrency 8 --no-private build --skip-nx-cache",
     "release:changelog": "node scripts/releaseChangelog.mjs",
@@ -89,7 +89,8 @@
     "nx_test_karma_profile": "cross-env NODE_ENV=test karma start test/karma.conf.profile.js",
     "nx_test_karma": "cross-env NODE_ENV=test karma start test/karma.conf.js",
     "nx_test_regressions_run": "mocha --config test/regressions/.mocharc.js --delay 'test/regressions/**/*.test.js'",
-    "nx_test_unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'packages-internal/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'"
+    "nx_test_unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'packages-internal/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
+    "clean": "pnpm -r exec rm -rf build"
   },
   "dependencies": {
     "@googleapis/sheets": "^9.1.0",
@@ -121,6 +122,9 @@
     "@octokit/rest": "^21.0.2",
     "@pigment-css/react": "0.0.20",
     "@playwright/test": "1.46.1",
+    "@rollup/plugin-alias": "^5.1.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@types/babel__core": "^7.20.5",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.7",
@@ -181,6 +185,8 @@
     "pretty-quick": "^4.0.0",
     "process": "^0.11.10",
     "rimraf": "^5.0.10",
+    "rollup": "^4.20.0",
+    "rollup-plugin-preserve-directives": "^0.4.0",
     "serve": "^14.2.3",
     "stylelint": "^15.11.0",
     "stylelint-config-standard": "^34.0.0",

packages/mui-icons-material/package.json

@@ -29,12 +29,12 @@
   },
   "scripts": {
     "build": "shx cp -r lib/ build/ && pnpm build:typings && pnpm build:copy-files",
-    "build:lib": "pnpm build:node && pnpm build:stable",
+    "build:lib": "cross-env MUI_USE_PACKAGE_EXPORTS=false pnpm build:node && cross-env MUI_USE_PACKAGE_EXPORTS=false pnpm build:stable",
     "build:lib:clean": "rimraf lib/ && pnpm build:lib",
     "build:modern": "echo 'Skip modern build'",
     "build:node": "node ../../scripts/build.mjs node --largeFiles --outDir lib",
     "build:stable": "node ../../scripts/build.mjs stable --largeFiles --outDir lib",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:copy-files": "cross-env MUI_USE_PACKAGE_EXPORTS=false node ../../scripts/copyFiles.mjs",
     "build:typings": "node ./scripts/create-typings.mjs",
     "prebuild": "rimraf build",
     "release": "pnpm build && pnpm publish",
@@ -83,5 +83,22 @@
   },
   "engines": {
     "node": ">=14.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./esm/index.js",
+      "require": "./index.js"
+    },
+    "./esm/*": {
+      "types": "./*.d.ts",
+      "import": "./esm/*.js",
+      "require": null
+    },
+    "./*": {
+      "types": "./*.d.ts",
+      "import": "./esm/*.js",
+      "require": "./*.js"
+    }
   }
 }

packages/mui-material-pigment-css/package.json

@@ -39,6 +39,7 @@
     "typescript:module-augmentation": "node scripts/testModuleAugmentation.js"
   },
   "dependencies": {
+    "@babel/runtime": "^7.25.0",
     "@mui/system": "workspace:*",
     "@pigment-css/react": "0.0.20"
   },
@@ -60,6 +61,19 @@
       "useTheme": "@pigment-css/react/exports/useTheme"
     }
   },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.mjs",
+      "require": "./index.js"
+    },
+    "./*": {
+      "types": "./*/index.d.ts",
+      "import": "./*/index.mjs",
+      "require": "./*/index.js"
+    },
+    "./styles.css": "./styles.css"
+  },
   "engines": {
     "node": ">=14.0.0"
   }

packages/mui-material/src/PigmentGrid/PigmentGrid.tsx

@@ -8,10 +8,10 @@ import Grid from '@mui/material-pigment-css/Grid';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import {
-  generateDirectionClasses,
-  generateSizeClassNames,
-  generateSpacingClassNames,
-} from '@mui/system/Grid/gridGenerator';
+  unstable_generateDirectionClasses as generateDirectionClasses,
+  unstable_generateSizeClassNames as generateSizeClassNames,
+  unstable_generateSpacingClassNames as generateSpacingClassNames,
+} from '@mui/system/Grid';
 import { Breakpoint, Theme } from '../styles';
 
 type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };

packages/mui-system/src/Grid/index.ts

@@ -5,3 +5,8 @@ export * from './GridProps';
 export { default as gridClasses } from './gridClasses';
 export * from './gridClasses';
 export { traverseBreakpoints as unstable_traverseBreakpoints } from './traverseBreakpoints';
+export {
+  generateDirectionClasses as unstable_generateDirectionClasses,
+  generateSizeClassNames as unstable_generateSizeClassNames,
+  generateSpacingClassNames as unstable_generateSpacingClassNames,
+} from './gridGenerator';