HMR with Remix

[DavoCg]

Description

When I update a recipe or a token used in panda config everything is rebuild accordingly except the css file. In order to see effective changes, I need to restart remix dev server.

On the other hand, if I update a css property in any page or component, everything is rebuilt including the css file.

Link to Reproduction

https://codesandbox.io/p/github/efflam/remix-pandacss/main

Steps to reproduce

No response

JS Framework

React w/ Remix 1.18.1

Panda CSS Version

^0.6.0

Browser

No response

Operating System

• [X] macOS
• [ ] Windows
• [ ] Linux

Additional Information

Bug reproduction repository : https://github.com/efflam/remix-pandacss

[segunadebayo]

This has already been fixed in one of the recent PRs. We'll release an update shortly.

If the issue persists after the release, I'll re-open this issue.

[fcisio]

Hi, I'm on Remix 2.5.0 and Panda 0.27.1 and this is still an issue.

[fcisio]

After some testing, I can confirm that the bug reappeared on version 0.24.0. 0.23.0 is the latest version without this bug.

[anubra266]

@fcisio Does this happen in v0.27.2?

[fcisio]

Yes, seems to still happen in v0.27.2

[segunadebayo]

I just tested this with the latest remix and recommended PostCSS setup. It works as expected.

Here's the app/root.tsx

import type { LinksFunction } from '@remix-run/node'
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from '@remix-run/react'
import styles from './index.css'

export const links: LinksFunction = () => [{ rel: 'stylesheet', href: styles }]

Here's the app/index.css

@layer reset, base, tokens, recipes, utilities;

* {
  color: orange;
  font-size: 40px;
}

https://github.com/chakra-ui/panda/assets/6916170/4f7320a6-2b0e-4ded-8203-5ed03dbdb55b

I've also tested HMR in the app itself, and it works as expected.

If you still experience an issue, please open a fresh issue with a reproduction.