refactor(project): update project to use rolldown over rollup

package.json

@@ -2,9 +2,6 @@
   "name": "primer",
   "private": true,
   "workspaces": [
-    "packages/rollup-plugin-import-css",
-    "packages/react",
-    "packages/mcp",
     "packages/*",
     "examples/*"
   ],

packages/doc-gen/package.json

@@ -21,30 +21,28 @@
   ],
   "scripts": {
     "clean": "rimraf dist",
-    "build": "rollup -c",
+    "build": "rolldown -c",
     "type-check": "tsc --noEmit",
-    "watch": "rollup -c -w",
+    "watch": "rolldown -w -c",
     "test": "vitest --run",
     "test:watch": "vitest"
   },
   "dependencies": {
     "@babel/runtime": "^7.28.2",
     "@types/signale": "^1.4.7",
+    "@types/yargs": "^17.0.33",
     "signale": "^1.4.0",
-    "yargs": "^18.0.0",
-    "@types/yargs": "^17.0.33"
+    "yargs": "^18.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",
     "@babel/plugin-transform-runtime": "^7.28.5",
     "@babel/preset-env": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "@rollup/plugin-babel": "^6.1.0",
-    "@rollup/plugin-commonjs": "^29.0.0",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.3",
+    "prettier": "^3.4.2",
     "rimraf": "^6.0.1",
-    "rollup": "^4.53.3",
+    "rolldown": "^1.0.0-beta.52",
     "rollup-plugin-typescript2": "^0.36.0",
     "typescript": "^5.8.3"
   }

packages/doc-gen/rollup.config.js → packages/doc-gen/rolldown.config.js

@@ -1,8 +1,5 @@
 import {defineConfig} from 'rollup'
 import babel from '@rollup/plugin-babel'
-import json from '@rollup/plugin-json'
-import nodeResolve from '@rollup/plugin-node-resolve'
-import commonjs from '@rollup/plugin-commonjs'
 import typescript from 'rollup-plugin-typescript2'
 import packageJson from './package.json' with {type: 'json'}
 
@@ -17,9 +14,8 @@ const external = [
 const config = defineConfig({
   input: ['./src/index.ts'],
   external,
+  platform: 'node',
   plugins: [
-    nodeResolve(),
-    commonjs(),
     typescript({
       tsconfig: './tsconfig.build.json',
     }),
@@ -39,12 +35,10 @@ const config = defineConfig({
       plugins: ['@babel/plugin-transform-runtime'],
       babelHelpers: 'runtime',
     }),
-    json(),
   ],
   output: {
     dir: 'dist',
     format: 'esm',
-    importAttributesKey: 'with',
   },
 })
 

packages/doc-gen/tsconfig.build.json

@@ -4,5 +4,6 @@
     "emitDeclarationOnly": true,
     "outDir": "./dist",
     "rootDir": "./src"
-  }
+  },
+  "exclude": ["**/__tests__/**"]
 }

packages/mcp/package.json

@@ -29,9 +29,9 @@
   },
   "scripts": {
     "clean": "rimraf dist",
-    "build": "rollup -c",
+    "build": "rolldown -c",
     "type-check": "tsc --noEmit",
-    "watch": "rollup -c -w"
+    "watch": "rolldown -w -c"
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",
@@ -50,12 +50,9 @@
     "@babel/preset-typescript": "^7.28.5",
     "@modelcontextprotocol/inspector": "^0.16.6",
     "@rollup/plugin-babel": "^6.1.0",
-    "@rollup/plugin-commonjs": "^29.0.0",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.3",
     "@types/turndown": "^5.0.5",
     "rimraf": "^6.0.1",
-    "rollup": "^4.53.3",
+    "rolldown": "^1.0.0-beta.52",
     "rollup-plugin-typescript2": "^0.36.0",
     "typescript": "^5.9.2"
   }

packages/mcp/rollup.config.js → packages/mcp/rolldown.config.js

@@ -1,8 +1,5 @@
-import {defineConfig} from 'rollup'
+import {defineConfig} from 'rolldown'
 import babel from '@rollup/plugin-babel'
-import json from '@rollup/plugin-json'
-import nodeResolve from '@rollup/plugin-node-resolve'
-import commonjs from '@rollup/plugin-commonjs'
 import typescript from 'rollup-plugin-typescript2'
 import packageJson from './package.json' with {type: 'json'}
 
@@ -18,8 +15,6 @@ const config = defineConfig({
   input: ['./src/index.ts', './src/transports/stdio.ts'],
   external,
   plugins: [
-    nodeResolve(),
-    commonjs(),
     typescript({
       tsconfig: './tsconfig.build.json',
     }),
@@ -39,12 +34,10 @@ const config = defineConfig({
       plugins: ['@babel/plugin-transform-runtime'],
       babelHelpers: 'runtime',
     }),
-    json(),
   ],
   output: {
     dir: 'dist',
     format: 'esm',
-    importAttributesKey: 'with',
   },
 })
 

