Skip to content

docs: add 'Thinking in Panda' page for the v2 engine - #3679

Open
Adebesin-Cell wants to merge 2 commits into
chakra-ui:v2from
Adebesin-Cell:docs/how-panda-works-page
Open

docs: add 'Thinking in Panda' page for the v2 engine#3679
Adebesin-Cell wants to merge 2 commits into
chakra-ui:v2from
Adebesin-Cell:docs/how-panda-works-page

Conversation

@Adebesin-Cell

@Adebesin-Cell Adebesin-Cell commented Jul 23, 2026

Copy link
Copy Markdown
Collaborator

📝 Description

Adds a "Thinking in Panda" page — the mental model behind the v2 engine — and points the pages that still described the v1 pipeline at it.

⛳️ Current behavior (updates)

overview/why-panda, concepts/styled-system, and overview/faq still describe the v1 pipeline — "static analysis + PostCSS plugins", "parse each file, run the postcss plugin". That's wrong in v2: extraction is Rust/Oxc, CSS is emitted natively, and PostCSS isn't in the hot path.

🚀 New behavior

A new page, overview/thinking-in-panda.mdx, framed as a mental model rather than a pipeline walkthrough:

  • Styles are read at build time — the functions you import join objects into class names; they don't generate CSS at runtime.
  • Everything is atomic, and shared — one class per property/value/condition, emitted once and reused. Shown with real generated CSS.
  • Keep styles static — what Panda folds at build time (constants, cross-file imports, token(), ternaries) and what it can't (runtime values), with a ❌/✅ pattern. This is the part that matters most when a tool or an AI agent writes the code.
  • Conditions live in the object — hover/focus/responsive compile to selectors and @media (width >= 48rem).
  • Tokens are your vocabulary and overrides are predictable — cascade-layer order plus last-value-wins merging.
  • Under the hood — a compact extract → encode → emit note, the v1→v2 change, where PostCSS fits now, and an honest note that minification is whitespace-only today.

The three pages above now link to it instead of each re-explaining the pipeline. Added to the sidebar under Overview.

💣 Is this a breaking change (Yes/No):

No. Docs only.

📝 Additional Information

Shape follows StyleX's "Thinking in StyleX" page. concepts/cascade-layers already documents the native polyfill, so it's untouched. npx velite --clean builds green; the internal links and the in-page anchor resolve.

@changeset-bot

changeset-bot Bot commented Jul 23, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 265ecb1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel

vercel Bot commented Jul 23, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
panda-docs Error Error Jul 24, 2026 8:08am

Request Review

@vercel

vercel Bot commented Jul 23, 2026

Copy link
Copy Markdown

@Adebesin-Cell is attempting to deploy a commit to the Chakra UI Team on Vercel.

A member of the Team first needs to authorize it.

Explain the mental model — build-time extraction, atomic shared classes,
keeping styles static, tokens as vocabulary, and predictable overrides via
cascade layers — with a compact under-the-hood note on the Rust/Oxc
pipeline. Point why-panda, styled-system, and the FAQ at it instead of each
re-describing the v1 PostCSS pipeline.
…page

# Conflicts:
#	website/content/docs/overview/why-panda.mdx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant