refactor: update build config for @primer/styled-react to rolldown

packages/styled-react/package.json

@@ -44,7 +44,6 @@
     "@primer/primitives": "10.x || 11.x",
     "@primer/react": "^38.26.0",
     "@rolldown/plugin-babel": "^0.2.3",
-    "@rollup/plugin-babel": "^6.1.0",
     "@storybook/react-vite": "^10.4.2",
     "@types/babel__core": "^7.20.5",
     "@types/react": "18.3.11",
@@ -59,8 +58,8 @@
     "react-compiler-runtime": "^1.0.0",
     "react-dom": "18.3.1",
     "rimraf": "^6.0.1",
-    "rollup": "4.59.0",
-    "rollup-plugin-typescript2": "^0.36.0",
+    "rolldown": "^1.1.2",
+    "rolldown-plugin-dts": "^0.26.0",
     "styled-components": "5.3.11",
     "typescript": "^6.0.3"
   },

packages/styled-react/rolldown.config.js

@@ -0,0 +1,168 @@
+import babel from '@rolldown/plugin-babel'
+import {defineConfig, RolldownMagicString as MagicString} from 'rolldown'
+import {dts} from 'rolldown-plugin-dts'
+import packageJson from './package.json' with {type: 'json'}
+
+const dependencies = [
+  ...Object.keys(packageJson.peerDependencies ?? {}),
+  ...Object.keys(packageJson.dependencies ?? {}),
+  ...Object.keys(packageJson.devDependencies ?? {}),
+]
+
+function createPackageRegex(name) {
+  return new RegExp(`^${name}(/.*)?`)
+}
+
+const external = dependencies.map(createPackageRegex)
+
+const declarationInput = {
+  index: 'src/index.tsx',
+  sx: 'src/sx.ts',
+  'theme-get': 'src/theme-get.ts',
+  'styled-props': 'src/styled-props.ts',
+  polymorphic: 'src/polymorphic.ts',
+  'components/BaseStyles': 'src/components/BaseStyles.tsx',
+  'components/FeatureFlaggedTheming': 'src/components/FeatureFlaggedTheming.tsx',
+  'components/ThemeContext': 'src/components/ThemeContext.ts',
+  'components/ThemeProvider': 'src/components/ThemeProvider.tsx',
+  'components/useFeatureFlaggedTheme': 'src/components/useFeatureFlaggedTheme.ts',
+  'components/useTheme': 'src/components/useTheme.ts',
+}
+
+function hasClientDirective(ast) {
+  if (ast.type !== 'Program' || !ast.body) {
+    return false
+  }
+
+  for (const node of ast.body) {
+    if (!node) {
+      continue
+    }
+
+    if (node.type !== 'ExpressionStatement') {
+      continue
+    }
+
+    if (node.directive === 'use client') {
+      return true
+    }
+  }
+
+  return false
+}
+
+export default defineConfig([
+  {
+    input: ['src/index.tsx'],
+    external,
+    plugins: [
+      babel({
+        presets: ['@babel/preset-typescript', ['@babel/preset-react', {runtime: 'automatic'}]],
+        plugins: ['babel-plugin-styled-components'],
+        include: /\.(?:ts|tsx)$/,
+      }),
+      /**
+       * This custom Rolldown 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 (hasClientDirective(ast)) {
+            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 ast = this.parse(code)
+              if (hasClientDirective(ast)) {
+                return null
+              }
+
+              const transformed = new MagicString(code)
+              transformed.prepend(`"use client";\n`)
+              return {
+                code: transformed.toString(),
+                map: null,
+              }
+            }
+
+            return null
+          },
+        },
+      },
+    ],
+    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: declarationInput,
+    external,
+    plugins: [
+      dts({
+        emitDtsOnly: true,
+        sourcemap: true,
+        tsconfig: './tsconfig.build.json',
+      }),
+    ],
+    output: {
+      dir: 'dist',
+      format: 'esm',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+  },
+])

packages/styled-react/script/build

@@ -1,10 +1,9 @@
 #!/bin/bash
 
-# Build the package
-npx rollup -c
+set -e
 
-# Generate type declarations
-npx tsc --project tsconfig.build.json
+# Build the package
+npx rolldown -c
 
 # Generate components.json
 ./script/generate-components-json