From 8008c1383371deabb8ceae4d144049282b2928ca Mon Sep 17 00:00:00 2001
From: Tom Herni <tomherni@gmail.com>
Date: Sat, 15 Aug 2026 17:41:10 +0200
Subject: [PATCH] feat: load non-critical styles when JS is disabled

---
 src/build/optimize.ts         |  1 -
 src/layouts/base.ts           | 13 +++++++++----
 src/static/assets/js/index.js |  6 ------
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/build/optimize.ts b/src/build/optimize.ts
index fd4439d..e5e9f9e 100644
--- a/src/build/optimize.ts
+++ b/src/build/optimize.ts
@@ -79,7 +79,6 @@ async function hashRelativeAssetUrlsInHtml(contents: string): Promise<string> {
     /(<img[\s\S]*?src=)([^\s>]+)([\s\S]*?>)/g,
     /(<script[\s\S]*?src=)([^\s>]+)([\s\S]*?>)/g,
     /(<source[\s\S]*?srcset=)([^\s>]+)([\s\S]*?>)/g,
-    /(window\._paths_\..*?=")([\s\S]*?)(")/g,
   ];
 
   let html = contents;
diff --git a/src/layouts/base.ts b/src/layouts/base.ts
index 7fceb8b..61d9d32 100644
--- a/src/layouts/base.ts
+++ b/src/layouts/base.ts
@@ -131,6 +131,12 @@ const layout: Layout = (data) => {
             type="font/woff2"
             crossorigin="anonymous"
           />
+          <link
+            rel="preload"
+            href="/assets/css/styles-lazy.css"
+            as="style"
+            onload="this.onload=null;this.rel='stylesheet'"
+          />
           <meta name="description" content="${metadata.description}" />
           <meta name="robots" content="index,follow" />
           <link rel="canonical" href="${metadata.url}" />
@@ -157,12 +163,11 @@ const layout: Layout = (data) => {
                 ? 'dark'
                 : 'light');
             document.documentElement.setAttribute('data-theme', theme);
-
-            window._paths_ = {};
-            /* Note: the build looks for "window._paths_.*" URLs to hash them. */
-            window._paths_.lazyCss = '/assets/css/styles-lazy.css';
           </script>
           <link rel="stylesheet" href="/assets/css/styles.css" />
+          <noscript>
+            <link rel="stylesheet" href="/assets/css/styles-lazy.css" />
+          </noscript>
           <link
             rel="alternate"
             type="application/atom+xml"
diff --git a/src/static/assets/js/index.js b/src/static/assets/js/index.js
index 0b48912..8a1fc7a 100644
--- a/src/static/assets/js/index.js
+++ b/src/static/assets/js/index.js
@@ -1,11 +1,5 @@
 'use strict';
 
-// Load the non-critical styles.
-const link = document.createElement('link');
-link.setAttribute('rel', 'stylesheet');
-link.setAttribute('href', window._paths_.lazyCss);
-document.head.append(link);
-
 const themeSwitch = document.getElementById('theme-switch');
 
 themeSwitch.addEventListener('click', () => toggleTheme());