refactor(react): use rolldown over rollup

packages/react/package.json

@@ -107,7 +107,6 @@
  "@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-json": "6.1.0",
@@ -119,6 +118,7 @@
  "@storybook/addon-links": "^10.1.10",
  "@storybook/icons": "^2.0.1",
  "@storybook/react-vite": "^10.1.10",
+ "@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",
@@ -170,8 +170,9 @@
  "react-is": "18.3.1",
  "recast": "0.23.7",
  "rimraf": "5.0.5",
- "rollup": "4.54.0",
- "rollup-plugin-import-css": "^0.0.0",
+ "rolldown": "^1.0.0-beta.53",
+ "rolldown-plugin-import-css": "^0.0.0",
+ "rollup": "4.53.3",
  "storybook": "^10.1.10",
  "terser": "5.36.0",
  "ts-toolbelt": "9.6.0",

packages/react/rollup.config.mjs → packages/react/rolldown.config.mjs

@@ -1,10 +1,8 @@
 import path from 'node:path'
-import commonjs from '@rollup/plugin-commonjs'
-import resolve from '@rollup/plugin-node-resolve'
 import babel from '@rollup/plugin-babel'
-import {importCSS} from 'rollup-plugin-import-css'
+import {defineConfig} from 'rolldown'
+import {importCSS} from 'rolldown-plugin-import-css'
 import postcssPresetPrimer from 'postcss-preset-primer'
-import MagicString from 'magic-string'
 import {isSupported} from './script/react-compiler.mjs'
 import packageJson from './package.json' with {type: 'json'}
 
@@ -94,106 +92,11 @@ const baseConfig = {
  ],
  ],
  }),
- resolve({
- extensions,
- }),
- commonjs({
- extensions,
- }),
  importCSS({
  modulesRoot: 'src',
  postcssPlugins: [postcssPresetPrimer()],
  postcssModulesOptions,
  }),
-
- /**
- * This custom rollup plugin allows us to preserve directives in source
- * code, such as "use client", in order to support React Server Components.
- *
- * The source for this plugin is inspired by:
- * https://github.com/Ephem/rollup-plugin-preserve-directives
- */
- {
- name: 'preserve-directives',
- transform(code) {
- const ast = this.parse(code)
- if (ast.type !== 'Program' || !ast.body) {
- return {
- code,
- ast,
- map: null,
- }
- }
-
- let hasClientDirective = false
-
- for (const node of ast.body) {
- if (!node) {
- continue
- }
-
- if (node.type !== 'ExpressionStatement') {
- continue
- }
-
- if (node.directive === 'use client') {
- hasClientDirective = true
- break
- }
- }
-
- if (hasClientDirective) {
- return {
- code,
- ast,
- map: null,
- meta: {
- hasClientDirective: true,
- },
- }
- }
-
- return {
- code,
- ast,
- map: null,
- }
- },
- renderChunk: {
- order: 'post',
- handler(code, chunk, options) {
- // If `preserveModules` is not set to true, we can't be sure if the client
- // directive corresponds to the whole chunk or just a part of it.
- if (!options.preserveModules) {
- return undefined
- }
-
- let chunkHasClientDirective = false
-
- for (const moduleId of Object.keys(chunk.modules)) {
- const hasClientDirective = this.getModuleInfo(moduleId)?.meta?.hasClientDirective
- if (hasClientDirective) {
- chunkHasClientDirective = true
- break
- }
- }
-
- if (chunkHasClientDirective) {
- const transformed = new MagicString(code)
- transformed.prepend(`"use client";\n`)
- const sourcemap = transformed.generateMap({
- includeContent: true,
- })
- return {
- code: transformed.toString(),
- map: sourcemap,
- }
- }
-
- return null
- },
- },
- },
  ],
  onwarn(warning, defaultHandler) {
  // Dependencies or modules may use "use client" as an indicator for React
@@ -210,17 +113,13 @@ const baseConfig = {
  },
 }
 
