There are two primary approaches to CSS-in-JS
In this approach, styles are injected into the browser at runtime, typically using JavaScript to dynamically add styles to the DOM.
With the Static Extraction approach, styles are statically extracted at build time using a compiler or bundler, removing the need to inject styles into the browser at runtime.
Panda CSS uses the static extraction approach. It works in 3 main steps:
Codegen: It generates JavaScript code for authoring styles.
Compile: A 'Just-in-Time' compiler tracks style usage.
Generate: The compiler output is used to generate the static stylesheet on demand.
Panda stands out from other solutions due to its use of the atomic CSS pattern which produces leaner output with a single class per property and flattened styles.
It's framework agnostic nature also allows Panda to work with JavaScript frameworks and libraries like React, Remix, Solid, Astro and more.