michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Revert fix #8472 (#8767)

Browse source
This commit is contained in:
Martin Trapp 2023-10-06 23:17:27 +02:00 committed by GitHub
parent 2262814a92
commit 30de324361
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
.changeset/great-bears-watch.md Normal file
View file

@ -0,0 +1,9 @@
---
'astro': patch
---
Revert fix #8472
[#8472](https://github.com/withastro/astro/pull/8472) caused some style files from previous pages to not be cleanly deleted on view transitions. For a discussion of a future fix for the original issue [#8144](https://github.com/withastro/astro/issues/8114) see [#8745](https://github.com/withastro/astro/pull/8745).

2
packages/astro/e2e/view-transitions.test.js
View file

@ -648,7 +648,7 @@ test.describe('View Transitions', () => {
expect(loads.length, 'There should be 2 page loads').toEqual(2); expect(loads.length, 'There should be 2 page loads').toEqual(2);
}); });
test('client:only styles are retained on transition', async ({ page, astro }) => { test.skip('client:only styles are retained on transition', async ({ page, astro }) => {
const totalExpectedStyles = 7; const totalExpectedStyles = 7;
// Go to page 1 // Go to page 1

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

@ -42,11 +42,6 @@ const announce = () => {
}; };
const PERSIST_ATTR = 'data-astro-transition-persist'; const PERSIST_ATTR = 'data-astro-transition-persist';
const parser = new DOMParser(); const parser = new DOMParser();
// explained at its usage
let noopEl: HTMLDivElement;
if (import.meta.env.DEV) {
noopEl = document.createElement('div');
}
// The History API does not tell you if navigation is forward or back, so // The History API does not tell you if navigation is forward or back, so
// you can figure it using an index. On pushState the index is incremented so you // you can figure it using an index. On pushState the index is incremented so you
@ -198,22 +193,6 @@ async function updateDOM(
const href = el.getAttribute('href'); const href = el.getAttribute('href');
return newDocument.head.querySelector(`link[rel=stylesheet][href="${href}"]`); return newDocument.head.querySelector(`link[rel=stylesheet][href="${href}"]`);
} }
// What follows is a fix for an issue (#8472) with missing client:only styles after transition.
// That problem exists only in dev mode where styles are injected into the page by Vite.
// Returning a noop element ensures that the styles are not removed from the old document.
// Guarding the code below with the dev mode check
// allows tree shaking to remove this code in production.
if (import.meta.env.DEV) {
if (el.tagName === 'STYLE' && el.dataset.viteDevId) {
const devId = el.dataset.viteDevId;
// If this same style tag exists, remove it from the new page
return (
newDocument.querySelector(`style[data-vite-dev-id="${devId}"]`) ||
// Otherwise, keep it anyways. This is client:only styles.
noopEl
);
}
}
return null; return null;
}; };