SCSS template rendered only once, even for different parameters

[will]

I have /assets/_paige/bootstrap/custom.scss:

$color-mode-type: media-query;
$primary: {{ .Param "paige.color" | default "#0d6efd" }};

@import "bootstrap";

I load it with resources.Get, execute it with resources.ExecuteAsTemplate, transpile it with toCSS, minimize it, fingerprint it, and refer to it in a <link> href attribute.

This all works fine in basic cases. If I don’t set paige.color in the site or page parameters, the color is the default #0d6efd. If I set it in the site parameters, the color is changed as you’d expect. However, if I set it in a page, it doesn’t work; it still uses the default color.

I’m guessing what’s happening is the template is rendering only once, for some reason, but I don’t understand why.

Here’s the code “stack” involved:

links.html:

{{ partial "paige/link.html" (dict "href" "_paige/bootstrap/paige.scss" "page" $page "sass" true) }}

link.html:

...
{{ with partial "paige/resource.html" (dict "page" $page "url" $href) }}
    {{ $resource := resources.ExecuteAsTemplate $href (or $page dict) . }}

    {{ if $sass }}
        {{ $resource = $resource | toCSS (dict "enableSourceMap" $enablesourcemap "includePaths" $includepaths "outputStyle" $outputstyle "transpiler" "dartsass") }}
    {{ end }}

    {{ $resource = $resource | minify | fingerprint }}
    {{ $href = $resource.RelPermalink }}
...

<link href="{{ $href | safeURL }}" ...>

resource.html:

{{ $params := . }}

...
{{ $url := $params.url }}

{{ $result := "" }}

...
        {{ with resources.Get $url }}
            {{ $result = . }}
        {{ end }}
...

{{ return $result }}

Has anyone attempted something like this?

Hugo:

❯ hugo env
hugo v0.111.3+extended darwin/amd64 BuildDate=unknown
GOOS="darwin"
GOARCH="amd64"
GOVERSION="go1.20.2"
github.com/sass/libsass="3.6.5"
github.com/webmproject/libwebp="v1.2.4"
github.com/sass/dart-sass-embedded/protocol="1.2.0"
github.com/sass/dart-sass-embedded/compiler="1.59.3"
github.com/sass/dart-sass-embedded/implementation="1.59.3"

[pamubay]

resources.ExecuteAsTemplate output will be cached after its first execution, the TARGET_PATH is the cache key. You need to create unique target path for each resources.ExecuteAsTemplate.

---

/layouts/partials/paige/links.html:

...
{{ with partial "paige/resource.html" (dict "page" $page "url" $href) }}
++ {{ $s := path.Split $href }}
++ {{ $unique_target := path.Join $s.Dir (print now.UnixMicro "-" $s.File) }}
++ {{ $resource := resources.ExecuteAsTemplate $unique_target  (or $page dict) . }}

    {{ if $sass }}
        {{ $resource = $resource | toCSS (dict "enableSourceMap" $enablesourcemap "includePaths" $includepaths "outputStyle" $outputstyle "transpiler" "dartsass") }}
    {{ end }}

    {{ $resource = $resource | minify | fingerprint }}
    {{ $href = $resource.RelPermalink }}
...

<link href="{{ $href | safeURL }}" ...>

[will]

@pamubay Thanks for the tip. However, it doesn’t seem to have made a difference. I made these changes:

diff --git a/exampleSite/content/content/_index.md b/exampleSite/content/content/_index.md
index f291556..bb21671 100644
--- a/exampleSite/content/content/_index.md
+++ b/exampleSite/content/content/_index.md
@@ -1,4 +1,6 @@
 ---
 description: "Demonstrations of Paige content."
 title: "Content"
+paige:
+  color: "#00ff00"
 ---
diff --git a/exampleSite/content/content/markdown-syntax.md b/exampleSite/content/content/markdown-syntax.md
index bad8b4f..f6de377 100644
--- a/exampleSite/content/content/markdown-syntax.md
+++ b/exampleSite/content/content/markdown-syntax.md
@@ -5,6 +5,8 @@ description: "Sample article showcasing basic Markdown syntax and formatting for
 tags: ["markdown", "css", "html"]
 title: "Markdown Syntax Guide"
 weight: 10
+paige:
+  color: "#ff0000"
 ---
 
 <!--
