fix: extract compiled jsx styles

[kris-ellery]

Closes #3509

📝 Description

Panda's static extractor now recognizes compiled JSX factory calls (jsx, _jsx, jsxs, _jsxs, createElement) and extracts inline style objects from them.

⛳️ Current behavior (updates)

When bundlers compile JSX, <Box css={{ color: "red.900" }} /> becomes jsx(Box, { css: { color: "red.900" } }). The extractor only handled JSX element syntax, so inline style objects in compiled output were silently dropped. This affects any library that ships compiled dist files and uses inline object literals with the css prop.

The two other patterns already worked:

• css={styles} (variable via css.raw()) — extracted at the definition site
• css={{ ...styles }} (spread) — same reason

🚀 New behavior

A new detection block inside the existing components handler recognizes compiled JSX call expressions and extracts the component name from the first argument and style props from the second argument. It produces kind: 'component' results, so the existing parser handles them with zero changes.

// Now extracted correctly
jsx(Box, { css: { color: "red.900", backgroundColor: "red.200" } })
jsxs(Box, { css: { padding: "4" }, children: ["hello"] })
React.createElement(Box, { css: { padding: "4" } })

Non-style props (children, onClick, key, etc.) are filtered during extraction via matchProp so they are never evaluated.

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

No

📝 Additional Information

• No parser changes needed — existing component result handler picks up the new extraction results automatically
• No CSS output changes — core atomic-rule snapshot tests pass with no diffs
• 7 extractor-level tests + 7 parser integration tests added, including a realistic compiled dist scenario matching the reproduction in css prop inline object literals not extracted from compiled (dist) files #3509

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
panda-docs	Ready	Preview	Apr 14, 2026 4:28pm

[vercel]

@kris-ellery is attempting to deploy a commit to the Chakra UI Team on Vercel.

A member of the Team first needs to authorize it.

[changeset-bot]

🦋 Changeset detected

Latest commit: 7815a33

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 24 packages

Name	Type
@pandacss/extractor	Patch
@pandacss/parser	Patch
@pandacss/types	Patch
@pandacss/node	Patch
@pandacss/astro-plugin-studio	Patch
@pandacss/dev	Patch
@pandacss/mcp	Patch
@pandacss/postcss	Patch
@pandacss/studio	Patch
@pandacss/config	Patch
@pandacss/core	Patch
@pandacss/generator	Patch
@pandacss/is-valid-prop	Patch
@pandacss/logger	Patch
@pandacss/plugin-lightningcss	Patch
@pandacss/plugin-svelte	Patch
@pandacss/plugin-vue	Patch
@pandacss/preset-atlaskit	Patch
@pandacss/preset-base	Patch
@pandacss/preset-open-props	Patch
@pandacss/preset-panda	Patch
@pandacss/reporter	Patch
@pandacss/shared	Patch
@pandacss/token-dictionary	Patch

Not sure what this means? Click here to learn what changesets are.

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