Build breaks when importing CSS as inline

[santicros]

What version of astro are you using?

2.0.6

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

None

What package manager are you using?

npm

What operating system are you using?

MacOS 12.6

Describe the Bug

When trying to import a CSS file inline, it works on development, but it breaks on build.

Vite supports importing CSS inline with the ?inline param: https://vitejs.dev/guide/features.html#disabling-css-injection-into-the-page like this:

import otherStyles from './bar.css?inline' // will not be injected into the page

When doing this on Astro, it works in development mode, but when doing build it breaks, saying:

 Cannot find module '/home/projects/github-5xrgxx/dist/chunks/index.83f085fc.2f5bdb15.mjs' imported from /home/projects/github-5xrgxx/dist/chunks/pages/all.c4bb7b53.mjs

I personally need this to share some styles to a canvas and embed them inline. I need to import a stylesheet as text and use it inside JavaScript. Thanks!

Link to Minimal Reproducible Example

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

Participation

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

[matthewp]

I ran into this as well so I'm biased in favor of fixing. :-D

[matthewp]

Pretty sure this is a Vite bug, css @bluwy. Looks like it's deleting the chunk because it's "pure". But this should not be treated as pure.