CSS is not compiled

[ClementEXWiki]

Description

I'm currently writing some React project with Vite, and followed the instructions at https://panda-css.com/docs/installation/vite.

I created a panda.css file with @layer reset, base, tokens, recipes, utilities; and imported it into my main React component, and then wrote some style using the css function.

But CSS doesn't seem to be compiled ; when I look at the DOM inspector, the elements do have some special class names (e.g. backgroundColor: "red" is transformed into something like panda--bc.red - I use some prefix here).

But these classes don't actually exist. When I look at the imported panda.css file, it is imported as a raw file: @layer reset, base, tokens, recipes, utilities; appears in the DOM, instead of the actually compiled CSS.

I tried several solutions but nothing worked. I have the styled-components directory, which is referenced in my tsconfig.json, I ensured multiple times that my React components were referenced in Panda's config file, but to no avail.

I can't really give a reproduction example as it is a huge project and I'm not sure what's causing the issue in the first place. The project is basically a Vue app, to which I added some React components which are mounted using React DOM's createRoot (which is a bit hacky but we 100% need that for our use case).

Link to Reproduction

N/A

Steps to reproduce

No response

JS Framework

React (TS)

Panda CSS Version

0.54.0

Browser

Firefox 139.0.4

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[segunadebayo]

The common cause of this is not including the correct glob pattern in the panda.config.ts file.

Check the the “include” option in the config and make sure it’s correct.

Otherwise, we’ll need a reproduction to be able to help.