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.

Bamboo reads .astro files with @astrojs/compiler-rs, which Astro 7 depends on, and with @astrojs/compiler, which Astro 6 and before depend on, for a component the first cannot read. If neither can be loaded, Bamboo says so rather than extracting nothing from .astro files without a word.

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