css bundling differences and issues between file-based routes and config-based routes

[sabercoy]

I have looked into two approaches for a new, basic, solid-start app

• file-based routing: https://start.solidjs.com/api/FileRoutes
• config-based routing: https://github.com/solidjs/solid-router?tab=readme-ov-file#config-based-routing

minimum repro: https://github.com/Numnumberry/solidstart-css-routing

• in the repro, toggle between file and config based routing inside app.tsx (building and starting each)

export const configRoutes: RouteDefinition[] = [
  {
    path: '/',
    component: lazy(() => import('./routes/index'))
  },
  {
    path: '/about',
    component: lazy(() => import('./routes/about'))
  },
  {
    path: '/*all',
    component: lazy(() => import('./routes/[...404]'))
  }
]

export default function App() {
  const fileRoutes = FileRoutes()

  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Title>SolidStart - Basic</Title>
          <a href="/">Index</a>
          <a href="/about">About</a>
          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
      {fileRoutes}
      {/* {configRoutes} */}
    </Router>
  );
}

For each case, there are issues with how the css is bundled and sent to the browser

file-based:

• Initially loading the page results in desired behavior: the browser waits for the CSS to load before painting the screen (this is good because the user does not see a flash of style changes). This is because the CSS is loaded by a <link /> tag in the initial document.
• However, when preloading (by mouse hovering) another route using Solid's <A /> tag, the CSS does not get loaded. The CSS only gets loaded when the <A /> tag is actually clicked (this is not desired, the user sees a flash of style changes).

file.mp4

config-based

• Initially loading the page results in undesired behavior: the browser does not wait for the CSS to load before painting the screen (this results in a flash of style changes). This is because the CSS is is not loaded by a <link /> tag in the initial document. It is instead loaded by JavaScript: HttpStatusCode-[hash].js
• However, when preloading (by mouse hovering) another route using Solid's <A /> tag, the CSS does get loaded in time. So when the user actually does click the <A /> tag, the CSS is already there and there is no flash of style changes.

config.mp4

So the two main questions I have are

• should there be a difference between file-based and config-based routing? Or maybe I configured something wrong?
• is it possible to have a setup where the CSS is fetched and loaded before loading the initial page and before loading another route through <A /> tag? To completely eliminate flashes of style changes altogether.

related

• https://discord.com/channels/722131463138705510/910635844119982080/1194213959553798154
• CSS Not in Initial Document for Prod Builds (Waterfalls) #79

[nksaraf]

I think ideally the best case scenario for both factors (initial and preload) should work optimally in the file configuration routing case