Bamboo CLI

Use the Bamboo CLI for code generation and maintenance alongside the required Vite integration.

The CLI uses the same build platform requirements as the Vite plugin. Supported published packages include the required native extractor; Rust is only needed to build Bamboo itself.

Install Bamboo

pnpm install -D @bamboocss/dev
pnpm bamboo init

npm install -D @bamboocss/dev
npx bamboo init

yarn add -D @bamboocss/dev
yarn bamboo init

bun add -D @bamboocss/dev
bun bamboo init

Configure the content

Add the paths to all of your JavaScript or TypeScript code where you intend to use bamboo.

import { defineConfig } from '@bamboocss/dev'
 
export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{ts,tsx,js,jsx}', './pages/**/*.{ts,tsx,js,jsx}'],
  exclude: [],
  outdir: 'styled-system',
})

Generate the authoring surface

Add "prepare": "bamboo codegen" to scripts. It generates the typed styled-system authoring surface after every dependency install, so the output directory can stay in .gitignore.

package.json

{
  "scripts": {
    "prepare": "bamboo codegen"
  }
}

Configure Vite

The CLI is not a standalone styling integration. Bamboo requires @bamboocss/vite to compile style calls and emit virtual:bamboo.css. The Vite plugin also keeps styled-system current while the app is running.

Troubleshooting

If you're not getting import autocomplete in your IDE, you may need to include the styled-system directory in your tsconfig.json file:

tsconfig.json

{
  // ...
  "include": ["src", "styled-system"]
}