SolidJS•14mo ago

Loading CSS issue (FOUC) on optional parameter

I have setup a simple website with below route.

src
└── routes
    └── home
         └── index.jsx

src
└── routes
    └── home
         └── index.jsx

Building to a production website, the CSS for the /home component is included in the head

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="modulepreload" href="/assets/index-0a3eef94.js">
        <link rel="modulepreload" href="/assets/entry-client-cbe8f5d1.js">
        <link rel="stylesheet" href="/assets/entry-client-80ef3b88.css">
        <link rel="modulepreload" href="/assets/Header-0ee7e57a.js">
        <link rel="stylesheet" href="/assets/Header-0ed6b286.css">
        ...
        <link rel="modulepreload" href="/assets/AccountAppLayout.module-01ac0201.js">
        <link rel="stylesheet" href="/assets/AccountAppLayout-f513b49a.css">
        <link rel="stylesheet" href="/assets/AccountAppLayout-bd2fbb88.css">
        <link rel="stylesheet" href="/assets/index-9bd62474.css">
    </head>
    <body>

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="modulepreload" href="/assets/index-0a3eef94.js">
        <link rel="modulepreload" href="/assets/entry-client-cbe8f5d1.js">
        <link rel="stylesheet" href="/assets/entry-client-80ef3b88.css">
        <link rel="modulepreload" href="/assets/Header-0ee7e57a.js">
        <link rel="stylesheet" href="/assets/Header-0ed6b286.css">
        ...
        <link rel="modulepreload" href="/assets/AccountAppLayout.module-01ac0201.js">
        <link rel="stylesheet" href="/assets/AccountAppLayout-f513b49a.css">
        <link rel="stylesheet" href="/assets/AccountAppLayout-bd2fbb88.css">
        <link rel="stylesheet" href="/assets/index-9bd62474.css">
    </head>
    <body>

When I'm using optional parameter (https://start.solidjs.com/core-concepts/routing) as below

src
└── routes
    └── [[uid]]
        └── home
            └── index.jsx

src
└── routes
    └── [[uid]]
        └── home
            └── index.jsx

The CSS for the /home component is not included in the head.

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="modulepreload" href="/assets/entry-client-cbe8f5d1.js">
        <link rel="stylesheet" href="/assets/entry-client-80ef3b88.css">
    </head>
    <body>

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="modulepreload" href="/assets/entry-client-cbe8f5d1.js">
        <link rel="stylesheet" href="/assets/entry-client-80ef3b88.css">
    </head>
    <body>

As a result, the page show unstyled content for a while (depending on the network) and then load the CSS. I have attached the simplified version. visit http://localhost:3000/home -> Home css is loaded before the root.css visit http://localhost:3000/home2 -> root css is loaded before. How can I get the CSS to be loaded early? To avoid Flash of Unstyled Content?

SolidStart Beta Documentation

Early release documentation and resources for SolidStart Beta

test-optional-params...

4 Replies

high1•14mo ago

My SolidStart knowledge is not that great, but I don't think it has an integrated css solution What are you using for CSS?

anhvu0911OP•14mo ago

I'm using the default option. https://start.solidjs.com/core-concepts/css-and-styling

SolidStart Beta Documentation

Early release documentation and resources for SolidStart Beta

anhvu0911OP•14mo ago

From the SolidStart template (https://start.solidjs.com/getting-started/project-setup), I add some style in root.css. For components, I use module CSS. I think it has something to with the way the route with optional parameters load. As a work-around, I can pull the CSS out as global scope (using Tailwind or just declare in root.css).

hannus•8mo ago

hello, have you find the solution? I am encountered this problem. FOUC could be removed in the CSR mode, however, the same code in SSR mode unstyled content will be shown a while. I am using bulma css, and imported it in App.css code is here:

import "bulma/css/bulma.min.css";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";


import Nav from "./components/Nav";

export default function App() {
  return (
    <Router
      root={(props) => (
        <main>
          <Nav />
          <Suspense>
            <div class="content">{props.children}</div>
          </Suspense>
        </main>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

import "bulma/css/bulma.min.css";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";


import Nav from "./components/Nav";

export default function App() {
  return (
    <Router
      root={(props) => (
        <main>
          <Nav />
          <Suspense>
            <div class="content">{props.children}</div>
          </Suspense>
        </main>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

Gaming

Programming

Loading CSS issue (FOUC) on optional parameter