Fix duplicated Astro and Vite injected styles #8706
Conversation
🦋 Changeset detectedLatest commit: d07e2c8 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
the
pkg: astro
There was a problem hiding this comment.
This test file seems to duplicate the same test in css.test.js
| const totalExpectedStyles = 8; | ||
| const totalExpectedStyles = 7; |
There was a problem hiding this comment.
There's no more <style data-astro-dev-id as it's merged into <style data-vite-dev-id, so this number is reduced by one.
| // Vue `link` styles need to be manually refreshed in Firefox | ||
| import.meta.hot.on('vite:beforeUpdate', async (payload) => { |
There was a problem hiding this comment.
I manually tested this and it seems to not apply anymore, so I removed it. The rest of this file relates to our CSS handling, which is no longer needed as Vite handles all now, so pretty much the entire file is empty and not need to be loaded anymore.
Changes
Fix #8637
The issue was that
<style data-astro-dev-id="..."and<style data-vite-dev-id="..."have different IDs that they don't match and deduplicate correctly, causing duplicated styles. The main issue is that we're usingimportedModule.urlinstead ofimportedModule.id.But I made a complete cleanup of CSS HMR, relying on Vite to handle it entirely. A lot of HMR handling was added by #4157 before. It's possible to take this new approach today because Vite natively treats
data-vite-dev-idas FOUC-prevention injected styles.Testing
Existing CSS and CSS HMR tests should still work. Updated them where necessary for the slightly different markup. I also tested the #8637 repro manually.
Docs
n/a. internal change and bug fix.