national-gold

CSS modules, flush of unstyled content

Hey guys, we're trying to use CSS modules or just import CSS, but it doesn't work properly, css applies on the client-side asyncronously and there's a flush of unstyled content. We created issues about it as well https://github.com/TanStack/router/issues/3023 We're really want to use Start, but we can't go without working CSS modules or at least plain CSS (placed in the same folder as component)

14 Replies

rival-black•9mo ago

@Aaron have you used CSS modules with start?

national-goldOP•9mo ago

rival-black•9mo ago

@nikolayemrikh can you please provide a full example repo that includes all your modifications? makes it much easier to debug

national-goldOP•9mo ago

sure, minute

national-goldOP•9mo ago

https://github.com/nikolayemrikh/start-css-modules-bug

GitHub

GitHub - nikolayemrikh/start-css-modules-bug

Contribute to nikolayemrikh/start-css-modules-bug development by creating an account on GitHub.

rival-black•9mo ago

please update the GH issue as well

national-goldOP•9mo ago

import https://github.com/nikolayemrikh/start-css-modules-bug/blob/main/app/components/GreenBox/index.tsx css module https://github.com/nikolayemrikh/start-css-modules-bug/blob/main/app/components/RedBox/index.tsx are there any news or thoughts how to overcome this problem?

flat-fuchsia•9mo ago

i have a temporary workaround that i'm now using:

// before:
import "@radix-ui/themes/styles.css";
// after
import css from "@radix-ui/themes/styles.css?url";

// add in your head tag
<link rel="stylesheet" href={css} />

// before:
import "@radix-ui/themes/styles.css";
// after
import css from "@radix-ui/themes/styles.css?url";

// add in your head tag
<link rel="stylesheet" href={css} />

not ideal but it works for now

other-emerald•9mo ago

that's not css modules though

flat-fuchsia•9mo ago

right op mentioned issues w both css modules and regular css import. even with a regular css import i was running into an issue where the css wouldn't show in the built version of the project and this seems to solve both of my issues.

provincial-silver•9mo ago

I'm experiencing this issue as well. I would love to be able to use regular ol' CSS modules and SSR.

equal-aqua•4mo ago

anyone found a solution for this? im still having this problem with the devinxi alpha version

rival-black•4mo ago

we have not yet fixed this on alpha. ongoing effort

fair-rose•2mo ago

any updates on this? ran into this issue while trying to use Mantine with tanstack start SSR today. nothing I've tried seems to work at all.

Gaming

Programming

CSS modules, flush of unstyled content

Did you find this page helpful?