CSS missing with imports out of box @pandabox/unplugin-panda-macro/vite

[B-Stewart]

I'm attempting to get some type of tree shaking working with Panda CSS. I was directed to this repo in the discussion here: chakra-ui/panda#2761 in hopes these vite plugins would be able to help optimize the generated CSS for a component.

My understanding is the vite macro plugin essentially tells panda which files are "included/excluded" from the vite build so that it can know what css to "include/exclude" from the generated result.

I've immediately found a few problems using the Playground set up in this repo: https://github.com/astahmer/pandabox/tree/main/packages/unplugin-panda-macro/playground

I've ported it over to stackblitz and use the npm version to show an example of the below issues: https://stackblitz.com/edit/vitejs-vite-oxbqhr

1. The initial generation of CSS is fine when ./minimal is excluded from the App, however once it's imported you'll notice that green.500 is not included in the bundle. If you hot module reload by making a change, all of a sudden it is included. This is fundamentally also a problem because on vite build, it will not include green.500 even though the minimal component is in the build, meaning we're missing css we need.
2. If I add the macro import 'virtual:panda.css'; to a file that doesn't have any panda imports (such as main.tsx), the entirety of the css will not generate.
3. The vite plugin doesn't seem to respect the include properties for panda. If I add a include on the plugin, or even if I have them in panda.config.ts technically it's pointing to no components cause it's pointing to the ./src directory that doesn't exist. But it is able to find some css anyways. So guess I'm not sure if this is intended or not but it feels weird as these are usually very important to the panda config.

Overall, hoping for a solution to tree shake css effectively, this seems like the easiest way if you're using vite but not if there's issues.

[astahmer]

would you like to send a PR to fix it ?