duplicate css

[samadadi]

According to https://remix.run/docs/en/main/future/vite I am running basic remix vite project with multiple css imports in multiple components. Despite having a style tag for every individual css import, I am seeing one extra style tag that contains the content of all other css files. Is this a bug?

Update: The one extra style tag that contains the content of all other css files is related to <Links/> component.

[hi-ogawa]

I don't think such duplicate is intended. Could you elaborate your setup in more detail? or simple repro would be appreciated.
For example, it would be helpful to know:

• are you using custom server?
• does it happen when dev or build + start?
• how/where do you import css? (in route file? or independent component file? or client.entry.ts? root.tsx?)
• is there imports/exports between route files?

---

Also, if it's an issue of build + start, then I'm interested to see how vite manifest looks like.
If so, could you provide public/build/.vite/manifest.json (or public/build/manifest.json if vite 4)?

---

I'm experimenting with a simple example here https://stackblitz.com/edit/remix-run-remix-ftk8p1?file=app%2Froutes%2Ftest3.tsx but so far, css code split seems fine and I cannot reproduce duplicate css.

[hi-ogawa]

Ah, but if you are seeing something like this on dev, then currently this is a way for remix to prevent FOUC during dev:

The first <style> is what remix calls "critical css" which are included in SSR to prevent FOUC, then other <style> is injected by vite using client js.
After the first HMR, the first <style> is removed by remix so that vite can take over css HMR. So I think having duplicate css on "initial SSR + initial client render" are not expected to cause any issue.

(But if you are observing inconsistent style potentially due to this, then I think that's worth a bug report).

[samadadi]

Thank you so much for response. In fact this is the case for me.