-export default [
- // ESM
- {
- ...baseConfig,
- external: dependencies.map(createPackageRegex),
- output: {
- interop: 'auto',
- dir: 'dist',
- format: 'esm',
- preserveModules: true,
- preserveModulesRoot: 'src',
- },
+export default defineConfig({
+ ...baseConfig,
+ external: dependencies.map(createPackageRegex),
+ output: {
+ dir: 'dist',
+ format: 'esm',
+ preserveModules: true,
+ preserveModulesRoot: 'src',
  },
-]
+})

packages/react/script/build

@@ -12,7 +12,7 @@ npm run build:precompile-color-schemes
 npm run type-css-modules
 
 # Bundle
-npx rollup -c
+npx rolldown -c
 
 # Type check
 npx tsc --project tsconfig.build.json

packages/rollup-plugin-import-css/README.md → packages/rolldown-plugin-import-css/README.md

@@ -1,13 +1,13 @@
-# rollup-plugin-import-css
+# rolldown-plugin-import-css
 
-> A Rollup plugin to include generated CSS alongside transformed CSS Modules so
+> A Rolldown plugin to include generated CSS alongside transformed CSS Modules so
 > that importing a component from a library includes its CSS.
 
 ## Usage
 
 ```ts
-// rollup.config.js
-import {importCSS} from 'rollup-plugin-import-css'
+// rolldown.config.js
+import {importCSS} from 'rolldown-plugin-import-css'
 
 export default {
  input: ['src/index.ts'],

packages/rolldown-plugin-import-css/package.json

@@ -0,0 +1,21 @@
+{
+ "name": "rolldown-plugin-import-css",
+ "version": "0.0.0",
+ "private": true,
+ "type": "module",
+ "exports": "./src/index.ts",
+ "scripts": {
+ "type-check": "tsc --noEmit"
+ },
+ "peerDependencies": {
+ "postcss": "^8.4.38",
+ "postcss-modules": "^6.0.0"
+ },
+ "devDependencies": {
+ "postcss": "^8.4.38",
+ "postcss-modules": "^6.0.0",
+ "rolldown": "^1.0.0-beta.53",
+ "typescript": "^5.9.2"
+ },
+ "sideEffects": false
+}

packages/rolldown-plugin-import-css/src/index.ts

@@ -0,0 +1,149 @@
+import type {Plugin} from 'rolldown'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import {createHash} from 'node:crypto'
+import postcss from 'postcss'
+import postcssModules from 'postcss-modules'
+
+interface ImportCSSOptions {
+ /**
+ * Provide the root directory for your package. This is used to calculate the
+ * relative path for generated CSS files
+ */
+ modulesRoot: string
+
+ /**
+ * Optionally provide an array of postcss plugins to use during CSS
+ * compilation.
+ */
+ postcssPlugins?: Array<postcss.AcceptedPlugin>
+
+ /**
+ * Optionally provide options to pass forward to `postcss-modules` when
+ * compiling CSS
+ */
+ postcssModulesOptions?: Parameters<typeof postcssModules>[0]
+}
+
+export function importCSS(options: ImportCSSOptions): Plugin {
+ const {modulesRoot, postcssPlugins = [], postcssModulesOptions = {}} = options
+ const rootDirectory = path.isAbsolute(modulesRoot) ? modulesRoot : path.resolve(process.cwd(), modulesRoot)
+
+ return {
+ name: 'import-css',
+ resolveId: {
+ filter: {
+ id: /\.css$/,
+ },
+ handler(source, importer) {
+ if (!importer) {
+ return
+ }
+
+ const moduleInfo = this.getModuleInfo(importer)
+ if (moduleInfo?.meta['import-css']?.source === source) {
+ return {
+ id: source,
+ external: true,
+ moduleSideEffects: true,
+ }
+ }
+
+ const id = path.resolve(path.dirname(importer), source)
+ return path.format({
+ dir: path.dirname(id),
+ base: `${path.basename(id)}.js`,
+ })
+ },
+ },
+ load: {
+ filter: {
+ id: /\.css\.js$/,
+ },
+ handler() {
+ return ''
+ },
+ },
+ transform: {
+ filter: {
+ id: /\.module\.css\.js$/,
+ },
+ async handler(_code, id) {
+ const sourceId = path.join(path.dirname(id), path.basename(id, '.js'))
+ const code = await fs.readFile(sourceId, 'utf8')
+ const hash = getSourceHash(code)
+ const relativePath = path.relative(rootDirectory, sourceId)
+ const name = path.basename(relativePath, relativePath.endsWith('.module.css') ? '.module.css' : '.css')
+ const fileName = path.join(
+ path.dirname(relativePath),
+ path.format({
+ name: `${name}-${hash}`,
+ ext: '.css',
+ }),
+ )
+
+ // When transforming CSS modules, we want to emit the generated CSS as an
+ // asset and include the generated file in our generated CSS Modules file
+ // which contains the classes. This makes sure that if the file containing
+ // the classes is used, then the associated styles for those classes is
+ // also included
+
+ let cssModuleClasses: {[name: string]: string} | null = null
+ const result = await postcss([
+ ...postcssPlugins,
+ postcssModules({
+ ...postcssModulesOptions,
+ getJSON(filename, json) {
+ if (postcssModulesOptions.getJSON) {
+ postcssModulesOptions.getJSON(filename, json)
+ }
+ cssModuleClasses = json
+ },
+ }),
+ ]).process(code, {
+ from: id,
+ to: fileName,
+ map: {
+ inline: false,
+ },
+ })
+
+ this.emitFile({
+ type: 'asset',
+ source: result.css,
+ fileName,
+ })
+ this.emitFile({
+ type: 'asset',
+ source: result.map.toString(),
+ fileName: `${fileName}.map`,
+ })
+
+ const moduleInfo = this.getModuleInfo(id)
+ const cssSource = `./${path.basename(fileName)}`
+ if (moduleInfo) {
+ moduleInfo.meta['import-css'] = {
+ source: cssSource,
+ }
+ }
+
+ return {
+ code: `
+import '${cssSource}';
+${
+ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+ cssModuleClasses !== null ? `export default ${JSON.stringify(cssModuleClasses)}` : ''
+}
+`,
+ moduleSideEffects: 'no-treeshake',
+ }
+ },
+ },
+ }
+}
+
+const DEFAULT_HASH_SIZE = 8
+
+function getSourceHash(source: string) {
+ return createHash('sha256').update(source).digest('hex').slice(0, DEFAULT_HASH_SIZE)
+}