Skip to content

Commit 9a982e3

Browse files
Adebesin-CellAdebesin-Cell
committed
chore: format PANDA.md with oxfmt
1 parent d1812f3 commit 9a982e3

4 files changed

Lines changed: 60 additions & 60 deletions

File tree

‎PANDA.md‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ css({ color: colorByType[type] })
1515
// ✅ literals, ternaries of literals, and same-file constants all work
1616
const accent = 'red.300'
1717
css({ color: accent })
18-
css({ color: isActive ? 'red.500' : 'red.600' }) // both classes emitted
18+
css({ color: isActive ? 'red.500' : 'red.600' }) // both classes emitted
1919
```
2020

2121
When a value is genuinely dynamic, pick one of these:
@@ -58,8 +58,8 @@ Use a raw `var(...)` only when you're deliberately holding a runtime value (see
5858
Quoted scale steps hit the token scale. A raw length bypasses it.
5959

6060
```tsx
61-
css({ p: '4' }) // ✅ spacing token spacing.4 → 1rem
62-
css({ p: '4px' }) // ✅ literal length, no token — only when you mean an exact pixel value
61+
css({ p: '4' }) // ✅ spacing token spacing.4 → 1rem
62+
css({ p: '4px' }) // ✅ literal length, no token — only when you mean an exact pixel value
6363
```
6464

6565
## Conditions use _hover, not :hover
@@ -96,8 +96,8 @@ Breakpoints are `sm md lg xl 2xl`, mobile-first. On patterns, put the breakpoint
9696
Append `/{n}` to a color token to mix in transparency.
9797

9898
```tsx
99-
css({ bg: 'red.400/50' }) // ✅ 50% via color-mix
100-
css({ '--overlay': '{colors.black/50}' }) // ✅ inside a var, wrap the token in braces
99+
css({ bg: 'red.400/50' }) // ✅ 50% via color-mix
100+
css({ '--overlay': '{colors.black/50}' }) // ✅ inside a var, wrap the token in braces
101101
```
102102

103103
## Combining classes with cx()
@@ -127,9 +127,9 @@ export const button = defineRecipe({
127127
The same static rule applies to variant props:
128128

129129
```tsx
130-
button({ size: 'lg' }) // ✅ emits lg
130+
button({ size: 'lg' }) // ✅ emits lg
131131
button({ size: wide ? 'sm' : 'lg' }) // ✅ emits both
132-
button({ size }) // ❌ runtime prop → only defaultVariants generated
132+
button({ size }) // ❌ runtime prop → only defaultVariants generated
133133
```
134134

135135
Fix a genuinely dynamic prop with `staticCss` on the recipe (`staticCss: ['*']`, or list the variants). These examples set `staticCss: { recipes: '*' }` in the config for exactly this reason. Two more catches: `compoundVariants` disables responsive variant props on a config recipe, and inline `cva({...})` from `styled-system/css` never supports responsive variant props (it does emit every variant, though). Recipe functions also carry `.raw()`, `.variantKeys`, and `.splitVariantProps(props)`.
@@ -155,10 +155,10 @@ Prebuilt layout helpers: `stack`, `hstack`, `vstack`, `flex`, `grid`, `gridItem`
155155

156156
```tsx
157157
import { stack } from '../styled-system/patterns'
158-
<div className={stack({ gap: '4', align: 'center' })} />
158+
;<div className={stack({ gap: '4', align: 'center' })} />
159159

