-
-
Notifications
You must be signed in to change notification settings - Fork 2.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix duplicated Astro and Vite injected styles (#8706)
- Loading branch information
Showing
13 changed files
with
18 additions
and
135 deletions.
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'astro': patch | ||
--- | ||
|
||
Fix duplicated Astro and Vite injected styles |
This file was deleted.
Oops, something went wrong.
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
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
9 changes: 0 additions & 9 deletions
9
packages/astro/e2e/fixtures/css-sourcemaps/src/pages/index.astro
This file was deleted.
Oops, something went wrong.
3 changes: 0 additions & 3 deletions
3
packages/astro/e2e/fixtures/css-sourcemaps/src/styles/main.css
This file was deleted.
Oops, something went wrong.
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,46 +1,7 @@ | ||
/// <reference types="vite/client" /> | ||
|
||
if (import.meta.hot) { | ||
// Vite injects `<style data-vite-dev-id>` for ESM imports of styles | ||
// but Astro also SSRs with `<style data-astro-dev-id>` blocks. This MutationObserver | ||
// removes any duplicates as soon as they are hydrated client-side. | ||
const injectedStyles = getInjectedStyles(); | ||
const mo = new MutationObserver((records) => { | ||
for (const record of records) { | ||
for (const node of record.addedNodes) { | ||
if (isViteInjectedStyle(node)) { | ||
injectedStyles.get(node.getAttribute('data-vite-dev-id')!)?.remove(); | ||
} | ||
} | ||
} | ||
}); | ||
mo.observe(document.documentElement, { subtree: true, childList: true }); | ||
|
||
// Vue `link` styles need to be manually refreshed in Firefox | ||
import.meta.hot.on('vite:beforeUpdate', async (payload) => { | ||
for (const file of payload.updates) { | ||
if (file.acceptedPath.includes('vue&type=style')) { | ||
const link = document.querySelector(`link[href="${file.acceptedPath}"]`); | ||
if (link) { | ||
link.replaceWith(link.cloneNode(true)); | ||
} | ||
} | ||
} | ||
}); | ||
} | ||
|
||
function getInjectedStyles() { | ||
const injectedStyles = new Map<string, Element>(); | ||
document.querySelectorAll<HTMLStyleElement>('style[data-astro-dev-id]').forEach((el) => { | ||
injectedStyles.set(el.getAttribute('data-astro-dev-id')!, el); | ||
}); | ||
return injectedStyles; | ||
} | ||
|
||
function isStyle(node: Node): node is HTMLStyleElement { | ||
return node.nodeType === node.ELEMENT_NODE && (node as Element).tagName.toLowerCase() === 'style'; | ||
} | ||
|
||
function isViteInjectedStyle(node: Node): node is HTMLStyleElement { | ||
return isStyle(node) && !!node.getAttribute('data-vite-dev-id'); | ||
// HMR temporarily not needed for now, but kept here in case we need it again. | ||
// To re-instate this module again, update `vite-plugin-astro-server/route.ts` | ||
// to add this module as a script similar to `/@vite/client` | ||
} |
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
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
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