Partial uses collection, which include partials - js/css includes in nested partials aren't loading

[jasonday]

Operating system

Windows

Eleventy

3.0.0

Describe the bug

I have a page that uses a partial and this partial loops through a collection "docs".

{% set itemList = collections.docs %}
{% include 'partials/details.njk' %}

I also have a gallery partial, which takes frontmatter and builds a gallery:

gallery:
  - image: /assets/images/projects/FAR/FAR1-workbook.PNG
    alt: 'Fidelity Investments FAR workbook, 1st page'
    caption: 'Fidelity Accessibility Requirements scoring workbook'
  - image: /assets/images/projects/FAR/FAR1-scores-for-steps.PNG
    alt: 'Close-up of a delicate white flower with a yellow center, surrounded by green leaves'
    caption: 'Jasmine nightshades blooming in July'
  - image: /assets/images/projects/FAR/FAR1-worksheet.PNG
    alt: "A traditional Asturian village with it's raised granaries, surrounded by lush green hills and mountains"
    caption: 'Traditional houses in Santullano, Somiedo Natural Park, Asturias'
  - image: /assets/images/projects/FAR/FAR1-worksheet-filled.PNG
    alt: 'Close-up with unfocused background of a vibrant large blue butterfly gracefully perched on a delicate flower amidst lush green grass'
    caption: 'A large blue (Phengaris arion)'
---

and the include

{% include "partials/gallery.njk" %}

If I use the gallery include within a page in the docs collection, the gallery include's css/script includes are not loaded.

How do I ensure that nested nature of the partials/includes, works as expected?

Reproduction steps

Expected behavior

No response

Reproduction URL

No response

Screenshots

No response

[zachleat]

Can you provide more context on “css/script includes are not loaded”? What is this referring to?

[jasonday]

@zachleat - sure. I'll try to break it down a bit better (hopefully).

I have a gallery partial that takes frontmatter from the file it's included on, and builds a gallery.

<is-land on:idle>
  <div class="gallery | grid mt-l-xl" role="list">
    {%- for item in gallery -%}
      <dialog class="flow modal{{ loop.index }}">
        <button class="button" autofocus>{{ meta.dialog.close }}</button>
        {%- image item.image, item.alt, item.caption -%}
      </dialog>
      <button data-index="{{ loop.index }}">{%- image item.image, item.alt -%}</button>
    {%- endfor -%}
  </div>

  {% css "local" %}
    {% include "css/gallery.css" %}
  {% endcss %}

  {% js "defer" %}
    {% include "scripts/dialog.js" %}
  {% endjs %}
</is-land>

and has a straightforward include: {% include 'partials/gallery.njk' %}

I also have a details partial, that builds details/summary.

<div class="details flow">
  <div class="control | cluster" aria-label="{{ meta.details.aria }}">
    <button id="expandAll" aria-pressed="false" class="button" data-small-button>{{ meta.details.expand }}</button>
    <button id="collapseAll" aria-pressed="false" class="button" data-small-button>{{ meta.details.collapse }}</button>
  </div>
  {%- for item in itemList | alphabetic -%}
    <details id="{{ item.data.title | slugify }}">
      <summary>{{ item.data.title }}</summary>
      {{- item.templateContent | safe -}}
    </details>
  {%- endfor -%}
</div>

{% css "local" %}
  {% include "css/details.css" %}
{% endcss %}

{% js "defer" %}
  {% include "scripts/details.js" %}
{% endjs %}

And this works by setting a collection as the variable itemList:

{% set itemList = collections.docs %}
{% include 'partials/details.njk' %}

Both of these work independently, as expected.

The issue is when an item in my collections.docs has the gallery include (so item_1.md with the gallery partial include and corresponding gallery frontmatter), the css/js from partials/gallery.njk does not load. The partial works, as in the images are output to the DOM, but the CSS and JS are nonexistent, they aren't in the bundles resources, etc.

[zachleat]

If I understand the issue correctly based on the description, unfortunately I don’t think we can quite handle this transparently (currently). It’s a limitation of the current Collections API, which is a tradeoff we have made to make the API template syntax independent. I do have some ideas to improve this in a way that would solve this problem moving forward (but that doesn’t help you right now, unfortunately).

What needs to happen is that any use of content (aliased as templateContent above) in a collection item (https://www.11ty.dev/docs/collections/#collection-item-data-structure) should inform the dependency graph of the parent content template, which would have benefits for incremental builds and could (in this case) inform bundle plugin as well.

As a temporary workaround, you can call the css or js shortcode manually alongside any use of item.templateContent to help it along.

Filed https://github.com/11ty/eleventy-plugin-bundle/issues/33 related to this issue.