Using Preact

Create Vite project

To get started, we will need to create a new Preact project using the preact-ts template.

pnpm create vite test-app --template preact-ts
cd test-app
pnpm install

npm create vite@latest test-app -- --template preact-ts
cd test-app
npm install

yarn create vite test-app --template preact-ts
cd test-app
yarn

bun create vite test-app --template preact-ts
cd test-app
bun install

Install Bamboo

Install bamboo and the Vite plugin, then create your bamboo.config.ts file. Preact builds with Vite, so @bamboocss/vite is the integration: it compiles every css() and cva() call to a literal class string and ships no style engine.

pnpm install -D @bamboocss/dev @bamboocss/vite
pnpm bamboo init

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

yarn add -D @bamboocss/dev @bamboocss/vite
yarn bamboo init

bun add -D @bamboocss/dev @bamboocss/vite
bun bamboo init

Update package.json scripts

Add "prepare": "bamboo codegen" to scripts. It runs codegen after every dependency install, so the output directory can stay in .gitignore.

The build itself no longer needs it. The Vite plugin generates styled-system/ in buildStart, before anything resolves an import of it, so a fresh clone builds without a separate codegen step. Keep the script regardless: tsc and your editor read the generated types without ever running the plugin.

Configure the content

Make sure that all of the paths of your Preact components are included in the include section of the bamboo.config.ts file.

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

Add the plugin to your Vite config

import bamboocss from '@bamboocss/vite'
import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'
 
export default defineConfig({
  plugins: [bamboocss(), preact()],
})

Import the virtual stylesheet

Import it once, from src/main.tsx:

import { render } from 'preact'
import { App } from './app'
import 'virtual:bamboo.css'
 
render(<App />, document.getElementById('app') as HTMLElement)

There is no postcss.config.cjs entry for Bamboo and no file carrying the @layer statement: the plugin serves the stylesheet as a virtual module that emits its own layer order.

Delete the template's src/index.css and its import from src/main.tsx while you are there. It is not in a cascade layer, so every declaration in it outranks every Bamboo utility — which is the one way this setup goes wrong quietly.

Reference the ambient declaration so TypeScript accepts that import:

/// <reference types="vite/client" />
/// <reference types="@bamboocss/vite/client" />

Start your build process

Start the dev server with pnpm dev.

Start using Bamboo

import { css } from '../styled-system/css'
 
export const App = () => {
  return <div class={css({ fontSize: '2xl', fontWeight: 'bold' })}>Hello 🎋!</div>
}