Replace Rollup with Rolldown in build pipeline

packages/react-components/package.json

@@ -9,10 +9,9 @@
   "type": "module",
   "scripts": {
     "clean": "rm -rf dist",
-    "build:js": "rollup -c rollup.config.js --bundleConfigAsCjs",
-    "build:types": "tsc -p tsconfig.types.json",
-    "build:dts": "rollup -c rollup.dts.config.js",
-    "build": "npm run clean && npm run build:js && npm run build:types && npm run build:dts",
+    "build:js": "rolldown -c rolldown.config.js",
+    "build:dts": "rolldown -c rolldown.dts.config.js",
+    "build": "npm run clean && npm run build:js && npm run build:dts",
     "format:check": "npx prettier . --check",
     "format": "npx prettier . --write",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
@@ -56,10 +55,6 @@
     "@eslint/js": "10.0.1",
     "@figma/code-connect": "1.4.5",
     "@react-stately/data": "3.16.0",
-    "@rollup/plugin-commonjs": "29.0.2",
-    "@rollup/plugin-json": "6.1.0",
-    "@rollup/plugin-node-resolve": "16.0.3",
-    "@rollup/plugin-typescript": "12.3.0",
     "@storybook/addon-a11y": "10.4.0",
     "@storybook/addon-docs": "10.4.0",
     "@storybook/addon-links": "10.4.0",
@@ -84,20 +79,14 @@
     "jsdom": "29.1.1",
     "playwright": "1.60.0",
     "prettier": "3.8.3",
-    "rollup": "4.60.4",
-    "rollup-plugin-dts": "6.4.1",
-    "rollup-plugin-peer-deps-external": "2.2.4",
-    "rollup-plugin-postcss": "4.0.2",
+    "rolldown": "1.1.1",
+    "rolldown-plugin-dts": "0.25.2",
     "storybook": "10.4.0",
-    "tslib": "2.8.1",
     "typescript": "6.0.3",
     "typescript-eslint": "8.59.4",
     "vite": "8.0.16",
     "vitest": "4.1.7"
   },
-  "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "*"
-  },
   "overrides": {
     "eslint-plugin-react-hooks": {
       "zod-validation-error": "^4.0.0"

packages/react-components/rolldown.config.js

@@ -0,0 +1,80 @@
+import { defineConfig } from "rolldown";
+import { createRequire } from "module";
+
+const require = createRequire(import.meta.url);
+const pkg = require("./package.json");
+
+// Custom plugin to handle CSS bundling
+// TODO: remove once Rolldown supports CSS bundling natively
+const STYLE_INJECT_ID = "\0style-inject";
+const STYLE_INJECT_CODE = `
+export function styleInject(css) {
+  if (typeof document === "undefined") return;
+  var head = document.head || document.getElementsByTagName("head")[0];
+  var style = document.createElement("style");
+  style.type = "text/css";
+  head.appendChild(style);
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+`;
+
+// Convert CSS into JS modules
+function cssInject() {
+  return {
+    name: "css-inject",
+    resolveId(id) {
+      if (id === STYLE_INJECT_ID) return id;
+    },
+    load(id) {
+      if (id === STYLE_INJECT_ID) {
+        return { code: STYLE_INJECT_CODE, map: { mappings: "" } };
+      }
+    },
+    transform(code, id) {
+      if (!id.endsWith(".css")) return null;
+      const escaped = code
+        .replace(/\\/g, "\\\\")
+        .replace(/`/g, "\\`")
+        .replace(/\$/g, "\\$");
+      return {
+        code: `
+import { styleInject } from "${STYLE_INJECT_ID}";
+var css = \`${escaped}\`;
+styleInject(css);
+export default css;
+`,
+        map: { mappings: "" },
+        moduleType: "js",
+      };
+    },
+  };
+}
+
+export default defineConfig({
+  input: "src/index.ts",
+  external: ["react", "react-dom", "react/jsx-runtime", "@bcgov/bc-sans"],
+  platform: "browser",
+  moduleTypes: {
+    ".css": "js",
+  },
+  transform: {
+    jsx: "react-jsx",
+  },
+  output: [
+    {
+      file: pkg.main,
+      format: "cjs",
+      sourcemap: true,
+    },
+    {
+      file: pkg.module,
+      format: "esm",
+      sourcemap: true,
+    },
+  ],
+  plugins: [cssInject()],
+});

packages/react-components/rolldown.dts.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from "rolldown";
+import { dts } from "rolldown-plugin-dts";
+
+export default defineConfig({
+  input: "src/index.ts",
+  external: (id) => id.endsWith(".css"),
+  moduleTypes: {
+    ".css": "js",
+  },
+  output: {
+    dir: "dist",
+    format: "esm",
+  },
+  plugins: [dts({ emitDtsOnly: true })],
+});