CSS and JS files are not added to Expressive Code blocks

[François Violette]

Hello,

I build Astro in SSG with 4.2.3 and Expressive Code 0.32.1.
I was testing the <Code/> component again as it brings variable support within code samples.

This works well except in some occurrences when there are multiple code components.
In this case, the CSS and JS files are not added to any code block.

Consider this:

OK

<Code lang="groovy" code={`
implementation ("com.contentsquare.android:library:${frontmatter.version}") {
    exclude group: "org.jetbrains.kotlin", module: "kotlin-stdlib-jdk8"
}
`} />

Generated HTML for the code block:

<div class="expressive-code">
  <link rel="stylesheet" href="/_astro/ec.ksehj.css" />
  <script type="module" src="/_astro/ec.sgewm.js"></script>
  <figure class="frame">
    <figcaption class="header"></figcaption>
    <pre
      tabindex="0"
    ><code><div class="ec-line"><span style="--0:#D8DEE9">implementation (</span><span style="--0:#16C082">"com.contentsquare.android:library:4.24.1"</span><span style="--0:#D8DEE9">) {</span></div><div class="ec-line"><span style="--0:#D8DEE9">    exclude group</span><span style="--0:#C7C5D3">:</span><span style="--0:#D8DEE9"> </span><span style="--0:#16C082">"org.jetbrains.kotlin"</span><span style="--0:#D8DEE9">, module</span><span style="--0:#C7C5D3">:</span><span style="--0:#D8DEE9"> </span><span style="--0:#16C082">"kotlin-stdlib-jdk8"</span></div><div class="ec-line"><span style="--0:#D8DEE9">}</span></div></code></pre>
    <div class="copy">
      <button
        title="Copy to clipboard"
        data-copied="Copied!"
        data-code='implementation ("com.contentsquare.android:library:4.24.1") {�    exclude group: "org.jetbrains.kotlin", module: "kotlin-stdlib-jdk8"�}'
      >
        <div></div>
      </button>
    </div>
  </figure>
</div>

NOT OK

<Code lang="groovy" code={`
implementation ("com.contentsquare.android:library:${frontmatter.version}") {
    exclude group: "org.jetbrains.kotlin", module: "kotlin-stdlib-jdk8"
}
`} />

<Code lang="groovy" code={`
implementation ("com.contentsquare.android:library:${frontmatter.version}") {
  exclude group: "androidx.recyclerview", module: "recyclerview"
  exclude group: "androidx.swiperefreshlayout", module: "swiperefreshlayout"
}
`} />

Generated HTML for the code block:

<div class="expressive-code">
  <figure class="frame">
    <figcaption class="header"></figcaption>
    <pre
      tabindex="0"
    ><code><div class="ec-line"><span style="--0:#D8DEE9">implementation (</span><span style="--0:#16C082">"com.contentsquare.android:library:4.24.1"</span><span style="--0:#D8DEE9">) {</span></div><div class="ec-line"><span style="--0:#D8DEE9">    exclude group</span><span style="--0:#C7C5D3">:</span><span style="--0:#D8DEE9"> </span><span style="--0:#16C082">"org.jetbrains.kotlin"</span><span style="--0:#D8DEE9">, module</span><span style="--0:#C7C5D3">:</span><span style="--0:#D8DEE9"> </span><span style="--0:#16C082">"kotlin-stdlib-jdk8"</span></div><div class="ec-line"><span style="--0:#D8DEE9">}</span></div></code></pre>
    <div class="copy">
      <button
        title="Copy to clipboard"
        data-copied="Copied!"
        data-code='implementation ("com.contentsquare.android:library:4.24.1") {�    exclude group: "org.jetbrains.kotlin", module: "kotlin-stdlib-jdk8"�}'
      >
        <div></div>
      </button>
    </div>
  </figure>
</div>

The link and script are missing.
I've tried multiple scenarios and it's hard to pinpoint what's the cause.
It seems unrelated to the complexity of the code samples (same with console.log("ok")) or the theme/ec config.

[Hippo]

Thank you for reporting this!

In my code, I'm counting the code blocks I have rendered per Astro.request object, and it's supposed to only output the link to the styles and scripts for the first code block of each request.

Apparently, this logic doesn't work properly yet. I'll need to investigate!

Is your site repo public so I could just clone it and have a look at the issue locally somehow?

[François Violette]

It's not but I will create a StackBlitz or equivalent later today 👍

[François Violette]

Think that's enough to attest of the issue at hand: https://stackblitz.com/edit/github-tebgdw?file=src%2Fpages%2Findex.astro

Let me know if not!

[Hippo]

Ahh. Sorry, I confused SSG with SSR when reading your issue. 🙈

I can also reproduce it locally with your code and will fix and release a patch. Thank you!

[François Violette]

Great news! This is more than a quality of life improvement for us 👍

[Hippo]

Should be fixed in version 0.32.2 that I just released. :) Please let me know if it works for you after updating!

[François Violette]

It does work, beautiful.
Makes my day, thank you :-)

[Hippo]

Glad to hear that! :) Closing this issue now.