Using Astro

Compile Bamboo styles in Astro through its Vite pipeline.

Astro exposes its Vite plugin list, so Bamboo can compile style calls in .astro files and framework components.

Install and initialize Bamboo

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

Keep "prepare": "bamboo codegen" in package.json so generated types exist before the editor or TypeScript reads them.

Include Astro sources

bamboo.config.ts

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

Add the Vite plugin

astro.config.mjs

import bamboocss from '@bamboocss/vite'
import { defineConfig } from 'astro/config'
 
export default defineConfig({
  vite: {
    plugins: [bamboocss()],
  },
})

Import the virtual stylesheet

Import it once from a layout used by the application:

src/layouts/Layout.astro

---
import 'virtual:bamboo.css'
---
 
<slot />

Add /// <reference types="@bamboocss/vite/client" /> to src/env.d.ts so TypeScript accepts the virtual import.

There is no Bamboo PostCSS configuration or authored @layer prelude. See Using Vite for the compiler contract and diagnostics.