Skip to content

Replace microbundle with tsdown#231

Draft
omgovich wants to merge 3 commits into
masterfrom
replace-microbundle-with-tsup
Draft

Replace microbundle with tsdown#231
omgovich wants to merge 3 commits into
masterfrom
replace-microbundle-with-tsup

Conversation

@omgovich
Copy link
Copy Markdown
Owner

@omgovich omgovich commented May 8, 2026

Summary

  • Replace microbundle (stagnant) with tsdown (rolldown-based, actively maintained, fast builds)
  • CSS inlining preserved via a custom rolldown plugin that reads .css files and exports them as minified string constants — functionally identical to microbundle's --css inline
  • Simplified package.json: dropped UMD output, removed esmodule/source/umd:main fields, cleaned up exports map
  • Removed postbuild copy step — tsdown emits .mjs/.cjs natively
  • Upgraded size-limit from v4 to v12 (v4 incompatible with Node.js 22), switched to gzip measurement
  • Size limits raised by ~0.2 KB to account for different tree-shaking between esbuild (size-limit v12) and webpack (size-limit v4)
  • Used export type for type-only re-exports (rolldown is stricter than microbundle about this)

Breaking changes

  • UMD bundle (dist/index.umd.js) is no longer produced. UMD is irrelevant for a React component library since React itself must already be loaded. jsdelivr CDN data showed only ~22K total requests across all time — negligible.
  • Deep import paths like react-colorful/dist/components/... no longer resolve (these were never part of the public API)

Size comparison

All pickers remain within budget (gzip):

Picker Size Limit
HexColorPicker 3.26 KB 3.3 KB
HslColorPicker 2.91 KB 3.2 KB
RgbaStringColorPicker 3.38 KB 3.4 KB
HexColorInput 2.04 KB 3.2 KB

Test plan

  • npm run build — produces index.cjs, index.mjs, index.d.cts, index.d.mts, source maps
  • CSS confirmed inlined and minified in both CJS and ESM output
  • npm run size — all 14 pickers + input pass size-limit budgets (gzip)
  • npm test — 63/63 tests pass
  • npm run check-types — pre-existing goober/csstype error only (not related)
  • Manual smoke test with demo app

microbundle has been stagnant for years. tsup (esbuild-based) is actively
maintained, faster, and produces equivalent output.

- Add tsup.config.ts with esbuild plugin that minifies and inlines CSS as
  a string (replaces microbundle's --css inline flag)
- Rename styles.css to styles.pcss to bypass tsup's built-in CSS extraction
- Simplify package.json exports (drop UMD, esmodule, source fields)
- Remove postbuild copy step (tsup emits .mjs natively)
- Upgrade size-limit to v12 (v4 incompatible with Node 22)
- Remove microbundle, cpy-cli, parcel-plugin-css-to-string
@omgovich omgovich requested a review from Copilot May 8, 2026 00:54
@omgovich omgovich self-assigned this May 8, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 8, 2026

Size Change: 0 B 🆕

Total Size: 0 B

compressed-size-action

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Replaces the library bundler from microbundle to tsup (esbuild-based), preserving inline/minified stylesheet behavior while simplifying published outputs and build tooling.

Changes:

  • Added tsup.config.ts with a custom esbuild plugin to inline/minify .pcss as a JS string export.
  • Switched runtime stylesheet import to styles.pcss and added a corresponding TS declaration file.
  • Updated package.json build script/exports and upgraded size-limit (plus related dependency cleanup).

Reviewed changes

Copilot reviewed 5 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
tsup.config.ts Introduces tsup build configuration and custom .pcss inlining/minification plugin.
src/hooks/useStyleSheet.ts Updates stylesheet import to the new .pcss entry.
src/css/styles.pcss.d.ts Adds a type declaration for importing the .pcss file in TS.
src/css/styles.pcss Adds the inlined/minified source stylesheet content under .pcss.
package.json Switches build tooling to tsup, updates exports/size-limit paths, removes microbundle-era fields/deps.
CLAUDE.md Updates build documentation to reflect tsup + custom .pcss inlining approach.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread tsup.config.ts Outdated
Comment on lines +1 to +3
import { defineConfig } from "tsup";
import { readFileSync } from "fs";
import { transform } from "esbuild";
Comment thread tsup.config.ts Outdated
Comment on lines +5 to +12
export default defineConfig({
entry: ["src/index.ts"],
format: ["cjs", "esm"],
dts: true,
sourcemap: true,
clean: true,
external: ["react", "react-dom"],
target: "es2018",
- Replace tsup with tsdown (rolldown-based bundler)
- Use rolldown plugin with base64-encoded IDs to bypass tsdown's
  css-guard and inline CSS as minified strings
- Restore original .css file extension (undo .pcss workaround)
- Fix jest mock pattern for .css imports
- Use explicit `export type` for type-only re-exports (rolldown strict)
- Upgrade size-limit to v12 with gzip measurement
- Raise size limits by ~0.2 KB to account for toolchain change
- Update CLAUDE.md build documentation
@omgovich omgovich changed the title Replace microbundle with tsup Replace microbundle with tsdown May 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants