Merge branch 'main' into matt/avif-input-pr

withastro · Sep 11, 2023 · 1f402a2 · 1f402a2
2 parents b2a6326 + 5e1099f
commit 1f402a2
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 0 deletions.
diff --git a/.changeset/gold-weeks-hammer.md b/.changeset/gold-weeks-hammer.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Minify the HTML of the redicts emitted during the build.
diff --git a/.changeset/grumpy-hotels-heal.md b/.changeset/grumpy-hotels-heal.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Prevent client:only styles from being removed in dev (View Transitions)
diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro
@@ -113,6 +113,11 @@ const { fallback = 'animate' } = Astro.props as Props;
 
 	const parser = new DOMParser();
 
+	// A noop element used to prevent styles from being removed
+	if (import.meta.env.DEV) {
+		var noopEl: string | undefined = document.createElement('div');
+	}
+
 	async function updateDOM(doc: Document, loc: URL, state?: State, fallback?: Fallback) {
 		// Check for a head element that should persist, either because it has the data
 		// attribute or is a link el.
@@ -139,6 +144,18 @@ const { fallback = 'animate' } = Astro.props as Props;
 					}
 				}
 			}
+			// Only run this in dev. This will get stripped from production builds and is not needed.
+			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 (
+						doc.querySelector(`style[data-astro-dev-id="${devId}"]`) ||
+						// Otherwise, keep it anyways. This is client:only styles.
+						noopEl
+					);
+				}
+			}
 			return null;
 		};
 

diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/client-only-one.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/client-only-one.astro
@@ -0,0 +1,10 @@
+---
+import Layout from '../components/Layout.astro';
+import Island from '../components/Island';
+---
+<Layout>
+	<a id="click-two" href="/client-only-two">go to page 2</a>
+	<div transition:persist="island">
+		<Island client:only count={5}>message here</Island>
+	</div>
+</Layout>
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/client-only-two.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/client-only-two.astro
@@ -0,0 +1,10 @@
+---
+import Layout from '../components/Layout.astro';
+import Island from '../components/Island';
+---
+<Layout>
+	<p id="page-two">Page 2</p>
+	<div transition:persist="island">
+		<Island client:only count={5}>message here</Island>
+	</div>
+</Layout>
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
@@ -565,4 +565,24 @@ test.describe('View Transitions', () => {
 		p = page.locator('#one');
 		await expect(p, 'should have content').toHaveText('Page 1');
 	});
+
+	test('client:only styles are retained on transition', async ({ page, astro }) => {
+		const totalExpectedStyles = 8;
+
+		// Go to page 1
+		await page.goto(astro.resolveUrl('/client-only-one'));
+		let msg = page.locator('.counter-message');
+		await expect(msg).toHaveText('message here');
+
+		let styles = await page.locator('style').all();
+		expect(styles.length).toEqual(totalExpectedStyles);
+
+		await page.click('#click-two');
+
+		let pageTwo = page.locator('#page-two');
+		await expect(pageTwo, 'should have content').toHaveText('Page 2');
+
+		styles = await page.locator('style').all();
+		expect(styles.length).toEqual(totalExpectedStyles, 'style count has not changed');
+	});
 });
diff --git a/packages/astro/src/core/build/generate.ts b/packages/astro/src/core/build/generate.ts
@@ -584,6 +584,9 @@ async function generatePath(pathname: string, gopts: GeneratePathOptions, pipeli
 <body>
 	<a href="${location}">Redirecting from <code>${fromPath}</code> to <code>${location}</code></a>
 </body>`;
+		if (pipeline.getConfig().compressHTML === true) {
+			body = body.replaceAll('\n', '');
+		}
 		// A dynamic redirect, set the location so that integrations know about it.
 		if (pageData.route.type !== 'redirect') {
 			pageData.route.redirect = location;

diff --git a/packages/astro/test/redirects.test.js b/packages/astro/test/redirects.test.js
@@ -69,6 +69,7 @@ describe('Astro.redirect', () => {
 					root: './fixtures/ssr-redirect/',
 					output: 'static',
 					redirects: {
+						'/old': '/test',
 						'/': '/test',
 						'/one': '/test',
 						'/two': '/test',
@@ -82,6 +83,11 @@ describe('Astro.redirect', () => {
 				await fixture.build();
 			});
 
+			it("Minifies the HTML emitted when a page that doesn't exist is emitted", async () => {
+				const html = await fixture.readFile('/old/index.html');
+				expect(html).to.not.include('\n');
+			});
+
 			it('Includes the meta refresh tag in Astro.redirect pages', async () => {
 				const html = await fixture.readFile('/secret/index.html');
 				expect(html).to.include('http-equiv="refresh');