Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-02-17 22:44:24 -05:00
Code Issues Activity

Fixes a style issue of client:only components in DEV mode during view transitions. (#10532)

Browse source 
* Fix DEV-mode-only style issue of client:only components during view transitions.

* reworded changeset

* fixed quotes
This commit is contained in:
Martin Trapp 2024-03-22 15:36:40 +01:00 • committed by GitHub
parent 8cac744746
commit 8306ce1ff7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/spotty-bats-nail.md Normal file
View file

@ -0,0 +1,6 @@
---
"astro": patch
---
Fixes a style issue of `client:only` components in DEV mode during view transitions.

7
packages/astro/src/transitions/router.ts
View file

@ -696,18 +696,13 @@ async function prepareForClientOnlyComponents(newDocument: Document, toLocation:
const nextHead = nextPage.contentDocument?.head; const nextHead = nextPage.contentDocument?.head;
if (nextHead) { if (nextHead) {
// Clear former persist marks
document.head
.querySelectorAll(`style[${PERSIST_ATTR}=""]`)
.forEach((s) => s.removeAttribute(PERSIST_ATTR));
// Collect the vite ids of all styles present in the next head // Collect the vite ids of all styles present in the next head
const viteIds = [...nextHead.querySelectorAll(`style[${VITE_ID}]`)].map((style) => const viteIds = [...nextHead.querySelectorAll(`style[${VITE_ID}]`)].map((style) =>
style.getAttribute(VITE_ID) style.getAttribute(VITE_ID)
); );
// Copy required styles to the new document if they are from hydration. // Copy required styles to the new document if they are from hydration.
viteIds.forEach((id) => { viteIds.forEach((id) => {
const style = document.head.querySelector(`style[${VITE_ID}="${id}"]`); const style = nextHead.querySelector(`style[${VITE_ID}="${id}"]`);
if (style && !newDocument.head.querySelector(`style[${VITE_ID}="${id}"]`)) { if (style && !newDocument.head.querySelector(`style[${VITE_ID}="${id}"]`)) {
newDocument.head.appendChild(style.cloneNode(true)); newDocument.head.appendChild(style.cloneNode(true));
} }