Skip to content

Commit 2d53788

Browse files
segunadebayosegunadebayo
committed
docs: cli reference
1 parent e536b32 commit 2d53788

File tree

1 file changed

+85
-15
lines changed
  • website/content/docs/references

1 file changed

+85
-15
lines changed

‎website/content/docs/references/cli.mdx‎

Lines changed: 85 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -126,23 +126,68 @@ You can use it like this:
126126

127127
```bash
128128
panda cssgen "static" --outfile dist/static.css
129+
130+
# Generate CSS split into separate files per layer and recipe
131+
panda cssgen --splitting --outfile dist/styles.css
132+
```
133+
134+
### CSS Splitting
135+
136+
The `--splitting` flag enables CSS code splitting, which generates separate CSS files for different parts of your design
137+
system instead of a single monolithic CSS file. This is useful for:
138+
139+
- **Better caching** - Unchanged layers can be cached independently
140+
- **Selective loading** - Load only the CSS you need for specific pages
141+
- **Easier debugging** - Identify which layer or recipe contributes to the final CSS
142+
143+
When using `--splitting`, Panda will generate files like:
144+
145+
```
146+
styled-system/
147+
├── styles.css # Main entry point (imports all layers)
148+
├── layers/
149+
│ ├── reset.css # CSS reset/preflight styles
150+
│ ├── tokens.css # Design token CSS variables
151+
│ ├── global.css # Global styles
152+
│ ├── recipes.css # All recipe styles
153+
│ └── utilities.css # Atomic utility classes
154+
└── recipes/
155+
├── button.css # Individual recipe: button
156+
├── card.css # Individual recipe: card
157+
└── ... # Other recipes as separate files
158+
```
159+
160+
Each file is a valid CSS file that can be imported independently:
161+
162+
```css
163+
/* Import all styles */
164+
@import './styled-system/styles.css';
165+
166+
/* Or import specific layers */
167+
@import './styled-system/layers/reset.css';
168+
@import './styled-system/layers/tokens.css';
169+
@import './styled-system/layers/utilities.css';
170+
171+
/* Or import specific recipes */
172+
@import './styled-system/recipes/button.css';
129173
```
130174

131-
| Flag | Description | Related |
132-
| ---------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------- |
133-
| `--outfile, -o <file>` | Output file for extracted css, default to './styled-system/styles.css' | - |
134-
| `--silent` | Whether to suppress all output | [`config.logLevel`](/docs/references/config#log-level) |
135-
| `--minify, -m` | Whether to minify the generated CSS | [`config.minify`](/docs/references/config#minify) |
136-
| `--clean` | Whether to clean the output directory before emitting | [`config.clean`](/docs/references/config#clean) |
137-
| `--config, -c <path>` | Path to Panda config file | [`config`](/docs/references/config.md) |
138-
| `--watch, -w` | Whether to watch for changes in the project | [`config.watch`](/docs/references/config#watch) |
139-
| `--minimal` | Skip generating CSS for theme tokens, preflight, keyframes, static and global css | - |
140-
| `--poll, -p` | Whether to poll for file changes | [`config.poll`](/docs/references/config#poll) |
141-
| `--cwd <path>` | Current working directory | [`config.cwd`](/docs/references/config#cwd) |
142-
| `--lightningcss` | Use `lightningcss` instead of `postcss` for css optimization | [`config.lightningcss`](/docs/references/config#lightningcss) |
143-
| `--polyfill` | Polyfill CSS @layers at-rules for older browsers | [`config.polyfill`](/docs/references/config#polyfill) |
144-
| `--cpu-prof` | Generate a `panda-{command}-{timestamp}.cpuprofile` file for profiling | [Debugging](/docs/guides/debugging) |
145-
| `--logfile <file>` | Outputs logs to a file | [Debugging](/docs/guides/debugging) |
175+
| Flag | Description | Related |
176+
| ---------------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
177+
| `--outfile, -o <file>` | Output file for extracted css, default to './styled-system/styles.css' | - |
178+
| `--silent` | Whether to suppress all output | [`config.logLevel`](/docs/references/config#log-level) |
179+
| `--minify, -m` | Whether to minify the generated CSS | [`config.minify`](/docs/references/config#minify) |
180+
| `--clean` | Whether to clean the output directory before emitting | [`config.clean`](/docs/references/config#clean) |
181+
| `--config, -c <path>` | Path to Panda config file | [`config`](/docs/references/config.md) |
182+
| `--watch, -w` | Whether to watch for changes in the project | [`config.watch`](/docs/references/config#watch) |
183+
| `--minimal` | Skip generating CSS for theme tokens, preflight, keyframes, static and global css | - |
184+
| `--splitting` | Emit CSS as separate files per layer (reset, global, tokens, utilities) and per recipe | - |
185+
| `--poll, -p` | Whether to poll for file changes | [`config.poll`](/docs/references/config#poll) |
186+
| `--cwd <path>` | Current working directory | [`config.cwd`](/docs/references/config#cwd) |
187+
| `--lightningcss` | Use `lightningcss` instead of `postcss` for css optimization | [`config.lightningcss`](/docs/references/config#lightningcss) |
188+
| `--polyfill` | Polyfill CSS @layers at-rules for older browsers | [`config.polyfill`](/docs/references/config#polyfill) |
189+
| `--cpu-prof` | Generate a `panda-{command}-{timestamp}.cpuprofile` file for profiling | [Debugging](/docs/guides/debugging) |
190+
| `--logfile <file>` | Outputs logs to a file | [Debugging](/docs/guides/debugging) |
146191

147192
## studio
148193

@@ -172,6 +217,24 @@ pnpm panda studio --port 3000
172217
| `--outdir <dir>` | Output directory for static files | - |
173218
| `--base <path>` | Base path of project | - |
174219

220+
## spec
221+
222+
Generate spec files for your theme (useful for documentation).
223+
224+
```bash
225+
pnpm panda spec
226+
227+
# Generate specs in custom directory
228+
pnpm panda spec --outdir ./theme-specs
229+
```
230+
231+
| Flag | Description | Related |
232+
| --------------------- | ------------------------------- | ------------------------------------------------------ |
233+
| `--silent` | Whether to suppress all output | [`config.logLevel`](/docs/references/config#log-level) |
234+
| `--outdir <dir>` | Output directory for spec files | - |
235+
| `--config, -c <path>` | Path to Panda config file | [`config`](/docs/references/config.md) |
236+
| `--cwd <path>` | Current working directory | [`config.cwd`](/docs/references/config#cwd) |
237+
175238
## analyze
176239

177240
Analyze design token and recipe usage.
@@ -186,12 +249,19 @@ pnpm panda analyze src/components/Button.tsx
186249

187250
# analyze a specific glob
188251
pnpm panda analyze "src/components/**"
252+
253+
# analyze only token usage
254+
pnpm panda analyze --scope token
255+
256+
# analyze only recipe usage
257+
pnpm panda analyze --scope recipe
189258
```
190259

191260
| Flag | Description | Related |
192261
| ---------------------- | -------------------------------------------- | ------------------------------------------------------ |
193262
| `--outfile <filepath>` | Output analyze report in given JSON filepath | - |
194263
| `--silent` | Whether to suppress all output | [`config.logLevel`](/docs/references/config#log-level) |
264+
| `--scope <type>` | Select analysis scope (token or recipe) | - |
195265
| `--config, -c <path>` | Path to Panda config file | [`config`](/docs/references/config.md) |
196266
| `--cwd <path>` | Current working directory | [`config.cwd`](/docs/references/config#cwd) |
197267

0 commit comments

Comments
 (0)