Setting Qwik’s CSS base path

If you have configured Qwik, Qwik City, or it’s static adapter for static site generation, you may be familiar with setting your application’s base path: the root path from which your assets will be distributed.

Your Vite config supports a root base property for your routes. Your static adapter supports an origin property for your relative link paths. Most importantly, your server-side rendering entry point (typically src/entry.ssr.tsx) contains a base property for your static assets.

If you host your static assets on a CDN, you will have configured your entry.ssr.tsx file to set your base to that CDN. Your JavaScript assets now load blazing fast. However, due to a bug in Qwik, your CSS assets are still mounted with a relative path: /build/q-*.css. The base path is ignored!

I had to dive deep to resolve this, and I share my learnings here.

Your CSS asset paths are determined by the Qwik Vite plugin.

// Sometimes new CSS files are added after the initial render
Array.from(server.moduleGraph.fileToModulesMap.entries()).forEach((entry) => {
  entry[1].forEach((v) => {
    const { pathId, query } = parseId(v.url);
    if (
      !added.has(v.url) &&
      query === '' &&
      ['.css', '.scss', '.sass', '.less', '.styl', '.stylus'].some((ext) =>
        pathId.endsWith(ext)
      )
    ) {…