Styled System
What is the styled-system folder and how does it work?
While Panda generates your CSS at build-time using static extraction, we still need a lightweight runtime to
transform the CSS-in-JS syntax (either object or
template-literal) to class names strings. This is where the styled-system folder
comes in.
When running the panda or panda 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"Since Panda doesn't rely on any bundler's (vite, webpack, etc) plugin, there is no code transformation happening to
convert the CSS-in-JS syntax to class names at compile-time. This is why we need a lightweight runtime to do that.
The same principles applies to patterns, recipes and even jsx components, as they all use the css function under
the hood.
If you look inside your styled-system folder, you should see the main entrypoints for the runtime:
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 Panda and should be treated as
a build artifact. This also means you don't need to commit it to your repository.
How the folder is generated
Panda writes the styled-system folder from your resolved config — every token, pattern, recipe, and utility. The
runtime is tailored to your app: it only contains enough code (and types) to support the styles you use.
This is one step of the build. For which authoring API to reach for next, see Thinking in Panda.
Pre-rendering
If you use some way to pre-render your components to static HTML, for example using Astro or RSC, the styled-system
functions like css and others will be removed at build-time and replaced by the generated class names, so that you
don't have to ship the runtime to your users.