Combine SASS/SCSS and CSS in a bundle

support
,
21

resources.Match "css/**.css"should find all css files in /assets/css incl. it’s subdirs

1 Like
22

@jmooring
A follow-up question:
It appears that the concat orders personal overrides before the theme’s CSS files.
The theme contains an empty 99_custom.css, which I override in my own Hugo setup.

/css/bundle.css starts with the SCSS>CSS content, followed by the contents of my own 99_custom.css override, then followed by the theme’s 01_poole.css, etc.

Any way I can push my custom overrides to be last?
Using !important on each override is too dirty to my liking.

23

I rather think the concat processes in the order returned by ressources.Match. This depends on the implementation of match.

This also think this is defined by the underlying Go library and may be not deterministic.

to force some order you might have to use more than one call to resources.Match or a custom sort maybe by basename.

24

I renamed the css files to have a 00_ prefix in hopes of ordering the files.
The theme has 7 CSS files, which I number 01_xxx-06_xxx and 10_xxx, plus a placeholder for custom CSS in 99_custom.css.

These are concatted behind the transformed SCSS.

Somehow the 99_ seems to jump the line?

A workaround I can think of, although I’m not entirely sure how to implement it, would be to do a first (inverse) Match on all (css) files excluding 99_custom.css, then concatting that file to the end.

Something like this?
This one does not function yet, it just adds [/scss/main.scss /css/99_custom.css /css/01_poole.css /css/02_hyde.css /css/03_poison.css /css/04_codeblock.css /css/05_tabs.css /css/06_katex.css /css/10_fonts.css] [/scss/main.scss /css/99_custom.css] to the top of the <body>.

{{ $opts := dict
  "targetPath" "css/style.css"
  "transpiler" "dartsass"
  "vars" (partialCached "head/get-scss-vars.html" .)
}}

{{ with resources.Get "scss/main.scss" }}
  {{ with . | toCSS $opts }}
  {{ $bundle := . }}
    {{ with resources.Match "css/**"}}
      {{ if not (eq (path.BaseName "{{ .RelPermalink }}") "99_custom.css") }}
        {{ slice $bundle | append . }}
      {{ end }}
    {{ end }}
    {{ with resources.Get "css/99_custom.css" }}
      {{ slice $bundle | append . }}
    {{ end }}
    {{ with slice $bundle | resources.Concat "css/bundle.css" }}
      {{ if hugo.IsProduction }}
        {{ with . | minify | fingerprint }}
          <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
        {{ end }}
      {{ else }}
        <link rel="stylesheet" href="{{ .RelPermalink }}">
      {{ end }}
    {{ end }}
  {{ end }}
{{ end }}
25

I took exactly your code and (nearly) the same layout.and could not reproduce your problem with having all files in one folder (Windows 11, Hugo 140.1) - they where perfectly added in index order.

I played around a little and now I think your 99_custom is not in the same folder as the others. Right?

If not , mmh maybe OS, maybe some invisible char in the name , …

I suppose all are in themes/assets/css and 99_custom is in your sites /assets/css

with this layout I can reproduce your problem

C:\_REPOS\GITHUB\CLONE\TOPIC-52834
├───assets
│   └───css
│       └───99_custom.css
└───themes
    └───cssbundle
        └───assets
            └───css
                ├───01_x.css
                ├───02_h.css
                ├───03_a.css
                ├───04_z.css
                └───05_q.css

educated guess: we have a virtual filesystem and the internal sort is per “real” folder, maybe in combination with subfolders and the virtual mapping…

If there’s NO guaranteed order (by specification) Murphy might hit you sooner or later :wink:

that said:

  • if you don’t care about the order of the others, you could just reverse the resources:
    {{ with slice . | append (resources.Match "css/*") | collections.Reverse | resources.Concat "css/bundle.css" }}
  • seems moving the ones in the theme in a subfolder 00
    /css/00/01_x.css       <- theme
/css/00/02_h.css
/css/00/03_a.css
/css/00/04_z.css
/css/00/05_q.css
/css/99_custom.css     <- site
  • maybe some other variants with files and folders work, too

or a real custom sort

@jmooring maybe a split to a new topic would be a god idea “order problem with resources.Match”… (first new one would be #22)

26

If you’re going to pull in resources from multiple mounts, sort by name.

Change this:

{{ with slice . | append (resources.Match "css/*") | resources.Concat "css/bundle.css" }}

To this:

{{ with slice . | append (sort (resources.Match "css/*") "Name") | resources.Concat "css/styles.css" }}
2 Likes
27

Hah, so simple yet so effective! Works like a charm
Thanks again!

(and HB :birthday:)

28

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