Bundler for the design system

[niculistana]

Hello everyone,

We are currently figuring out which bundler to use for this project. Here's some pros and cons based on @butadpj's research:

Ideal Consumers' POV:
Just need to update package's version if there's changes on designs
A Storybook with component guidelines and usage examples
Tree-shakable imports (only bundle what they use)

Ideal Maintainers' POV:
Not a burden to maintain
Devs should just focus on developing the components. Other stuff such as packaging are abstracted already
Automatic TypeScript declarations generation

Current status:
We're still deciding what's the appropriate bundler for our components. For context, we need a solution that can:
Output at least ESM, CJS for maximum compatibility
Handle styles properly so consumers can easily integrate it to their projects
Support TypeScript - Auto-generate .d.ts files for better DX
Optimize bundle size

Options:
tsup
✅ Zero-config TypeScript bundler
✅ Very simple to maintain
✅ Multiple formats out of the box
❌ Less flexibility for complex needs
❌ Limited CSS processing

Vite (Library Mode)
✅ Fast builds, great DX
✅ Built-in TypeScript support
✅ Good CSS handling
✅ Works well with Storybook
❌ Relatively newer ecosystem

Rollup + TypeScript
✅ Excellent for libraries, small bundles
✅ Great tree-shaking support
✅ Multiple output formats
❌ More configuration needed
❌ CSS handling requires plugins

Microbundle
✅ Zero-configuration
✅ Very lightweight
✅ Good for simple libraries
❌ Less control over build process
❌ May not handle complex CSS well

[jofftiquez]

I'd vote for Vite (Library Mode) based on experience with similar setups.

Why Vite makes sense here:

CSS handling is the main thing
Design systems need proper CSS bundling and Vite just works with CSS imports, modules, PostCSS etc. tsup and microbundle are kinda limited here.

Storybook works well with it
If you're doing Storybook anyway, Vite integrates nicely without weird config issues.

Won't paint you into a corner
tsup/microbundle are fine for simple stuff but design systems usually end up needing:

• custom CSS processing
• asset handling for icons/fonts
• multiple entry points
• build optimizations

Vite handles this without having to rewrite everything later.

TypeScript is solid
Built-in TS support + vite-plugin-dts for declarations. Pretty straightforward.

Basic config would be:

  // vite.config.ts
  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  import dts from 'vite-plugin-dts'
  import { resolve } from 'path'

  export default defineConfig({
    plugins: [
      react(),
      dts({ include: ['src'] })
    ],
    build: {
      lib: {
        entry: resolve(__dirname, 'src/index.ts'),
        name: 'KapwaDesignSystem',
        formats: ['es', 'cjs']
      },
      rollupOptions: {
        external: ['react', 'react-dom'],
        output: {
          globals: {
            react: 'React',
            'react-dom': 'ReactDOM'
          }
        }
      }
    }
  })

Gets you ESM/CJS, CSS handling, TS declarations, tree-shaking with minimal setup. The "newer ecosystem" thing isn't really a concern - Vite's pretty stable now and becoming the standard tooling.

[Nathan-Uy]

Chosen Vite as it's pretty much plug and play based on my experience.
It auto detects PostCSS if we were to use Tailwind, and it uses Global.css.
The best feature for me is the HMR which are not supported in the other choices, and configs are easy to set up

[niculistana]

Thanks everyone I will research vite and add a issue story with details.