Using Svelte

Compile Bamboo styles in SvelteKit through Vite.

SvelteKit builds with Vite. Bamboo runs after the Svelte plugin so style calls in .svelte scripts are compiled rather than left as runtime calls.

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 Svelte sources

bamboo.config.ts

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

Add the Vite plugin

List Bamboo after SvelteKit:

vite.config.ts

import bamboocss from '@bamboocss/vite'
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'
 
export default defineConfig({
  plugins: [sveltekit(), bamboocss()],
})

Import the virtual stylesheet

src/routes/+layout.svelte

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

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

Do not add Bamboo to postcss.config.cjs or enable a PostCSS preprocessor for it. See Using Vite for the compiler contract and diagnostics.