diff --git a/layouts/partials/paige/link.html b/layouts/partials/paige/link.html
index 8a2cd55..6e7eb09 100644
--- a/layouts/partials/paige/link.html
+++ b/layouts/partials/paige/link.html
@@ -7,6 +7,7 @@
 {{ $page := $params.page }}
 {{ $referrerpolicy := $params.referrerpolicy | default "no-referrer" }}
 {{ $sass := $params.sass }}
+{{ $template := $params.template }}
 
 {{ $enablesourcemap := not hugo.IsProduction }}
 {{ $outputstyle := cond hugo.IsProduction "compressed" "" }}
@@ -16,7 +17,13 @@
 {{ end }}
 
 {{ with partial "paige/resource.html" (dict "page" $page "url" $href) }}
-    {{ $resource := resources.ExecuteAsTemplate $href (or $page dict) . }}
+    {{ $resource := . }}
+
+    {{ if $template }}
+        {{ $split := path.Split $href }}
+        {{ $join := path.Join $split.Dir (print (sha1 $page) "-" $split.File) }}
+        {{ $resource = resources.ExecuteAsTemplate $join (or $page dict) . }}
+    {{ end }}
 
     {{ if $sass }}
         {{ $resource = $resource | toCSS (dict "enableSourceMap" $enablesourcemap "includePaths" $includepaths "outputStyle" $outputstyle "transpiler" "dartsass") }}
diff --git a/layouts/partials/paige/links.html b/layouts/partials/paige/links.html
index 75a3f12..615a11b 100644
--- a/layouts/partials/paige/links.html
+++ b/layouts/partials/paige/links.html
@@ -32,7 +32,7 @@
     <link href="{{ (resources.Get `site.webmanifest` | resources.ExecuteAsTemplate `site.webmanifest` .).RelPermalink | safeURL }}" rel="manifest">
 {{ end }}
 
-{{ partial "paige/link.html" (dict "href" "_paige/bootstrap/paige.scss" "page" $page "sass" true) }}
+{{ partial "paige/link.html" (dict "href" "_paige/bootstrap/paige.scss" "page" $page "sass" true "template" true) }}
 {{ partial "paige/link.html" (dict "href" "_paige/bootstrap-icons/bootstrap-icons.css") }}
 
 {{ if $page.Param "paige.math" }}

In exampleSite/content/content/markdown-syntax.md, I get:

<link
crossorigin="anonymous"
href="/_paige/bootstrap/2960a7c403435ce12f3a980862c09d6dd481b2b3-paige.min.025067d2368225afecc4fb06b3f3c65d008049e909a7e7043a0f1d526107cb44.css"
integrity="sha256-AlBn0jaCJa/sxPsGs/PGXQCASekJp+cEOg8dUmEHy0Q="
referrerpolicy="no-referrer"
rel="stylesheet">

In exampleSite/content/content/_index.md, I get:

<link
crossorigin="anonymous"
href="/_paige/bootstrap/06970610a97aaf425e5b11f2b963427a01cf047c-paige.min.025067d2368225afecc4fb06b3f3c65d008049e909a7e7043a0f1d526107cb44.css"
integrity="sha256-AlBn0jaCJa/sxPsGs/PGXQCASekJp+cEOg8dUmEHy0Q="
referrerpolicy="no-referrer"
rel="stylesheet">

The sha1 prefixes are different (2960a7c… vs. 069706…), which is expected, since the colors are different; but the fingerprints are the same (025067…), so the Bootstrap colors are still the same, and so are the contents.

[pamubay]

Does the @import "bootstrap" really works/resolved/imported here? because the $primary var only used in Sass/dartsass runtime and Hugo create fingerprint based on the compiled css.

$color-mode-type: media-query;
$primary: {{ .Param "paige.color" | default "#0d6efd" }};

@import "bootstrap";

[will]

@pamubay I’m not sure what you’re asking. The sha1 hash is of the $.page value, so it should be different for each unique color value, which is in $.page.Params.paige.color. There’s another hash—a SHA-256 hash—that appears near the end of the file names, which is the result of the fingerprint function, which hashes the contents of the file after the SCSS transpilation…

The CSS, SCSS, and JS files in the Bootstrap NPM package are mounted to /assets/paige/bootstrap, so when dartsass runs, @import "bootstrap" imports bootstrap.scss from the bootstrap package.

[will]

Good news! That patch does indeed work. There must have been a build cache bug. I had to restart my computer, which killed hugo server. Restarting hugo server must have fixed it. @pamubay Thanks for your help!