---
title: Styled System
description: What is the styled-system folder and how does it work?
---

The generated `styled-system` folder is Bamboo's typed authoring interface. Under Vite, its style functions are
compile-time syntax: the compiler replaces them before the browser bundle and the styling engine tree-shakes away.
CLI/PostCSS integrations execute the generated functions at runtime instead.

When running the `bamboo` or `bamboo codegen` commands, the [`config.outdir`](/docs/references/config#outdir) will be
used as output path to generate the `styled-system` in.

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

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

The [Vite compiler](/docs/guides/source-transformation) 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:

<FileTree>
  <FileTree.Folder name="styled-system" defaultOpen>
    <FileTree.Folder name="css" />
    <FileTree.Folder name="recipes" />
    <FileTree.Folder name="patterns" />
    <FileTree.Folder name="tokens" />
    <FileTree.Folder name="types" />
    <FileTree.File name="helpers.mjs" />
    <FileTree.File name="styles.css" />
  </FileTree.Folder>
</FileTree>

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 or with the postcss plugin, here's what's happening under the hood:

1. **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.

2. **Generating artifacts**:

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

3. **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.
