🐛 BUG: Build/bundle assets not working

[schlichtanders]

What version of astro are you using?

0.22.17

What package manager are you using?

npm

What operating system are you using?

Linux

Describe the Bug

While this merged pullrequest #1786 created some internal logic which copies assets, it unfortunately doesn't work.

The reason is mere file naming.

• Within the css files, url(some/relative/path/to/myfile) get translated to hashed url(__VITE_ASSET_12314).
• The file on the other side, despite being copied to the correct location under dist/, is not renamed to __VITE_ASSET_12314 but gets a combination of original name and hash, something like myfile_XH14K.

This makes it currently impossible to work with npm assets. It is as severe, that astro's internal logic will interfere (concretely overwrite it) other manual approaches like using postcss-url to accomplish the job of copying npm assets. That was quite surprising behaviour, seeing postcss-url copying files, which then get deleted again and renamed wrongly by some black astro magic.

TODO:

• to the best of my understanding, it is just the filenames of the copied assets which needs to be in sync with the pathname used in the transformed css. Everything else seems to be correctly in place.

---

The MRE shows the use of fontsource. While npm run dev will show it correctly, running npm run build && npm run preview cannot find the font file as supposed to.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-gw1vrc-uazpyq?file=src/pages/index.astro

[nicobytes]

@schlichtanders I had the same problem and I didn't find the solution, finally I use astro-icon lib, but I have doubt what is the way for including CSS libraries in astro project?

[schlichtanders]

@nicobytes thank you for mentioning astro-icon. Even for icons astro-icon is not suitable for my requirements. But anyway, this ticket Minimal Working Example is not about icons but about fonts (google fonts). Hence astro-icon cannot help at all.

To the best of my understanding, this is just a normal bug and needs fixing.
I've tried to spot the right code-location, but so far was unable to understand it enough.

@matthewp can you take a look?

[jonathantneal]

Verified with npm run build. The files are copied, but the CSS file lists __VITE_ASSET__b3fb1405__. I’ve also run into this issue. Thank you for the clear reproduction, @schlichtanders!

[matthewp]

I'm going to take a quick look and see what's going on.

[denik1981]

This works well without the extension (fontsource falls back to the standard weight - 400).
Seems to be a problem related to the css plugin.

[matthewp]

I looked into this one and this is what's going on:

1. Astro has its own CSS plugin for bundling and doesn't use the builtin Vite one. This is because the builtin Vite one has private state that is needed for adding the correct tags back into the rendered HTML.
2. Vite's HTML plugin has access to the private state, but this plugin is for SPA pattern with a single index.html, so we can't use it.
3. Vite also has an asset plugin which we do use and that's the thing that marks up the __VITE_ASSET__ in CSS.
4. This plugin also has private state that we would need that's shared with its own CSS plugin.

I was able to patch some changes locally to get the example app working. However it takes a change to Vite's API in order to expose the internal private state of the asset plugin. I'll reach out to the Vite team about exposing this so that we can use it. After that it will be a fairly simple fix.

[matthewp]

This is the upstream issue which enable us fixing this: vitejs/vite#6625

[tony-sull]

Thanks for filing this issue, and the investigation above! Closing as a duplicate of #2146 as the primary for this issue