Bamboo CLI

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',
})

Update package.json scripts

Open your package.json file and update the scripts section as follows:

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

The prepare script that will run codegen after dependency installation. Read more about codegen in the CLI section.

Import the generated CSS

For each Bamboo run, it emits the generated CSS at the styled-system/styles.css file path. Import this file at the root component of your project.

import './styled-system/styles.css'
 
export function App() {
  return <div>Page</div>
}

Start the Bamboo build process

Run the CLI tool to scan your JavaScript and TypeScript files for style properties and call expressions.

# Run it once
pnpm bamboo
 
# Run it in watch mode
pnpm bamboo --watch

# Run it once
npx bamboo
 
# Run it in watch mode
npx bamboo --watch

# Run it once
yarn bamboo
 
# Run it in watch mode
yarn bamboo --watch

# Run it once
bun bamboo
 
# Run it in watch mode
bun bamboo --watch

Start using Bamboo

Use the generated style utilities in your code and bamboo will extract them to the generated CSS file. Then run your build process.

import { css } from './styled-system/css'
 
export function App() {
  return <div className={css({ bg: 'red.400' })} />
}