[BUG] Removing Tailwind breaks HMR

[ramiroazar]

Describe the bug

Updating client component nested in another client component triggers a page reload instead of hmr update.

It took ages to trace this back to removing Tailwind according to instructions below.

https://shopify.dev/custom-storefronts/hydrogen/framework/css-support#remove-tailwind

Undoing changes to package.json, src/styles/index.css and postcss.config.js fixes the issue, but obviously this project doesn't use Tailwind, so that's not ideal.

Deleting src/styles/index.css and removing it from index.html doesn't change anything.

I've been able to reproduce locally with a couple of different projects and machines.

To Reproduce

I've created a repository that reproduces this issue below.

https://github.com/typeandpixel/demo-store/tree/issue/hmr

Please note the commit history, which basically outlines the following steps:

1. Created project using npm init @shopify/hydrogen -- --template demo-store --ts
2. Created TestClientParent.client.tsx and TestClientChild.client.tsx components
3. Added TestClientParent.client.tsx to src/routes/products/[handle].server.tsx
4. Removed Tailwind

To reproduce, perform the following steps:

1. Run npm run dev
2. Navigate to /products/snowboard
3. Update text in TestClientParent.client.tsx
4. Note the hmr update logged in the console
5. Update text in TestClientChild.client.tsx
6. Note the page reload logged in the console

Updating TestClientChild.client.tsx triggers a hmr update after running git revert e24ef6ef0e3cca4e7e00567d22e80c7390e60070 to undo the Tailwind removal.

Expected behaviour

Updating client component should trigger hmr update instead of page reload.

Additional context

I strangely wasn't able to reproduce this on Stackblitz, but as mentioned was able to reproduce this across a couple of different machines.

After removing Tailwind, there's some errors in the browser console about some className differences between server and client.

react_devtools_backend.js:4026 Warning: Prop "className" did not match. Server: "bg-contrast/80 text-primary hidden h-nav lg:flex items-center sticky transition duration-300 backdrop-blur-lg z-40 top-0 justify-between w-full leading-none gap-8 px-12 py-8" Client: "bg-contrast/80 text-primary shadow-lightHeader hidden h-nav lg:flex items-center sticky transition duration-300 backdrop-blur-lg z-40 top-0 justify-between w-full leading-none gap-8 px-12 py-8"

Resolving these, for example by totally removing the offending components, doesn't actually resolve the HMR issue.

• Hydrogen version1.3.1
• Node version 16.14.0 16.16.01 and 18.8.0
• Device details iMac (Retina 5K, 27-inch, 2017) macOS Monterey 12.4 and MacBook Air (13-inch, 2017) macOS Monterey 12.3.1

[ramiroazar]

Looks like removing everything except @tailwind base; from index.css still works.

[ramiroazar]

I was leveraging the above work around during development, but this doesn't work for builds.

Since leaving just @tailwind base; in index.css kept HMR working and our project needs a style reset similar to Tailwind's Preflight anyway, this was temporarily working fine.

Unfortunately, we also need global CSS mode enabled, which seems to completely remove index.css and the reset styles along with it during builds.

I'm not sure if this is expected behaviour or not, it's not mentioned in the docs, so I've created another issue.

Shopify/hydrogen#2146

Either way, I keep on running back into this issue and I can't figure it out, any insight would be super useful.

[benjaminsehl]

@frandiox — would #2175 fix this?

[frandiox]

@frandiox — would https://github.com/Shopify/hydrogen/pull/2175 fix this?

Unfortunately, I think it's unrelated. Will need to debug this one separately.