Styled System

What is the styled-system folder and how does it work?

The generated styled-system folder is Bamboo's typed authoring interface. Its style functions are compile-time syntax: the Vite compiler replaces them before the browser bundle. If a generated class-producing function runs, it throws and explains that the call was not compiled.

When running the bamboo or bamboo codegen commands, the config.outdir will be used as output path to generate the styled-system in.

This is the core of what the styled-system does:

css({ color: 'blue.300' }) // => "c_blue.300"

The Vite compiler resolves that call into a compact shared atom. A call it cannot represent statically or as a finite recipe choice is a build error; there is no styling-runtime fallback.

The same principles apply to patterns and recipes, as they all use the css function under the hood.

If you look inside your styled-system folder, you should see the generated authoring entrypoints:

styled-system

css
recipes
patterns
tokens
types
helpers.mjs
styles.css

Feel free to explore the files inside the styled-system folder to get a better understanding of how it works in details!

💡

Note: The styled-system folder is not meant to be edited manually. It is generated by Bamboo and should be treated as a build artifact. This also means you don't need to commit it to your repository.

How does it work?

When running the bamboo command and building with the Vite plugin, here's what's happening under the hood:

Load Bamboo context:

Find and evaluate app config, merge result with presets.
Create bamboo context: prepare code generator from config, parse user's file as AST.

Generating artifacts:

Write JavaScript authoring helpers and types to the output directory. Vite removes style-engine helpers from the application bundle after compilation.

Extracting used styles in app code:

Run parser on each user's file: identify and extract styles, compute CSS, write to styles.css.

That 2. Generating artifacts step uses the resolved tokens, patterns, recipes, and utilities to create a tailored authoring API. Extraction-only integrations execute it; Vite treats its style surfaces as compiler intrinsics.

Pre-rendering

Vite compilation removes styled-system style functions whether rendering happens in the browser, Astro, RSC, or another pre-renderer. Class names are derived from the declarations themselves, so a server build and a client build name the same style identically and their HTML and CSS agree without coordination.