postcss / nextjs - Certain layers are not outputted into the resulting layout.css

[drobannx]

Description

There seems to be some sort of race condition or invalid state when running the postcss plugin with NextJS. There are times where frequently the resulting layout.css file does not contain the recipes.slots or the utilities layers in the resulting css file, the file only contains the reset, base, and tokens layers. I observed that the plugin was being invoked twice on each page load and sometimes both invocations would result in the same outputted css but other times the second invocation would be missing certain layers.

I spent a couple days adding log statements and trying to track down the cause of the observed behavior. In my logfile, I noticed that the builder setup was being invoked twice each time I refreshed the page. The first invocation resulted in the proper outputted styles. This was observed by adding a logger in the getCss method in generator.ts. But then the plugin was invoked a second time, and when that same method was invoked the outputted css did not contain the layers: utilties and recipes.slots.

I then tried to trace how those styles got included in the stylesheet. When the proper css was outputted, I noticed collectAtomic was invoked in style-decoder.ts and then afterwards the processCss method was invoked in stylesheet.ts. When I got the wrong styles outputted, these methods were never called in the logs.

Also, when I did observe the correct outputted styles, only the first invocation made calls to processAtomic.

I was able to "resolve" it consistently by moving the creation of the Builder class in the postcss plugin to inside the plugin function. I did that as I suspected there may be some invalid state in that builder object between invocations of the plugin. I imagine I am losing out on some caching by doing this but for my team, it was better than having styles missing during development.

Link to Reproduction

n/a

Steps to reproduce

1. Used create-next-app
2. Followed minimal setup for pandacss
3. Delete .next folder to start from scratch
4. Run npm run dev
5. Navigate to a route, in my case it was a nested route.
6. Panda runs and outputs a layout.css
7. Page is observed to be missing css
8. Inspected the layout.css in .next/static/css/app/layout.css, noticed it is missing two layers: utilities and recipes.slots

note: This didn't happen every time following the above steps. Maybe every 1 out of 4 it would be correct but it was not deterministic/consistent. I'd observe the behavior after a few attempts at following the above steps.

JS Framework

React (TS), NextJS (14.1.0)

Panda CSS Version

0.32.1

Browser

Any browser

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[astahmer]

can you switch to the CLI instead of the postcss plugin ? seems like NextJS has some specific issues
https://panda-css.com/docs/installation/cli
https://panda-css.com/docs/guides/debugging#the-postcss-plugin-sometimes-seems-slow-or-runs-too-frequently

[osdiab]

attempt at minimal repro doesn't exhibit the problem 🤦🏼 so I will proceed banging my head against the wall some more I guess

[astahmer]

if you're using absolute paths (using tsconfig paths aliases or package.json #imports for example) maybe Panda cannot automatically infer your outdir imports
https://panda-css.com/docs/overview/faq#hmr-does-not-work-when-i-use-tsconfig-paths
https://panda-css.com/docs/guides/debugging#how-can-i-debug-the-styles

can you try using an importMap to something that matches your imports ?

import { css } from "styled-system/css" -> "importMap": "styled-system
import { css } from "#styled-system/css" -> "importMap": "#styled-system
import { css } from "@my-monorepo/ui-kit/css" -> "importMap": "@my-monorepo/ui-kit"

[astahmer]

maybe related #2500

[osdiab]

OK yeah, that was what was missing. unfortunately now it looks like fontWeight: "semibold" styles all stopped working after upgrading, so I guess other breaking things have occurred since 0.23.0.

[osdiab]

nm, looks like maybe safari was caching something despite me telling it not to. looks good!

[drobannx]

I did switch to the CLI and that seems to have resolved it. I've ran through my steps 10 times just to be sure and I can't get in a broken state. Thanks for the suggestion. We will use that method with NextJS instead of the postcss plugin.