Fix duplicated CSS modules inlining #9531
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: f157c45 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 |
github-actions
bot
added
pkg: astro
bluwy
commented
Dec 27, 2023
Comment on lines
+31
to
+34
| const url = new URL(importedModule.url, 'http://localhost'); | ||
| // Mark url with ?inline so Vite will return the CSS as plain string, even for CSS modules | ||
| url.searchParams.set('inline', ''); | ||
| const modId = `${decodeURI(url.pathname)}${url.search}`; |
There was a problem hiding this comment.
We used to load the CSS file without the ?inline query, which is fine for plain CSS files. But now we need ?inline so it also works for CSS modules. ?inline added to CSS files is also fine and should also lead to lesser processing.
| } | ||
| if ( | ||
| mode === 'development' && // only inline in development |
There was a problem hiding this comment.
I removed this check (and the mode param entirely) as it seems like we only use this function in dev now.
matthewp
approved these changes
Dec 27, 2023
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes
fix #6885
When a
.module.cssfile is imported by both an Astro file and framework component, it gets inlined by Astro to prevent a FOUC. However, the way we inline it before (using alink) is not how Vite handles it when it's loaded in the client (via the framework component). Vite expects the CSS module to be astyletag inlined.This PR uses a
styletag instead to fix it, which potentially causes different ordering with other style tags now (since CSS modules used to be links and they're rendered separately), but since we had changed the ordering before at #8877 (which I think worked fine?), I think we can tweak this a little bit more.Testing
Updated tests
Docs
n/a. bug fix.