search

natemoo-re / astro-icon

Inline and sprite-based SVGs in Astro made easy!
https://astroicon.dev
Other
995 stars 57 forks source link

From version 0.7.1 `<Sprite.Provider>` inject scripts and styles inside own place (astro build phase) #83

Closed le0pard closed 1 year ago

le0pard commented 1 year ago

Here example:

---
import './app.css'
---
<html>
  <head>
  </head>
  <body>
    <Sprite.Provider>
      <Sprite pack="mdi" name="close" />
    </Sprite.Provider>
  </body>
</html>

From version 0.7.0:

<html>
  <head>
    <link href="/_astro/style.0dedd145.css" rel="stylesheet">
  </head>
  <body>
    <svg aria-hidden="true" astro-icon-spritesheet="" style="position:absolute;width:0;height:0;overflow:hidden">...</svg>
  </body>
</html>

From version 0.7.1:

<html>
  <head>
  </head>
  <body>
    <link href="/_astro/style.0dedd145.css" rel="stylesheet">
    <svg aria-hidden="true" astro-icon-spritesheet="" style="position:absolute;width:0;height:0;overflow:hidden">...</svg>
  </body>
</html>

Styles and scripts always injected at <Sprite.Provider> place, which lead to broken https://hotwired.dev/ usage - on each page body contain same css and js files, which need to re-apply in browser again. Inject directly to <head> not allow syntax (this is invalid):

<html>
  <head>
    <Sprite.Provider>
  </head>
  <body>
      <Sprite pack="mdi" name="close" />
    </Sprite.Provider>
  </body>
</html>
le0pard commented 1 year ago

Here project which you can clone and reproduce this - https://github.com/rwpod/rwpod.github.io - just update astro-icon and rebuild it

artstorm commented 1 year ago

I've the same problem in my projects that uses Astro Icon v0.8.0. The sites were working fine until the release of Astro v2.0.7. That release had many changes related to prevent css injection in the body. It looks like those changes broke something with Astro Icon, as from Astro v2.0.7+, using Astro Icon under some circumstances, now causes the injection of CSS and JS in the body instead.

For now, I've frozen my projects at Astro v2.0.6, as that is the last version that works together with Astro Icon for my sites, as I haven't had time to investigate this deeper, more than that verifying that disabling Astro Icon, injects the CSS in the head section again. What I did observe is that the more nested slots together with Astro Icon v0.8.0 and Astro v2.0.7+, the more likely this seems to happen.

myakura commented 1 year ago

Hi. I got the same issue in my project with Astro v2.0.7+ and astro-icon. I made a few test cases and it appears if there's a component inside the <Sprite.Provider>, the link element is inserted right before the slotted elements.

https://myakura.github.io/test--astro-v2-0-7-and-astro-icon-issue/

le0pard commented 1 year ago

Looks like issue resolved if update astro to version 2.0.16

myakura commented 1 year ago

yeah. the issue in Astro https://github.com/withastro/astro/issues/6318 was fixed in https://github.com/withastro/astro/pull/6363