1/x Bump build dependencies (#8200)

### WHY are these changes introduced?

Rollup and Babel are blocking our migration to minimum NodeJS version
16.

This PR updated all Rollup and Babel dependencies. These NPM package
upgrades are not compatible with NodeJS 14.17 (main branch version).
This change unblocks a larger change to our NodeJS versions.

### WHAT is this pull request doing?

- [x] Moves duplicate dependencies to root
- [x] Upgrades all rollup and babel dependencies
- [x] Fixes any required breaking changes or warnings
- [x] Compared diff of previous packages and new ones and it doesn't
have a regression

### How to 🎩

1. Run a build on `main` save the built files on desktop
1. Run a build on this `bump-build-deps` save the built files on desktop
1. Run a diff over the built files
1. Make sure no regressions
1. CI, tests should pass and website should render all pages.

**@alex-page's output from Diff:**
[diff.zip](https://github.com/Shopify/polaris/files/10531068/diff.zip)
```
diff -bur polaris-tokens/dist-main polaris-tokens/dist-v11 > icons.diff
diff -bur polaris-tokens/dist-main polaris-tokens/dist-v11 > tokens.diff
diff -bur polaris-migrator/dist-main polaris-migrator/dist-v11 > migrator.diff
diff -bur polaris-react/build-main polaris-react/build-v11 > react.diff
```

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

package.json

@@ -44,28 +44,30 @@
     "postinstall": "patch-package"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/node": "^7.14.9",
+    "@babel/core": "^7.20.12",
+    "@babel/node": "^7.20.7",
+    "@babel/preset-typescript": "^7.18.6",
     "@changesets/changelog-github": "^0.4.4",
     "@changesets/cli": "^2.23.0",
     "@changesets/get-release-plan": "^3.0.14",
     "@next/eslint-plugin-next": "^12.1.4",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^21.1.0",
-    "@rollup/plugin-image": "^2.0.5",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.2.1",
-    "@rollup/plugin-replace": "^2.3.3",
-    "@rollup/plugin-virtual": "^2.0.3",
-    "@rollup/pluginutils": "^4.1.0",
-    "@shopify/babel-preset": "^24.1.2",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-image": "^3.0.2",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-virtual": "^3.0.1",
+    "@rollup/pluginutils": "^5.0.2",
+    "@shopify/babel-preset": "^25.0.0",
     "@shopify/cli": "^3.10.1",
     "@shopify/eslint-plugin": "^42.0.1",
     "@shopify/prettier-config": "^1.1.2",
     "@shopify/stylelint-plugin": "^11.0.0",
     "@shopify/typescript-configs": "^5.1.0",
     "@size-limit/preset-small-lib": "^5.0.3",
     "@types/jest": "^27.5.1",
+    "babel-loader": "^9.1.2",
     "downlevel-dts": "^0.6.0",
     "eslint": "^8.3.0",
     "execa": "^5.0.0",
@@ -76,8 +78,8 @@
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.5.0",
-    "rollup": "^2.70.2",
-    "rollup-plugin-node-externals": "^4.0.0",
+    "rollup": "^3.12.0",
+    "rollup-plugin-node-externals": "^5.1.0",
     "size-limit": "^5.0.3",
     "stylelint": "^14.15.0",
     "ts-node": "^10.7.0",

polaris-icons/rollup.config.mjs

@@ -222,24 +222,26 @@ export default [
         interop,
         entryFileNames: '[name].js',
         chunkFileNames: '[name].js',
+        manualChunks: (id) => {
+          if (id.startsWith(iconBasePath)) {
+            return id.replace(iconBasePath, 'icons/');
+          }
+        },
       },
       {
         dir: 'dist',
         format: 'esm',
         interop,
         entryFileNames: '[name].mjs',
         chunkFileNames: '[name].mjs',
+        manualChunks: (id) => {
+          if (id.startsWith(iconBasePath)) {
+            return id.replace(iconBasePath, 'icons/');
+          }
+        },
       },
     ],
-    manualChunks: (id) => {
-      // Generate distinct chunks for each icon
-      // This allows consuming apps to split up the icons into multiple subchunks
-      // containing a few icons each instead of always having to put every icon
-      // into a single shared chunk
-      if (id.startsWith(iconBasePath)) {
-        return id.replace(iconBasePath, 'icons/');
-      }
-    },
+
     external: ['react'],
     onwarn: (warning, warn) => {
       // Unresolved imports means Rollup couldn't find an import, possibly because

polaris-migrator/package.json

@@ -48,10 +48,6 @@
   "devDependencies": {
     "@types/is-git-clean": "^1.1.0",
     "@types/jscodeshift": "^0.11.5",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
     "@shopify/polaris": "^10.24.0",
     "plop": "^3.1.1",
     "plop-dir": "^0.0.5",

polaris-migrator/rollup.config.mjs

@@ -21,14 +21,14 @@ export default {
   output: [
     {
       format: /** @type {const} */ ('cjs'),
-      entryFileNames: '[name][assetExtname].js',
+      entryFileNames: '[name].js',
       dir: path.dirname(pkg.main),
       preserveModules: true,
       exports: 'auto',
     },
     {
       format: /** @type {const} */ ('esm'),
-      entryFileNames: '[name][assetExtname].mjs',
+      entryFileNames: '[name].mjs',
       dir: path.dirname(pkg.module),
       preserveModules: true,
     },

polaris-react/package.json

@@ -75,8 +75,6 @@
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/node": "^7.14.9",
     "@changesets/get-release-plan": "^3.0.13",
     "@shopify/browserslist-config": "^3.0.0",
     "@shopify/jest-dom-mocks": "^3.0.5",
@@ -93,8 +91,6 @@
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "ajv-cli": "^5.0.0",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-loader": "^8.1.0",
     "change-case": "^3.1.0",
     "chromatic": "^6.5.4",
     "core-js": "^3.6.5",

polaris-react/rollup.config.mjs

@@ -69,14 +69,14 @@ export default [
         format: 'cjs',
         dir: path.dirname(pkg.main),
         preserveModules: true,
-        entryFileNames: '[name][assetExtname].js',
+        entryFileNames: '[name].js',
         exports: 'named',
       },
       {
         format: 'esm',
         dir: path.dirname(pkg.module),
         preserveModules: true,
-        entryFileNames: '[name][assetExtname].js',
+        entryFileNames: '[name].js',
       },
     ],
   }),
@@ -95,7 +95,7 @@ export default [
         format: 'esm',
         dir: path.dirname(pkg.esnext),
         preserveModules: true,
-        entryFileNames: '[name][assetExtname].esnext',
+        entryFileNames: '[name].esnext',
       },
     ],
   }),

polaris-tokens/rollup.config.mjs

@@ -15,13 +15,13 @@ export default {
   output: [
     {
       format: /** @type {const} */ ('cjs'),
-      entryFileNames: '[name][assetExtname].js',
+      entryFileNames: '[name].js',
       dir: 'dist/cjs',
       preserveModules: true,
     },
     {
       format: /** @type {const} */ ('es'),
-      entryFileNames: '[name][assetExtname].mjs',
+      entryFileNames: '[name].mjs',
       dir: 'dist/esm',
       preserveModules: true,
     },