[BUG] CSS Module unstyled flash

[DaanKorver]

Describe the bug I am using Vite module CSS. But when the page loads, for a split second no CSS is applied. This causes a giantic layout shift. I've tried to build the project and preview it in production to see if it was just a dev thing, but the flash of unstyled content was the same.

To Reproduce

1. Import a CSS module with some stylings
2. Add the desired className to an element.
3. Reload your page to see the unstyled content flash

Expected behaviour A clear page without any unstyled flashes

Additional context I don't wanna use tailwind since I dislike it.

• Hydrogen version 3.0.27

• Node version v16.16.1

• Device details OS: Arch Linux Browser: Google Chrome Browser version: 101

[blittle]

Which hydrogen version are you using? There is no 3.0.27 version.

[DaanKorver]

Whoops, looked at the wrong package. Looks like 1.0.2

[blittle]

@frandiox for some reason I remember this being resolved. Is this a regression?

[frandiox]

Is this a regression?

I think the code hasn't changed at all in the past 2 months and I haven't noticed any flash 🤔 In any case, I'm about to push a new CSS approach so we could wait for that and see if it works better.

[nicofierro94]

We have the same issue both in development and production. But in our case no CSS keeps until user refresh the site. I tried with the hydrogen demo, and the same thing happens.

[frandiox]

@nicofierro94 Have you tried with the new global mode? It's possible there's a flash in development due to HMR + CSS injection but I think there shouldn't be any flash in production.

[shopify[bot]]

Oxygen deployed a preview of your juanpprieto/analytics-manager branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
custom-cart-method	✅ Successful (Logs)	Preview deployment	Inspect deployment	March 11, 2024 6:28 PM
vite	✅ Successful (Logs)	Preview deployment	Inspect deployment	March 11, 2024 6:28 PM
subscriptions	✅ Successful (Logs)	Preview deployment	Inspect deployment	March 11, 2024 6:28 PM
third-party-queries-caching	✅ Successful (Logs)	Preview deployment	Inspect deployment	March 11, 2024 6:28 PM
optimistic-cart-ui	✅ Successful (Logs)	Preview deployment	Inspect deployment	March 11, 2024 6:28 PM

Learn more about Hydrogen's GitHub integration.

[github-actions[bot]]

We detected some changes in packages/*/package.json or packages/*/src, and there are no updates in the .changeset. If the changes are user-facing and should cause a version bump, run npm run changeset add to track your changes and include them in the next release CHANGELOG. If you are making simple updates to examples or documentation, you do not need to add a changeset.