flat-fuchsia

Styles for specific component loading after render

Hey there 👋 It seems that when I use a css stylesheet in a specific component, the styles are loading a short time after the initial page render, causing a flash of styling to moments after page load. This issue persists even when the stylesheet is imported in the route file only as opposed to the component file. When I move the styling to the global css file, it obviously works. Does stylesheet bundling not work on a per-route basis or per-component basis?

// biography.tsx
import "./styles.css";

export function Biography({ content }: { content: string }) {
  return (
    <div
      className="hover:cursor-pointer hover:bg-card active:bg-gray-200 fade-container w-full max-w-full overflow-hidden rounded-xl px-5 pt-5 cursor-pointer"
      tabIndex={0}
    >
      <div className="content-wrapper flex flex-col gap-2">
        <div className="flex items-center justify-between">
          <div className="font-semibold text-card-foreground">Biography</div>
          <svg
            className="h-4 w-4 opacity-60"
            fill="currentColor"
            viewBox="0 0 20 20"
          >
            <path
              fill-rule="evenodd"
              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </div>
        <div className="text-fade h-24 overflow-hidden font-serif">
          {content}
        </div>
      </div>
    </div>
  );
}

// biography.tsx
import "./styles.css";

export function Biography({ content }: { content: string }) {
  return (
    <div
      className="hover:cursor-pointer hover:bg-card active:bg-gray-200 fade-container w-full max-w-full overflow-hidden rounded-xl px-5 pt-5 cursor-pointer"
      tabIndex={0}
    >
      <div className="content-wrapper flex flex-col gap-2">
        <div className="flex items-center justify-between">
          <div className="font-semibold text-card-foreground">Biography</div>
          <svg
            className="h-4 w-4 opacity-60"
            fill="currentColor"
            viewBox="0 0 20 20"
          >
            <path
              fill-rule="evenodd"
              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </div>
        <div className="text-fade h-24 overflow-hidden font-serif">
          {content}
        </div>
      </div>
    </div>
  );
}

What is the best way to ensure these styles are available upon first render?

4 Replies

harsh-harlequin•4mo ago

is this in dev only? we will need to collect styles in dev to prevent this

flat-fuchsiaOP•3mo ago

I haven't been able to test outside of the dev server, but I will test soon. Am I approaching styling incorrectly here?

harsh-harlequin•3mo ago

no, it's just that for the SSR response during dev we don't get the styles from vite (only for production build). so we will need to implement our own style collection for dev

wise-white•3mo ago

For now, you should import global styles with "?url" suffix and add a head to your root route like below https://tanstack.com/start/latest/docs/framework/react/tailwind-integration#import-the-css-file-in-your-__roottsx-file (I am not sure of the interaction with css modules though, it might also flash)

Gaming

Programming

Styles for specific component loading after render

Did you find this page helpful?