CSS Plugins not working when params.plugins.css only source is external link

support
1

I try to create a Hugo Theme and need help with the Bundeling of CSS Plugins.

When the params are not commented out and have valid links everything works fine.
The assets are getting bundeld and the external link geting loaded.
The Problem is when only an external link is loaded and no assets the whole logic isn`t working anymore.
Can someone help me with this?
The expected behaviour should be that when no params are defind nothing should happen, when only assets are defind those should get bundeld, and when only an external file is defind this file should get loaded directly.

[[params.plugins.css]]
link = "plugins/css/style.css"
[[params.plugins.css]]
link = "plugins/css/style2.css"
[[params.plugins.css]]
link ="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.8.9/dist/cookieconsent.css"


 {{ "<!-- CSS Plugins Bundeling loaded from assets -->" | safeHTML }}
  {{ if .Site.Params.plugins.css }}
  {{ $cssBundle := slice }}
  {{ range .Site.Params.plugins.css }}
  {{ if findRE "^http" .link }}
  <link rel="stylesheet" href="{{ .link | absURL }}">
  {{ else }}
  {{ $cssFile := resources.Get .link | minify }}
  {{ $cssBundle = $cssBundle | append $cssFile }}
  {{ end }}
  {{ end }}
  {{ $cssBundle := $cssBundle | resources.Concat "css/bundle.css" | fingerprint }}
  <link rel="stylesheet" href="{{ $cssBundle.Permalink | absURL }}">
  {{ end }}
2

Problem solved

This problem occurred because the resources.Concat function was being passed an empty slice ([]interface {}) instead of a slice of resources. The issue was caused by the findRE "^http" .link conditional check in the range .Site.Params.plugins.css loop. When the link starts with “http”, the resources were not being added to the $cssBundle slice, causing it to be empty when passed to resources.Concat.

To fix this, I suggested adding a check before the resources.Concat call to ensure that the $cssBundle slice is not empty, and only include the link to the external resource in the HTML.

This way, it will check whether the $cssBundle slice is empty or not, if it’s not empty then it will concatenate the resources and add it to the HTML. If it’s empty then it will not include the bundle in the HTML, avoiding the error.

The key here was to check whether the $cssBundle slice is empty or not before passing it to resources.Concat function. It will prevent the error from occurring and the external resource will be added to the HTML directly.

{{ "<!-- CSS Plugins Bundeling loaded from assets -->" | safeHTML }}
{{ $cssBundle := slice }}
{{ range .Site.Params.plugins.css }}
{{ if findRE "^http" .link }}
<link rel="stylesheet" href="{{ .link | absURL }}">
{{ else }}
{{ $cssFile := resources.Get .link | minify }}
{{ $cssBundle = $cssBundle | append $cssFile }}
{{ end }}
{{ end }}
{{ if ne (len $cssBundle) 0 }}
{{ $cssBundle := $cssBundle | resources.Concat "css/bundle.css" | fingerprint }}
<link rel="stylesheet" href="{{ $cssBundle.Permalink | absURL }}">
{{ end }}
3

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