Prevent ?inline and ?raw CSS from being bundled as CSS

[matthewp]

Changes

• Fixes Build breaks when importing CSS as inline #6145

Testing

• Test added for ?inline and ?raw usage.

Docs

N/A, bug fix

[changeset-bot]

🦋 Changeset detected

Latest commit: b429a8a

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[bluwy]

Was about to suggest the incorrect regex test, but that's fixed now. LGTM once the tests pass.

Also, according to the issue, is this still a Vite bug? I don't think Vite is removing pure css chunks for ?inline 🤔

Also, I noticed the cssRe check can be replaced with import { isCSSRequest } from 'vite' since Vite 4.0. We could clean that up here, or I'm fine tackling that in a separate PR too.

[matthewp]

@bluwy does the vite version of isCSSRequest exclude ?inline and ?raw? If so I agree that it would be good to use that.

This could technically happen in Vite but it would require that an ?inline CSS module be in the same bundle as another (non-inline) CSS bundle and without any JS. It happened to us because we control manualChunks to force all CSS into the common bundle. But it wouldn't happen in normal Vite, again unless someone was using manualChunks.

[matthewp]

Looks like the isCSSRequest in Vite matches any CSS. For our purposes it's really "buildable CSS". I'll update the code to use that.

[bluwy]

This could technically happen in Vite but it would require that an ?inline CSS module be in the same bundle as another (non-inline) CSS bundle and without any JS. It happened to us because we control manualChunks to force all CSS into the common bundle. But it wouldn't happen in normal Vite, again unless someone was using manualChunks.

Ah I see. So what happened before is that all types of CSS imports are combined as a CSS chunk, even if they're not really CSS like for ?inline and ?raw. This is kinda an edge case, maybe it's worth taking a look in Vite still, but I think this PR as the fix for now is great too.

[matthewp]

Yep, that's exactly right. I can't think of a scenario where this would happen in regular Vite without someone manipulating manualChunks like we were. In this case the manualChunks part is the error, we don't actually want this type of CSS in that same chunk. If it were it would prevent it from being split into a CSS file!

[nicholasray]

@matthewp It seems like styles imported with the ?raw query param are being bundled in the dev server. For example, in the following codesandbox, I'd expect the background to not be red since those styles are imported with ?raw, but it is red:

https://codesandbox.io/p/sandbox/rough-shape-l7t6qk?file=%2Fpackage.json&selection=%5B%7B%22endColumn%22%3A20%2C%22endLineNumber%22%3A13%2C%22startColumn%22%3A20%2C%22startLineNumber%22%3A13%7D%5D

I noticed this behavior began with Astro 2.0.7. Is that intended?

[bluwy]

Seems like a bug to me. Feel free to open an issue so we can track it. It could also likely be a Vite bug but I'm not sure yet.

[nicholasray]

@bluwy Thank you. I created #6422