Get a list of assets processed in SCSS file so they can be preloaded

[Nowaker]

{% asset application.scss %} will generate application-123hash321.css. It will process any asset_path inside the SCSS and generate the corresponding files, e.g. /assets/somefont-321hash123.woff2. We'd like to preload all assets referenced inside the CSS by exposing them in the HTML file as <link rel="preload">. For example, we'd have <link rel="preload" href="/assets/somefont-321hash123.woff2" as="font" type="font/woff2"> for font files, while other resources would have their respective as and type.

I can see a couple options of how this could be implemented:

Option 1: The more flexible one: expose a list of assets processed in SCSS file, then iterate over it "manually" in HTML/Liquid.

{% asset application.scss %}
{{ for dep in site.asset_dependencies['application.scss'] }}
  <link rel="preload" href="{{ dep.href }}" as="{{ dep.as }}" type="{{ dep.type }}">
{{ }}

Option 2: The simpler one: just render the preloads after the definition of the SCSS.

Source: {% asset application.scss @with_preloads %}

Result:

<link rel="stylesheet" href="/assets/application-123hash321.css">
<link rel="preload" href="/assets/somefont-321hash123.woff2" as="font" type="font/woff2"> <!-- defined somewhere in application.scss -->

Option 3: Option 1 + Option 2. 😄

I'm not sure if/how Sprockets exposes any data needed for making things like this happen.