Use defer to load styles

A new feature coming in next Hugo. See gohugoio/hugo#12587
bep · Jun 21, 2024 · 0261138 · 0261138
1 parent 4ce5197
commit 0261138
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 19 deletions.
diff --git a/.hugo_build.lock b/.hugo_build.lock
diff --git a/hugo.toml b/hugo.toml
@@ -10,20 +10,19 @@ disableKinds = ["page", "section", "taxonomy", "term"]
     source = "assets"
     target = "assets"
   [[module.mounts]]
-    source = "hugo_stats.json"
-    target = "assets/watching/hugo_stats.json"
+    source       = "hugo_stats.json"
+    target       = "assets/notwatching/hugo_stats.json"
+    disableWatch = true
 
 [build]
-  writeStats = true
+  writeStats           = true
+  useResourceCacheWhen = 'never'
   [[build.cachebusters]]
-    source = "assets/watching/hugo_stats\\.json"
+    source = "assets/notwatching/hugo_stats\\.json"
     target = "styles\\.css"
   [[build.cachebusters]]
     source = "(postcss|tailwind)\\.config\\.js"
     target = "css"
   [[build.cachebusters]]
     source = "assets/.*\\.(js|ts|jsx|tsx)"
     target = "js"
-  [[build.cachebusters]]
-    source = "assets/.*\\.(.*)$"
-    target = "$1"
diff --git a/hugo_stats.json b/hugo_stats.json
@@ -15,7 +15,6 @@
       "head",
       "html",
       "li",
-      "link",
       "meta",
       "ol",
       "p",
@@ -26,7 +25,7 @@
       "ul"
     ],
     "classes": [
-      "bg-[green]",
+      "bg-[orange]",
       "container",
       "highlight",
       "lg:mx-auto",
@@ -53,4 +52,4 @@
       "this-is-a-header"
     ]
   }
-}
+}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -1,19 +1,22 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>
       {{ .Title }}
     </title>
     <meta name="description" content="{{ .Description }}" />
-    {{/* styles */}}
-    {{ $options := dict "inlineImports" true }}
-    {{ $styles := resources.Get "css/styles.css" }}
-    {{ $styles = $styles | resources.PostCSS $options }}
-    {{ if hugo.IsProduction }}
-      {{ $styles = $styles | minify | fingerprint | resources.PostProcess }}
+    {{ with (defer (dict "key" "styles" "data" "foo")) }}
+      {{ warnf "deferred: %s" . }}
+      {{ $options := dict "inlineImports" true }}
+      {{ $styles := resources.Get "css/styles.css" }}
+      {{ $styles = $styles | resources.PostCSS $options }}
+      {{ if hugo.IsProduction }}
+        {{ $styles = $styles | minify | fingerprint }}
+      {{ end }}
+      <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
     {{ end }}
-    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
+
   </head>
   <body class="my-10">
     <div class="container px-4 lg:mx-auto">

diff --git a/layouts/index.html b/layouts/index.html
@@ -4,7 +4,7 @@ <h1>Tailwind 3 Hugo Starter</h1>
 
     <h2 class="text-4xl">Testing Tailwind 3 Features</h2>
     <div>
-      <button class="bg-[green] p-4">Share on Twitter</button>
+      <button class="bg-[orange] p-4">Share on Twitter</button>
     </div>
 
     <h2 class="text-4xl">Markdowns: {{ .Title }}</h2>