Skip to content

Commit

Permalink
Fixes a style issue of client:only components in DEV mode during vi…
Browse files Browse the repository at this point in the history
…ew transitions. (#10532)

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

* reworded changeset

* fixed quotes
  • Loading branch information
martrapp authored Mar 22, 2024
1 parent 8cac744 commit 8306ce1
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 6 deletions.
6 changes: 6 additions & 0 deletions .changeset/spotty-bats-nail.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"astro": patch
---

Fixes a style issue of `client:only` components in DEV mode during view transitions.

7 changes: 1 addition & 6 deletions packages/astro/src/transitions/router.ts
Original file line number Diff line number Diff line change
Expand Up @@ -696,18 +696,13 @@ async function prepareForClientOnlyComponents(newDocument: Document, toLocation:

const nextHead = nextPage.contentDocument?.head;
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
const viteIds = [...nextHead.querySelectorAll(`style[${VITE_ID}]`)].map((style) =>
style.getAttribute(VITE_ID)
);
// Copy required styles to the new document if they are from hydration.
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}"]`)) {
newDocument.head.appendChild(style.cloneNode(true));
}
Expand Down

0 comments on commit 8306ce1

Please sign in to comment.