From 41140af6fab51e4630db11a3ce15b2dfe670e60e Mon Sep 17 00:00:00 2001
From: Xin <5097752+imfing@users.noreply.github.com>
Date: Sat, 31 May 2025 00:56:32 +0100
Subject: [PATCH] fix: CSS loading logic for production and theme dev
 environments (#691)

* fix: CSS loading logic for production and theme dev environments

- Updated the CSS loading logic to differentiate between production and theme environments.

* fix: streamline CSS loading logic for production and development environments

- Refactored the CSS loading logic to ensure proper handling of stylesheets in both production and development modes.
- Consolidated the CSS concatenation and minification process for production, while simplifying the development loading process.

* fix: simplify development CSS loading in head partial

- Updated the CSS loading logic in head.html to streamline the process for development environments by renaming the variable for clarity and ensuring proper handling of stylesheets.
---
 layouts/partials/head.html | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 8766abc..829e96b 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -32,15 +32,20 @@
   {{- $customCss := resources.Get "css/custom.css" -}}
   {{- $variablesCss := resources.Get "css/variables.css" | resources.ExecuteAsTemplate "css/variables.css" . -}}
 
-  {{- if hugo.IsProduction }}
-    {{- $styles := slice $variablesCss $mainCss $customCss | resources.Concat "css/compiled/main.css" | minify | fingerprint }}
-    <link rel="preload" href="{{ $styles.RelPermalink }}" as="style" integrity="{{ $styles.Data.Integrity }}" />
-    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" integrity="{{ $styles.Data.Integrity }}" />
+  {{- if and (not hugo.IsProduction) (eq hugo.Environment "theme") }}
+    {{- $devStyles := resources.Get "css/styles.css" | postCSS (dict "inlineImports" true) }}
+    <link href="{{ $devStyles.RelPermalink }}" rel="stylesheet" />
   {{- else }}
-    {{- $styles := resources.Get "css/styles.css" | postCSS (dict "inlineImports" true) }}
-    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
-    <link href="{{ $variablesCss.RelPermalink }}" rel="stylesheet" />
-    <link href="{{ $customCss.RelPermalink }}" rel="stylesheet" />
+    {{- if hugo.IsProduction }}
+      {{- $styles := slice $variablesCss $mainCss $customCss | resources.Concat "css/compiled/main.css" | minify | fingerprint }}
+      <link rel="preload" href="{{ $styles.RelPermalink }}" as="style" integrity="{{ $styles.Data.Integrity }}" />
+      <link href="{{ $styles.RelPermalink }}" rel="stylesheet" integrity="{{ $styles.Data.Integrity }}" />
+    {{- else }}
+      {{- $styles := resources.Get "css/compiled/main.css" -}}
+      <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
+      <link href="{{ $variablesCss.RelPermalink }}" rel="stylesheet" />
+      <link href="{{ $customCss.RelPermalink }}" rel="stylesheet" />
+    {{- end }}
   {{- end }}
 
 
@@ -77,11 +82,11 @@
   {{ $noop := .WordCount -}}
   {{ if .Page.Store.Get "hasMath" -}}
     <!-- TODO: make url configurable -->
-    {{ $katexBaseUrl := "https://cdn.jsdelivr.net/npm/katex@latest/dist" }} 
+    {{ $katexBaseUrl := "https://cdn.jsdelivr.net/npm/katex@latest/dist" }}
     {{ $katexCssUrl := printf "%s/katex%s.css" $katexBaseUrl (cond hugo.IsProduction ".min" "") -}}
     {{ $katexFontPattern := "url(fonts/" }}
     {{ $katexFontSubstituted := printf "url(%s/fonts/" $katexBaseUrl }}
-  
+
     {{ with try (resources.GetRemote $katexCssUrl) -}}
       {{ with .Err -}}
         {{ errorf "Could not retrieve KaTeX css file from %s. Reason: %s." $katexCssUrl . -}}