@devup-ui/bun-plugin

Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor for Bun

---

---

Install

bun add @devup-ui/react @devup-ui/bun-plugin

Usage

With Bun.build()

import { DevupUI, getDevupDefine } from '@devup-ui/bun-plugin'

await Bun.build({
  entrypoints: ['./src/index.tsx'],
  outdir: './dist',
  plugins: [DevupUI()],
  define: getDevupDefine(),
})

Configuration Options

import { DevupUI } from '@devup-ui/bun-plugin'

DevupUI({
  // Package to import components from (default: '@devup-ui/react')
  package: '@devup-ui/react',

  // CSS directory path (default: 'df/devup-ui')
  cssDir: 'df/devup-ui',

  // Theme configuration file path (default: 'devup.json')
  devupFile: 'devup.json',

  // Distribution directory for generated files (default: 'df')
  distDir: 'df',

  // Enable CSS extraction and transformation (default: true)
  extractCss: true,

  // Enable debug logging (default: false)
  debug: false,

  // Additional packages to include in processing (default: [])
  include: [],

  // Merge all CSS into single file (default: false)
  singleCss: false,

  // CSS class name prefix (default: undefined)
  prefix: 'my-prefix',
})

Features

• Zero Config
• Zero FOUC (Flash of Unstyled Content)
• Zero Runtime
• Full Bun bundler integration
• TypeScript support with generated theme types
• CSS extraction at build time

Theme Configuration

Create a devup.json file in your project root:

{
  "theme": {
    "colors": {
      "default": {
        "text": "#000",
        "background": "#fff"
      },
      "dark": {
        "text": "#fff",
        "background": "#000"
      }
    }
  }
}

The plugin will generate df/theme.d.ts with TypeScript types for your theme.

How It Works

The plugin transforms your JSX/TSX code at build time:

// Before
<Box bg="red" color="$text" />

// After
<div className="d0 d1" />

Generated CSS:

.d0 {
  background-color: red;
}
.d1 {
  color: var(--text);
}

License

Apache-2.0