Importing CSS URLs break server startup

[EduardDopler]

What version of astro are you using?

2.0.10

Are you using an SSR adapter? If so, which one?

Node

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

Problem

If a stylesheet URL is imported via ?url in Frontmatter and at the same time other styles are involved in the page—e.g. via import "styles.css" (without ?url) in Frontmatter or normal <style> tag (with or without is:global) definition in a component—the standalone server (Node) doesn't come up (see error below), while dev mode works fine.

The server entrypoint /home/projects/github-h3ezf7/dist/server/entry.mjs does not exist. Have you ran a build yet?
File:
file://file:///home/projects/github-h3ezf7/node_modules/@astrojs/node/dist/preview.js:38:13

Background

This article by Jake Archibald shows a performant way of loading only the CSS needed for a specific component, allowing a more streaming rendering of the page. If this is combined with other CSS techniques, the server breaks (while the build itself and dev mode result in desired behavior).

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-h3ezf7?file=src/components/SomeComponent.astro

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

Thanks, can you confirm that this works in a Vanilla Vite project? It's unclear to me if this is our bug or theirs.

[EduardDopler]

@matthewp Looks fine to me in vanilla Vite: https://stackblitz.com/edit/vitejs-vite-aytvl2?file=main.js

[bluwy]

Digging more into this, I can confirm this is a Vite bug. When using ?url, it still thinks that it's a css file and assumes the related JS chunk to be a pure CSS chunk. I'll make a fix upstream when I figure out how to trigger Vite to reproduce this specific case, which is rare.

[bluwy]

This is fixed upstream and when it's released, you can bump it with npm update vite. Closing for now as the work is completed.