Add Resource.Resources (and CSS output in js.Build)

[bep]

While working on #12641 I'm creating a test/demo site "showcasing" all (or most) of the react-aria components. The "Vanilla CSS" starter pack imports CSS into the JS files. Hugo doesn't currently support that, but I know people have aske about it, so we might as well tackle it sooner rather than later.

ESBuild, the library we use for this, builds the CSS and returns them in the outputs slice (where the first item is the entry point JS). But it's up to the user to link it into the HTML.

What I suggest is something ala:

{{ $js := resources.Get "js/main.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}
{{ range $js.Resources.ByType "css" }}
<link href="{{ .RelPermalink }}" rel="stylesheet">
{{ end }}
<script src="{{ $js.RelPermalink }}"></script>

In the above, ESBuild does not need to know the URL to the CSS, a good thing, since we then are free to do fingerprinting etc. as we please.

Note to self that this may be a good time to clean up the rather ugly way we handle source maps, which is also in the outputs slice from ESBuild. One could imagine we would do:

{{ if hugo.IsDevelopment }}
  {{ range $js.Resources.ByType "map" }}
     {{ .Publish }}
  {{ end }}
{{ end }}

@cmahnke @jmooring does the above make sense?

[jmooring]

First, page resources with extension css or js currently have a ResourceType of text. From the above, it looks like the ResourceType will be explicitly set to css. So there's some room for confusion here, i.e., "Why doesn't this work?"

content/
└── posts/
    └── post-1/
        ├── a.css
        ├── b.css
        └── index.md

{{ range .Resources.ByType "css" }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

Do we need ByMediaType.Type, ByMediaType.MainType, and ByMediaType.SubType?

Second, it's unclear to me if the slice of returned resources in your example includes the JS. In other words, are these equivalent?

{{ range $js.Resources.ByType "javascript" }}
  <script src="{{ .RelPermalink }}"></script>
{{ end }}

<script src="{{ $js.RelPermalink }}"></script>

[bep]

First, page resources with extension css or js currently have a ResourceType of text

Yea, right. We need to think about adding some more ways to filter these (I guess you could also use where), but I don't think that's the most important part of this.

{{ range $js.Resources.ByType "javascript" }}
  <script src="{{ .RelPermalink }}"></script>
{{ end }}

<script src="{{ $js.RelPermalink }}"></script>

That is a good question, and I thought about this. The output from ESBuild is a slice, but there's a implicit parent child relationship there that needs to be understood/handled, so I think that it makes sense to say that in:

{{ $js := resources.Get "js/main.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}

• The $js Resource represents the js/main.js script, which may bundle other modules (either inline or via EMAScript imports (EMAScript imports does not support SRI by design, so we do not have to worry about that).
• The Resources built that's not included/bundled in $js can be accessed in $js.Resources. This will be CSS, source maps etc.

So, I'm leaning against saying that a Resource may have a list of sub resources (not including itself), but I'm open to arguments against it ...

The alternate take, which would require us to create another func, is to return a Resources slice from js.Build2, but I'm not sure that would make things more clear ... Not sure.