packages/react/package.json

@@ -107,20 +107,17 @@
     "@figma/code-connect": "1.3.2",
     "@primer/css": "^21.5.1",
     "@primer/doc-gen": "^0.0.1",
-    "@tanstack/react-virtual": "^3.13.12",
-    "@rollup/plugin-babel": "6.1.0",
-    "@rollup/plugin-commonjs": "29.0.0",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-json": "6.1.0",
-    "@rollup/plugin-node-resolve": "16.0.3",
-    "@rollup/plugin-replace": "6.0.3",
-    "@rollup/plugin-terser": "0.4.4",
-    "@rollup/plugin-typescript": "12.3.0",
-    "@rollup/plugin-virtual": "3.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-virtual": "^3.0.2",
     "@storybook/addon-a11y": "^10.1.2",
     "@storybook/addon-docs": "^10.1.2",
     "@storybook/addon-links": "^10.1.2",
     "@storybook/icons": "^2.0.1",
     "@storybook/react-vite": "^10.1.2",
+    "@tanstack/react-virtual": "^3.13.12",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^16.3.0",
@@ -172,10 +169,8 @@
     "react-is": "18.3.1",
     "recast": "0.23.7",
     "rimraf": "5.0.5",
-    "rollup": "4.53.3",
-    "rollup-plugin-import-css": "^0.0.0",
-    "rollup-plugin-postcss": "4.0.2",
-    "rollup-plugin-visualizer": "6.0.5",
+    "rolldown": "^1.0.0-beta.52",
+    "rolldown-plugin-import-css": "^0.0.0",
     "storybook": "^10.1.2",
     "terser": "5.36.0",
     "ts-toolbelt": "9.6.0",

packages/react/rolldown.config.mjs

@@ -0,0 +1,115 @@
+import babel from '@rollup/plugin-babel'
+import {importCSS} from 'rolldown-plugin-import-css'
+import postcssPresetPrimer from 'postcss-preset-primer'
+import {defineConfig} from 'rolldown'
+import {isSupported} from './script/react-compiler.mjs'
+import packageJson from './package.json' with {type: 'json'}
+
+const extensions = ['.js', '.jsx', '.ts', '.tsx']
+const dependencies = [
+  ...Object.keys(packageJson.peerDependencies ?? {}),
+  ...Object.keys(packageJson.dependencies ?? {}),
+  ...Object.keys(packageJson.devDependencies ?? {}),
+]
+
+function createPackageRegex(name) {
+  return new RegExp(`^${name}(/.*)?`)
+}
+
+const postcssModulesOptions = {
+  generateScopedName: 'prc-[folder]-[local]-[hash:base64:5]',
+}
+
+export default defineConfig([
+  {
+    input: [
+      // "exports"
+      // "."
+      'src/index.ts',
+
+      // "./experimental"
+      'src/experimental/index.ts',
+
+      // "./deprecated"
+      'src/deprecated/index.ts',
+
+      // "./next"
+      'src/next/index.ts',
+    ],
+    external: dependencies.map(createPackageRegex),
+    plugins: [
+      babel({
+        extensions,
+        exclude: /node_modules/,
+        babelHelpers: 'inline',
+        babelrc: false,
+        configFile: false,
+        presets: [
+          '@babel/preset-typescript',
+          [
+            '@babel/preset-react',
+            {
+              modules: false,
+              runtime: 'automatic',
+            },
+          ],
+        ],
+        plugins: [
+          [
+            'babel-plugin-react-compiler',
+            {
+              target: '18',
+              sources: filepath => isSupported(filepath),
+            },
+          ],
+          'add-react-displayname',
+          'dev-expression',
+          [
+            'babel-plugin-transform-replace-expressions',
+            {
+              replace: {
+                __DEV__: "process.env.NODE_ENV !== 'production'",
+              },
+            },
+          ],
+        ],
+      }),
+      importCSS({
+        modulesRoot: 'src',
+        postcssPlugins: [postcssPresetPrimer()],
+        postcssModulesOptions,
+      }),
+    ],
+    onwarn(warning, defaultHandler) {
+      // Dependencies or modules may use "use client" as an indicator for React
+      // Server Components that this module should only be loaded on the client.
+      if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && warning.message.includes('use client')) {
+        return
+      }
+
+      if (warning.code === 'CIRCULAR_DEPENDENCY') {
+        throw warning
+      }
+
+      defaultHandler(warning)
+    },
+    output: {
+      dir: 'dist',
+      format: 'esm',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+  },
+  {
+    input: {
+      'test-helpers': 'src/utils/test-helpers.tsx',
+    },
+    platform: 'node',
+    output: {
+      dir: 'dist',
+      format: 'esm',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+  },
+])