[NUXT] Missing Styles in Nuxt 3 + PandaCSS Static Builds

[marvinbernd]

Hey 👋,

We're experiencing an issue with Nuxt 3 and PandaCSS when deploying our site as a static build. Both locally and in our CI/CD pipeline, we run nuxt prepare followed by yarn generate. However, in approximately 50% of the builds, the process completes successfully, but the styles are missing from the index.html file in the dist folder.

This issue is inconsistent—sometimes re-running yarn generate resolves the problem and the styles are included. Other times, it takes multiple attempts before the build succeeds with the styles intact.

What's strange is that there are no errors, even with debug logging enabled, and the build output looks identical between the successful and failed attempts. The only noticeable difference is the absence of the styles.

Has anyone encountered similar behavior with PandaCSS and Nuxt's static generation? Any insights or suggestions would be greatly appreciated!

Thank you for your help,
Marvin

[segunadebayo]

Hey. Are you using the PostCSS Plugin or the CLI? We probably need a way to reproduce this

I’d recommend checking the panda config includes property to ensure all files are covered in the regex.

If that doesn’t work; use the Panda debug command to see the extracted css and props for each file. That you give you a pointer to where the issues are.

[marvinbernd]

@segunadebayo thank you for your recommendations! I created a repo https://github.com/marvinbernd/nuxt-panda-demo for testing. It has a similar structure but has fewer components.

I was able to reproduce the behavior. If you run pnpm generate && npx serve .output/public multiple times you will see that the styling breaks every few builds.

[marvinbernd]

I found the solution to the issue. The problem was caused by the inclusion of the @nuxt/fonts module, which adds styles to the index.html output. The same issue occurred when I removed the module and added a stylesheet through the css property in the Nuxt config.

I was only able to resolve it by moving the @font-face rules directly into the global.css stylesheet.