Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Mar 22, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6f5da9b
Fix DEV-mode-only style issue of client:only components during view t…
martrapp Mar 22, 2024
83c90ab
reworded changeset
martrapp Mar 22, 2024
b1e2403
fixed quotes
martrapp Mar 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/spotty-bats-nail.md
View file
Open in desktop
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
View file
Open in desktop
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));

Comment on lines -699 to -703
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was a remnant of an earlier approach.

// 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}"]`);
Comment on lines -710 to +705
Copy link
Member Author

@martrapp martrapp Mar 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of copying the styles from the previous page, we now copy from the iframe. This also works for non-persisted client:only components.

if (style && !newDocument.head.querySelector(`style[${VITE_ID}="${id}"]`)) {
newDocument.head.appendChild(style.cloneNode(true));
}
Expand Down
Loading