Fix preloading stylesheets in view transitions (#8707)

* Fix preload of stylesheets (VT) * Fix preload of stylesheets (VT)
withastro · Sep 29, 2023 · 148b5b8 · 148b5b8
1 parent 3458081
commit 148b5b8
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 2 deletions.
diff --git a/packages/astro/e2e/fixtures/view-transitions/public/one.css b/packages/astro/e2e/fixtures/view-transitions/public/one.css
@@ -0,0 +1,3 @@
+#one {
+	background-color: whitesmoke;
+}
diff --git a/packages/astro/e2e/fixtures/view-transitions/public/styles.css b/packages/astro/e2e/fixtures/view-transitions/public/styles.css
@@ -0,0 +1,3 @@
+h1 {
+	color: blue
+}
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/Layout.astro b/packages/astro/e2e/fixtures/view-transitions/src/components/Layout.astro
@@ -18,6 +18,7 @@ const { link } = Astro.props as Props;
 				margin: auto;
 			}	
 		</style>
+		<link rel="stylesheet" href="/style.css">
 		<ViewTransitions />
 		<DarkMode />
 		<meta name="script-executions" content="0">

diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/one.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/one.astro
@@ -1,7 +1,7 @@
 ---
 import Layout from '../components/Layout.astro';
 ---
-<Layout>
+<Layout link="/one.css">
 	<p id="one">Page 1</p>
 	<a id="click-one" href="#test">test</a>
 	<a id="click-two" href="/two">go to 2</a>

diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
@@ -20,6 +20,20 @@ function scrollToBottom(page) {
 	});
 }
 
+function collectPreloads(page) {
+	return page.evaluate(() => {
+		window.preloads = [];
+		const observer = new MutationObserver((mutations) => {
+			mutations.forEach((mutation) =>
+				mutation.addedNodes.forEach((node) => {
+					if (node.nodeName === 'LINK' && node.rel === 'preload') preloads.push(node.href);
+				})
+			);
+		});
+		observer.observe(document.head, { childList: true });
+	});
+}
+
 test.describe('View Transitions', () => {
 	test('Moving from page 1 to page 2', async ({ page, astro }) => {
 		const loads = [];
@@ -170,11 +184,15 @@ test.describe('View Transitions', () => {
 		let p = page.locator('#one');
 		await expect(p, 'should have content').toHaveText('Page 1');
 
+		await collectPreloads(page);
+
 		// Go to page 2
 		await page.click('#click-two');
 		p = page.locator('#two');
 		await expect(p, 'should have content').toHaveText('Page 2');
 		await expect(p, 'imported CSS updated').toHaveCSS('font-size', '24px');
+		const preloads = await page.evaluate(() => window.preloads);
+		expect(preloads.length === 1 && preloads[0].endsWith('/two.css')).toBeTruthy();
 	});
 
 	test('astro:page-load event fires when navigating to new page', async ({ page, astro }) => {

diff --git a/packages/astro/src/transitions/router.ts b/packages/astro/src/transitions/router.ts
@@ -292,7 +292,9 @@ async function updateDOM(
 		// Do not preload links that are already on the page.
 		if (
 			!document.querySelector(
-				`[${PERSIST_ATTR}="${el.getAttribute(PERSIST_ATTR)}"], link[rel=stylesheet]`
+				`[${PERSIST_ATTR}="${el.getAttribute(
+					PERSIST_ATTR
+				)}"], link[rel=stylesheet][href="${el.getAttribute('href')}"]`
 			)
 		) {
 			const c = document.createElement('link');