@bamboocss/plugin-vue

Bamboo is build-time, type-safe, zero-runtime CSS-in-JS

Why Bamboo?

Bamboo compiles each call into shared atomic classes:

// you write
<div className={css({ fontSize: 'lg', fontWeight: 'bold' })}>Title</div>
const title = cva({ variants: { weight: { bold: { fontWeight: 'bold' }, normal: { fontWeight: 'normal' } } } })
<div className={title({ weight: active ? 'bold' : 'normal' })}>Title</div>

// the bundle gets
<div className="fs_lg fw_bold">Title</div>
<div className={cvaMap(/* finite precompiled class leaves */)}>Title</div>

The Vite compiler rejects style calls it cannot analyze, so nothing imports the styling engine and zero-runtime styling is enforced rather than optional. Dynamic cx() remains a tiny string join; Bamboo only guarantees semantic style composition when its arguments are statically analyzable.

Bamboo fails the build when a call names a pattern or token that does not exist:

ERR_BAMBOO_DEAD_IMPORT: 12 call(s) name a binding that does not exist:

`stack` is not a pattern — `../styled-system/patterns` does not export it.
  12 file(s): src/modal.tsx, src/drawer.tsx, src/sheet.tsx, … and 9 more

Bamboo prunes tokens, keyframes and reset rules that your application does not use. On the example apps here that is 36–78% of styles.css — one goes from 18,032 bytes to 3,959.

Bamboo is used in production by Contra, whose UI has more than 20,000 css() call sites, and is covered by more than 3,000 tests.

Features

• 🎯 Predictable composition – analyzable style sets merge before class allocation; recipes and css() share utility atoms
• 📦 Per-route CSS – lazy chunks load their exclusive utilities with them
• 🔎 Development source maps – DevTools can point from a CSS rule to its first style call
• 🤖 MCP server – AI assistants read your tokens, recipes and usage

Plus design tokens with simultaneous themes, type-safe styles and autocomplete via codegen, recipes and variants inspired by Stitches, fallback values, view transitions, and support for most JavaScript frameworks.

Install

Bamboo requires Vite and a supported build platform: macOS arm64/x64, glibc Linux arm64/x64, or Windows x64. Rust/Oxc extracts the styles through a bundled native binary; installing the published packages does not require Rust. See platform requirements.

Install the CLI and the Vite plugin, then scaffold the config:

npm i -D @bamboocss/dev @bamboocss/vite
npx bamboo init

Add the plugin. It emits the stylesheet and compiles your calls into class strings — without it you get neither:

// vite.config.ts
import bamboocss from '@bamboocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [bamboocss()],
})

Import the virtual stylesheet. There is no @layer file to write — the virtual module emits its own:

// src/main.tsx
import 'virtual:bamboo.css'

Start using bamboo:

import { css } from '../styled-system/css'
import { flex } from '../styled-system/patterns'

<div className={flex({ align: 'center', gap: '30px', color: 'pink.300' })}>Box 1</div>
<div className={css({ fontSize: 'lg', color: 'red.400' })}>Box 2</div>

Bamboo requires Vite: the plugin compiles style calls and globally deduplicates recipe declarations.

Directory Structure

Installed by you:

Everything else under packages/ is pulled in for you — the config loader, parser, extractor, generator and the rest of the pipeline.

Contributing

See the contributing guide. The docs site lives in website/content/docs.

Acknowledgement

Bamboo CSS started as a fork of Panda CSS.