css.Build with resources.ExecuteAsTemplate

support
1

The new css.Build function is pretty handy in many respects, well done!
I am now wondering how to combine it with custom params using resources.ExecuteAsTemplate.

Given import.css:

@import './vars.css';
@import './content.css';
@import './media.css';

and vars.css:

:root {
  --accent: {{ site.Params.style.accent | default "red" }};
}

How does one combine both

{{ with resources.Get "css/vars.css" }}
  {{ with resources.ExecuteAsTemplate "css/vars.css" $ . }}
    <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{ end }}
{{ end }}

and

{{ with resources.Get "css/import.css" }}
  {{ $opts := dict
    "loaders" (dict ".png" "dataurl" ".svg" "dataurl")
    "minify" (cond hugo.IsDevelopment false true)
    "sourceMap" (cond hugo.IsDevelopment "linked" "none")
    "targetPath" "css/styles.css"
  }}
  {{ with . | css.Build $opts }}
    {{ if hugo.IsDevelopment }}
      <link rel="stylesheet" href="{{ .RelPermalink }}">
    {{ else }}
      {{ with . | fingerprint }}
        <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
      {{ end }}
    {{ end }}
  {{ end }}
{{ end }}

Each one separately works, but attempts to combine both do not :laughing:
Thank you!

2

if you can live with vars evaluated last, you could import.css

@import './content.css';
@import './media.css';
:root {
  --accent: {{ site.Params.style.accent | default "red" }};
}

and then:

{{- $opts := dict "target" $target "targetPath" "/css/main.css" }}

{{- with resources.Get "css/import.css" }}
  {{ with . | resources.ExecuteAsTemplate "/temp.css" $ }}
    {{ with . | css.Build $opts }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" />
    {{- end }}
  {{- end }}
{{- end }}
3

another option if you need it first could be import.css

@import './content.css';
@import './media.css';

and then:

{{ $vars := resources.Get "css/vars.css" | resources.ExecuteAsTemplate "/temp1.css" $ | css.Build }}

{{ $opts := dict "loaders" (dict ".png" "dataurl" ".svg" "dataurl") }}
{{ $import := resources.Get "css/import.css" | css.Build $opts }}

{{ with resources.Concat "css/temp2.css" (slice $vars $import) }}
  {{ $opts := dict
    "minify" true
    "sourceMap" (cond hugo.IsDevelopment "linked" "none")
    "targetPath" "css/styles.css"
  }}
  {{ with . | css.Build $opts }}
    <link rel="stylesheet" href="{{ .RelPermalink }}" />
  {{ end }}
{{ end }}

p.s. for me that did not work with loader “file” cause then the second run failed to resolve the image resources created in the first pass., “dataurl” seems to work, the second pass just keeps the value.

4

Food for thought…

With the css.Sass function you can inject key/value pairs via its vars option.

With the js.Build function you can inject key/value pairs via its params option.

Maybe there’s a way to implement something similar for the css.Build function.

1 Like
5

You may want to watch this issue: Support @import "hugo:vars" in css.Build · Issue #14699 · gohugoio/hugo · GitHub

1 Like
6

@jmooring see my llink above; as to vars vs params:

  1. I think it makes sense to use the same syntax as in css.Sass
  2. For js.Build it would make sense/be possible to have both params (for JS) and vars (for CSS), so wee want to have both.
7

OK, testing the above, it works really well; I will get it ready for a release in a few days. css.Build + CSS vars in site params would be a great way to create themes.

3 Likes
8

Wow, thank you all for the replies!
Did not expect to trigger such discussion and implementation :grin:
Happy to report back when it is out.
Have a good one!

9

great pace here, love it

:wink: you killed my workaround in 1h and anounced the funeral in another 3h. lets get it buried.

R.I.P

1 Like
10

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.

11
1 Like
12

I just ported a Sass theme to build.CSS with the help from Claude Code: Replace Sass with plain CSS using css.Build · bep/galleriesdeluxe@90ee04e · GitHub

Bonus: Now builds twice as fast (100ms > 50ms, I’m guessing the diff is the Dart Sass startup time).