160160
import { Stack } from '../styled-system/jsx'
161-
<Stack gap="4" align="center" />
161+
;<Stack gap="4" align="center" />
162162
```
163163

164164
## Defining tokens and semantic tokens
@@ -179,12 +179,12 @@ Then reference by dot-path in `css()`: `bg: 'brand'`, `color: 'primary'`. A bare
179179

180180
Crossing these is a common mistake:
181181

182-
| You want | Import from |
183-
| --- | --- |
184-
| `css`, `cx`, `cva`, `sva`, `token`, `styled` | local `styled-system/*` (generated) |
185-
| patterns and pattern JSX | local `styled-system/patterns` and `styled-system/jsx` |
186-
| generated recipe functions | local `styled-system/recipes` |
187-
| `defineConfig`, `defineRecipe`, `defineSlotRecipe` | `@pandacss/dev` (config only) |
182+
| You want | Import from |
183+
| -------------------------------------------------- | ------------------------------------------------------ |
184+
| `css`, `cx`, `cva`, `sva`, `token`, `styled` | local `styled-system/*` (generated) |
185+
| patterns and pattern JSX | local `styled-system/patterns` and `styled-system/jsx` |
186+
| generated recipe functions | local `styled-system/recipes` |
187+
| `defineConfig`, `defineRecipe`, `defineSlotRecipe` | `@pandacss/dev` (config only) |
188188

189189
Always the local `styled-system`, the one this app's `panda build` generated. Never runtime helpers from the `pandacn` package. The `standalone-app` example has no `styled-system` at all; see its AGENTS.md.
190190

‎examples/monorepo/PANDA.md‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ css({ color: colorByType[type] })
1515
// ✅ literals, ternaries of literals, and same-file constants all work
1616
const accent = 'red.300'
1717
css({ color: accent })
18-
css({ color: isActive ? 'red.500' : 'red.600' }) // both classes emitted
18+
css({ color: isActive ? 'red.500' : 'red.600' }) // both classes emitted
1919
```
2020

2121
When a value is genuinely dynamic, pick one of these:
@@ -58,8 +58,8 @@ Use a raw `var(...)` only when you're deliberately holding a runtime value (see
5858
Quoted scale steps hit the token scale. A raw length bypasses it.
5959

6060
```tsx
61-
css({ p: '4' }) // ✅ spacing token spacing.4 → 1rem
62-
css({ p: '4px' }) // ✅ literal length, no token — only when you mean an exact pixel value
61+
css({ p: '4' }) // ✅ spacing token spacing.4 → 1rem
62+
css({ p: '4px' }) // ✅ literal length, no token — only when you mean an exact pixel value
6363
```
6464

6565
## Conditions use _hover, not :hover
@@ -96,8 +96,8 @@ Breakpoints are `sm md lg xl 2xl`, mobile-first. On patterns, put the breakpoint
9696
Append `/{n}` to a color token to mix in transparency.
9797

9898
```tsx
99-
css({ bg: 'red.400/50' }) // ✅ 50% via color-mix
100-
css({ '--overlay': '{colors.black/50}' }) // ✅ inside a var, wrap the token in braces
99+
css({ bg: 'red.400/50' }) // ✅ 50% via color-mix
100+
css({ '--overlay': '{colors.black/50}' }) // ✅ inside a var, wrap the token in braces
101101
```
102102

103103
## Combining classes with cx()
@@ -127,9 +127,9 @@ export const button = defineRecipe({
127127
The same static rule applies to variant props:
128128

129129
```tsx
130-
button({ size: 'lg' }) // ✅ emits lg
130+
button({ size: 'lg' }) // ✅ emits lg
131131
button({ size: wide ? 'sm' : 'lg' }) // ✅ emits both
132-
button({ size }) // ❌ runtime prop → only defaultVariants generated
132+
button({ size }) // ❌ runtime prop → only defaultVariants generated
133133
```
134134

135135
Fix a genuinely dynamic prop with `staticCss` on the recipe (`staticCss: ['*']`, or list the variants). These examples set `staticCss: { recipes: '*' }` in the config for exactly this reason. Two more catches: `compoundVariants` disables responsive variant props on a config recipe, and inline `cva({...})` from `styled-system/css` never supports responsive variant props (it does emit every variant, though). Recipe functions also carry `.raw()`, `.variantKeys`, and `.splitVariantProps(props)`.
@@ -155,10 +155,10 @@ Prebuilt layout helpers: `stack`, `hstack`, `vstack`, `flex`, `grid`, `gridItem`
155155

156156
```tsx
157157
import { stack } from '../styled-system/patterns'
158-
<div className={stack({ gap: '4', align: 'center' })} />
158+
;<div className={stack({ gap: '4', align: 'center' })} />
159159

160160
import { Stack } from '../styled-system/jsx'
161-
<Stack gap="4" align="center" />
161+
;<Stack gap="4" align="center" />
162162
```
163163

164164
## Defining tokens and semantic tokens
@@ -179,12 +179,12 @@ Then reference by dot-path in `css()`: `bg: 'brand'`, `color: 'primary'`. A bare
179179

180180
Crossing these is a common mistake:
181181

182-
| You want | Import from |
183-
| --- | --- |
184-
| `css`, `cx`, `cva`, `sva`, `token`, `styled` | local `styled-system/*` (generated) |
185-
| patterns and pattern JSX | local `styled-system/patterns` and `styled-system/jsx` |
186-
| generated recipe functions | local `styled-system/recipes` |
187-
| `defineConfig`, `defineRecipe`, `defineSlotRecipe` | `@pandacss/dev` (config only) |
182+
| You want | Import from |
183+
| -------------------------------------------------- | ------------------------------------------------------ |
184+
| `css`, `cx`, `cva`, `sva`, `token`, `styled` | local `styled-system/*` (generated) |
185+
| patterns and pattern JSX | local `styled-system/patterns` and `styled-system/jsx` |
186+
| generated recipe functions | local `styled-system/recipes` |
187+
| `defineConfig`, `defineRecipe`, `defineSlotRecipe` | `@pandacss/dev` (config only) |
188188

189189
Always the local `styled-system`, the one this app's `panda build` generated. Never runtime helpers from the `pandacn` package. The `standalone-app` example has no `styled-system` at all; see its AGENTS.md.
190190

‎examples/panda-app/PANDA.md‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ css({ color: colorByType[type] })
1515
// ✅ literals, ternaries of literals, and same-file constants all work
1616
const accent = 'red.300'
1717
css({ color: accent })
18-
css({ color: isActive ? 'red.500' : 'red.600' }) // both classes emitted
18+
css({ color: isActive ? 'red.500' : 'red.600' }) // both classes emitted
1919
```
2020

2121
When a value is genuinely dynamic, pick one of these:
@@ -58,8 +58,8 @@ Use a raw `var(...)` only when you're deliberately holding a runtime value (see
5858
Quoted scale steps hit the token scale. A raw length bypasses it.
5959

6060
```tsx
61-
css({ p: '4' }) // ✅ spacing token spacing.4 → 1rem
62-
css({ p: '4px' }) // ✅ literal length, no token — only when you mean an exact pixel value
61+
css({ p: '4' }) // ✅ spacing token spacing.4 → 1rem
62+
css({ p: '4px' }) // ✅ literal length, no token — only when you mean an exact pixel value
6363
```
6464

6565
## Conditions use _hover, not :hover
@@ -96,8 +96,8 @@ Breakpoints are `sm md lg xl 2xl`, mobile-first. On patterns, put the breakpoint
9696
Append `/{n}` to a color token to mix in transparency.
9797

9898
```tsx
99-
css({ bg: 'red.400/50' }) // ✅ 50% via color-mix
100-
css({ '--overlay': '{colors.black/50}' }) // ✅ inside a var, wrap the token in braces
99+
css({ bg: 'red.400/50' }) // ✅ 50% via color-mix
100+
css({ '--overlay': '{colors.black/50}' }) // ✅ inside a var, wrap the token in braces
101101
```
102102

103103
## Combining classes with cx()
@@ -127,9 +127,9 @@ export const button = defineRecipe({
127127
The same static rule applies to variant props:
128128

129129
```tsx
130-
button({ size: 'lg' }) // ✅ emits lg
130+
button({ size: 'lg' }) // ✅ emits lg
131131
button({ size: wide ? 'sm' : 'lg' }) // ✅ emits both
132-
button({ size }) // ❌ runtime prop → only defaultVariants generated
132+
button({ size }) // ❌ runtime prop → only defaultVariants generated
133133
```
134134

135135
Fix a genuinely dynamic prop with `staticCss` on the recipe (`staticCss: ['*']`, or list the variants). These examples set `staticCss: { recipes: '*' }` in the config for exactly this reason. Two more catches: `compoundVariants` disables responsive variant props on a config recipe, and inline `cva({...})` from `styled-system/css` never supports responsive variant props (it does emit every variant, though). Recipe functions also carry `.raw()`, `.variantKeys`, and `.splitVariantProps(props)`.
@@ -155,10 +155,10 @@ Prebuilt layout helpers: `stack`, `hstack`, `vstack`, `flex`, `grid`, `gridItem`
155155

156156
```tsx
157157
import { stack } from '../styled-system/patterns'
158-
<div className={stack({ gap: '4', align: 'center' })} />
158+
;<div className={stack({ gap: '4', align: 'center' })} />
159159

160160
import { Stack } from '../styled-system/jsx'
161-
<Stack gap="4" align="center" />
161+
;<Stack gap="4" align="center" />
162162
```
163163

164164
## Defining tokens and semantic tokens
@@ -179,12 +179,12 @@ Then reference by dot-path in `css()`: `bg: 'brand'`, `color: 'primary'`. A bare
179179

180180
Crossing these is a common mistake:
181181

182-
| You want | Import from |
183-
| --- | --- |
184-
| `css`, `cx`, `cva`, `sva`, `token`, `styled` | local `styled-system/*` (generated) |
185-
| patterns and pattern JSX | local `styled-system/patterns` and `styled-system/jsx` |
186-
| generated recipe functions | local `styled-system/recipes` |
187-
| `defineConfig`, `defineRecipe`, `defineSlotRecipe` | `@pandacss/dev` (config only) |
182+
| You want | Import from |
183+
| -------------------------------------------------- | ------------------------------------------------------ |
184+
| `css`, `cx`, `cva`, `sva`, `token`, `styled` | local `styled-system/*` (generated) |
185+
| patterns and pattern JSX | local `styled-system/patterns` and `styled-system/jsx` |
186+
| generated recipe functions | local `styled-system/recipes` |
187+
| `defineConfig`, `defineRecipe`, `defineSlotRecipe` | `@pandacss/dev` (config only) |
188188

189189
Always the local `styled-system`, the one this app's `panda build` generated. Never runtime helpers from the `pandacn` package. The `standalone-app` example has no `styled-system` at all; see its AGENTS.md.
190190

‎examples/standalone-app/PANDA.md‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ css({ color: colorByType[type] })
1515
// ✅ literals, ternaries of literals, and same-file constants all work
1616
const accent = 'red.300'
1717
css({ color: accent })
18-
css({ color: isActive ? 'red.500' : 'red.600' }) // both classes emitted
18+
css({ color: isActive ? 'red.500' : 'red.600' }) // both classes emitted
1919
```
2020

2121
When a value is genuinely dynamic, pick one of these:
@@ -58,8 +58,8 @@ Use a raw `var(...)` only when you're deliberately holding a runtime value (see
5858
Quoted scale steps hit the token scale. A raw length bypasses it.
5959

6060
```tsx
61-
css({ p: '4' }) // ✅ spacing token spacing.4 → 1rem
62-
css({ p: '4px' }) // ✅ literal length, no token — only when you mean an exact pixel value
61+
css({ p: '4' }) // ✅ spacing token spacing.4 → 1rem
62+
css({ p: '4px' }) // ✅ literal length, no token — only when you mean an exact pixel value
6363
```
6464

6565
## Conditions use _hover, not :hover
@@ -96,8 +96,8 @@ Breakpoints are `sm md lg xl 2xl`, mobile-first. On patterns, put the breakpoint
9696
Append `/{n}` to a color token to mix in transparency.
9797

9898
```tsx
99-
css({ bg: 'red.400/50' }) // ✅ 50% via color-mix
100-
css({ '--overlay': '{colors.black/50}' }) // ✅ inside a var, wrap the token in braces
99+
css({ bg: 'red.400/50' }) // ✅ 50% via color-mix
100+
css({ '--overlay': '{colors.black/50}' }) // ✅ inside a var, wrap the token in braces
101101
```
102102

103103
## Combining classes with cx()
@@ -127,9 +127,9 @@ export const button = defineRecipe({
127127
The same static rule applies to variant props:
128128

129129
```tsx
130-
button({ size: 'lg' }) // ✅ emits lg
130+
button({ size: 'lg' }) // ✅ emits lg
131131
button({ size: wide ? 'sm' : 'lg' }) // ✅ emits both
132-
button({ size }) // ❌ runtime prop → only defaultVariants generated
132+
button({ size }) // ❌ runtime prop → only defaultVariants generated
133133
```
134134

135135
Fix a genuinely dynamic prop with `staticCss` on the recipe (`staticCss: ['*']`, or list the variants). These examples set `staticCss: { recipes: '*' }` in the config for exactly this reason. Two more catches: `compoundVariants` disables responsive variant props on a config recipe, and inline `cva({...})` from `styled-system/css` never supports responsive variant props (it does emit every variant, though). Recipe functions also carry `.raw()`, `.variantKeys`, and `.splitVariantProps(props)`.
@@ -155,10 +155,10 @@ Prebuilt layout helpers: `stack`, `hstack`, `vstack`, `flex`, `grid`, `gridItem`
155155

156156
```tsx
157157
import { stack } from '../styled-system/patterns'
158-
<div className={stack({ gap: '4', align: 'center' })} />
158+
;<div className={stack({ gap: '4', align: 'center' })} />
159159

160160
import { Stack } from '../styled-system/jsx'
161-
<Stack gap="4" align="center" />
161+
;<Stack gap="4" align="center" />
162162
```
163163

164164
## Defining tokens and semantic tokens
@@ -179,12 +179,12 @@ Then reference by dot-path in `css()`: `bg: 'brand'`, `color: 'primary'`. A bare
179179

180180
Crossing these is a common mistake:
181181

182-
| You want | Import from |
183-
| --- | --- |
184-
| `css`, `cx`, `cva`, `sva`, `token`, `styled` | local `styled-system/*` (generated) |
185-
| patterns and pattern JSX | local `styled-system/patterns` and `styled-system/jsx` |
186-
| generated recipe functions | local `styled-system/recipes` |
187-
| `defineConfig`, `defineRecipe`, `defineSlotRecipe` | `@pandacss/dev` (config only) |
182+
| You want | Import from |
183+
| -------------------------------------------------- | ------------------------------------------------------ |
184+
| `css`, `cx`, `cva`, `sva`, `token`, `styled` | local `styled-system/*` (generated) |
185+
| patterns and pattern JSX | local `styled-system/patterns` and `styled-system/jsx` |
186+
| generated recipe functions | local `styled-system/recipes` |
187+
| `defineConfig`, `defineRecipe`, `defineSlotRecipe` | `@pandacss/dev` (config only) |
188188

189189
Always the local `styled-system`, the one this app's `panda build` generated. Never runtime helpers from the `pandacn` package. The `standalone-app` example has no `styled-system` at all; see its AGENTS.md.
190190

0 commit comments

Comments
 (0)