`css` prop inline object literals not extracted from compiled (dist) files

[kris-ellery]

Description

Panda fails to extract styles when a css prop is passed an inline object literal in compiled (dist) files. The same pattern is extracted correctly from source files.
This was discovered while using Panda to tree-shake CSS across both local source files and compiled library dist files (e.g. component libraries from a design system).

When JSX is compiled, <Box css={{ color: 'RebeccaPurple' }} /> becomes a jsx() function call. Panda's static analysis appears to handle the JSX form correctly, but does not recognize the inline object literal in the compiled form.

Pattern	Source	Dist
Inline object literal css={{ color: '...' }}	✅ Extracted	❌ Not extracted
Pre-defined variable css={styles}	✅ Extracted	✅ Extracted
Spread of pre-defined variable css={{ ...spreadStyles }}	✅ Extracted	✅ Extracted

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-4pyiuwzk?file=src%2FApp.tsx&terminal=dev

Steps to reproduce

Source file (works):

import type { ReactNode } from 'react';

import { css, cx } from '@/styled-system/css';
import type { SystemStyleObject } from '@/styled-system/types';

interface BoxProps {
  children?: ReactNode;
  css?: SystemStyleObject;
}

const Box = (props: BoxProps) => {
  const { css: cssProp, children } = props;
  return <div className={cx(css(cssProp))}>{children}</div>;
};

const styles = css.raw({
  color: 'white',
  backgroundColor: 'AntiqueWhite',
});

const spreadStyles = css.raw({
  color: 'white',
  backgroundColor: 'SteelBlue',
});

export const CustomComponent = () => {
  return (
    <>
      {/* Panda CAN extract from source, but CANNOT from dist */}
      <Box css={{ color: 'black', backgroundColor: 'RebeccaPurple' }}>Box</Box>

      {/* Panda CAN extract from source and dist */}
      <Box css={styles}>Box</Box>
      <Box css={{ ...spreadStyles }}>Box</Box>
    </>
  );
};

Compiled dist file (broken):

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { css, cx } from "@/styled-system/css";

const Box = (props)=>{
    const { css: cssProp, children } = props;
    return /*#__PURE__*/ jsx("div", {
        className: cx(css(cssProp)),
        children: children
    });
};
const styles = css.raw({
    color: 'white',
    backgroundColor: 'AntiqueWhite'
});
const spreadStyles = css.raw({
    color: 'white',
    backgroundColor: 'SteelBlue'
});
const CustomComponent = ()=>{
    return /*#__PURE__*/ jsxs(Fragment, {
        children: [
            /*#__PURE__*/ jsx(Box, {
                css: {
                    color: 'black',
                    backgroundColor: 'RebeccaPurple'
                },
                children: "Box"
            }),
            /*#__PURE__*/ jsx(Box, {
                css: styles,
                children: "Box"
            }),
            /*#__PURE__*/ jsx(Box, {
                css: {
                    ...spreadStyles
                },
                children: "Box"
            })
        ]
    });
};

export { CustomComponent };

Panda should extract styles from inline object literals passed to the css prop regardless of whether the file is a source .tsx file or a compiled .js dist file.

JS Framework

React (TS)

Panda CSS Version

1.8.2

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[kris-ellery]

Want to share more context on why scanning dist files matters and the use case driving this bug report.

I built a webpack plugin to enable CSS tree-shaking for apps that consume design system and component libraries. Here's how it works:

• The plugin scans all local files and node_modules and collects only the files that are actually imported in the production bundle
• That list is passed to Panda as the include array
• Panda scans those files and extracts only the styles that are used Webpack produces a smaller, tree-shaken CSS output

Why this matters
Design systems typically ship a buildinfo file that causes Panda to include CSS for every component in the library, even ones the consuming app never uses. If an app uses 10 out of 100 components, there's no reason to ship CSS for all 100.

By bypassing buildinfo and pointing Panda directly at dist files in node_modules, the plugin generates a fresh, minimal stylesheet scoped only to what's actually imported. The result is a significant reduction in CSS bundle size, especially in apps that consume multiple libraries that share a common design system.

Happy to share more details about the webpack plugin if it's useful context for the fix.

[segunadebayo]

I wonder if shipping the src alongside the compiled dist code would solve this? This is a fairly common pattern for better sourcemap support as well.

That said, I'm open to implementing support for this if it doesn't add too much complexity to the compiler.

[kris-ellery]

Thanks for the quick response!

I did try shipping src alongside dist but ran into a reliability issue. The webpack plugin tree-shakes by tracing actual production import paths, which always point to dist. Mapping those back to src is inconsistent since some libraries bundle into a single entry, others are bundleless, so there is no reliable way to automate it.

Scanning dist directly is the only approach that works consistently. The fix would be scoped to a single edge case: inline object literals passed to the css prop inside compiled jsx() calls. The style data is right there in the output, Panda just doesn't pick it up.