Vite HMR issue

[doubleaxe]

Description

When vite HMR is triggered - all panda generated styles disappear from stylesheet, except one from changed file. Only full server restart helps, but when file is changed again - styles disappear again.

Link to Reproduction

??

Steps to reproduce

I cannot reliably reproduce this issue. I tried creating minimal application - but it works fine there. It can be reproduced only inside my (quite big) application. It also sometimes works (after many restarts, didn't notice what change fixes issue), possibly it is related to my setup.

JS Framework

React (TS)

Panda CSS Version

0.46.1

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

I tried to track down issue by debugging pandacss sources at startup and after triggering HMR. As far as I understood scenario is the following:

• Builder class accepts list of changed files
• extractFile function is triggered for every file, and this function produces static css for ts files
• it has the following lines

    if (meta.isUnchanged && !hasConfigChanged)
      return;

• all files except changed one has meta.isUnchanged as true, and they are skipped
• static css is generated only for changed file

[doubleaxe]

I tried to debug further. Found the root case of issue, but I still wasn't able to reproduce it in small project.

In my big project postcss compiles everything 3 times at startup, i.e. it runs panda postcss async task 3 times simultaneously. I don't know what causes this behavior, plugin, config, dependency conflict?

Because builder instance is global, i.e. var builder = new import_node.Builder(); and it async, there is a race condition between these 3 calls. While waiting this: await builder.setup({ configPath, cwd }); -> const ctx = await loadConfigAndCreateContext({ configPath, cwd }); another call arrives, etc.. It basically creates 3 contexts, and one of them is used to build final css at startup, but builder remembers another empty context, which doesn't contain anything and this empty context is used on next HMR resulting almost empty css.

I can create PR to resolve this race condition, but since I'm unable to isolate it, you will unable to check if it works, unless using my big project in its current state and to hit this race condition, because it doesn't occur every time.

Should I proceed?

[doubleaxe]

found similar issue: #2406

[doubleaxe]

Created this PR to resolve issue: #2919

For those who stumble the same issue, you can use the following workaround before PR is merged:

postcss.config.js

import pandacss from '@pandacss/dev/postcss';
import autoprefixer from 'autoprefixer';

let pandacssGuard;
const pandacssWorkaround = (...options) => {
    const panda = pandacss(...options);
    return {
        postcssPlugin: 'pandacss-workaround',
        plugins: [
            async function (...args) {
                for (;;) {
                    if (!pandacssGuard) break;
                    await pandacssGuard;
                }
                pandacssGuard = panda.plugins[0](...args).finally(() => {
                    pandacssGuard = undefined;
                });
                return pandacssGuard;
            },
        ],
    };
};

export default {
    plugins: [autoprefixer(), pandacssWorkaround()],
};

[Pinpickle]

@doubleaxe thank you sooo much 🙏 I've been facing this issue for months and I could never figure out a reproduction let alone a proper fix.

[jaredkhan]

Fantastic, thanks for investigating this @doubleaxe, this fix will really speed our team up!

[theMasix]

Great Job @doubleaxe . We had this issue for months and I just moved to CLI and removed PostCSS from the dev env to fix the issue as a workaround.
You rock.