Fix multi-layout head injection (#8449)

* Fix multi-layout head injection * Tracing fix * Improved walk * Upgrade the compiler version --------- Co-authored-by: Nate Moore <[email protected]>
withastro · Sep 8, 2023 · 7eea37a · 7eea37a
1 parent 50c0a80
commit 7eea37a
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 17 deletions.
diff --git a/.changeset/orange-cheetahs-happen.md b/.changeset/orange-cheetahs-happen.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix multi-layout head injection
diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -119,7 +119,7 @@
     "test:e2e:match": "playwright test -g"
   },
   "dependencies": {
-    "@astrojs/compiler": "^2.0.1",
+    "@astrojs/compiler": "^2.1.0",
     "@astrojs/internal-helpers": "workspace:*",
     "@astrojs/markdown-remark": "workspace:*",
     "@astrojs/telemetry": "workspace:*",

diff --git a/packages/astro/src/vite-plugin-astro/index.ts b/packages/astro/src/vite-plugin-astro/index.ts
@@ -154,7 +154,7 @@ export default function astro({ settings, logger }: AstroPluginOptions): vite.Pl
 				hydratedComponents: transformResult.hydratedComponents,
 				scripts: transformResult.scripts,
 				containsHead: transformResult.containsHead,
-				propagation: 'none',
+				propagation: transformResult.propagation ? 'self' : 'none',
 				pageOptions: {},
 			};
 

diff --git a/packages/astro/src/vite-plugin-head/index.ts b/packages/astro/src/vite-plugin-head/index.ts
@@ -58,6 +58,15 @@ export default function configHeadVitePlugin(): vite.Plugin {
 				propagateMetadata.call(this, id, 'containsHead', true);
 			}
 
+			if(info && getAstroMetadata(info)?.propagation === 'self') {
+				const mod = server.moduleGraph.getModuleById(id);
+				for (const parent of mod?.importers ?? []) {
+					if(parent.id) {
+						propagateMetadata.call(this, parent.id, 'propagation', 'in-tree');
+					}
+				}
+			}
+
 			if (injectExp.test(source)) {
 				propagateMetadata.call(this, id, 'propagation', 'in-tree');
 			}
@@ -91,10 +100,21 @@ export function astroHeadBuildPlugin(internals: BuildInternals): AstroBuildPlugi
 									const modinfo = this.getModuleInfo(id);
 
 									// <head> tag in the tree
-									if (modinfo && getAstroMetadata(modinfo)?.containsHead) {
-										for (const [pageInfo] of getTopLevelPages(id, this)) {
-											let metadata = getOrCreateMetadata(pageInfo.id);
-											metadata.containsHead = true;
+									if(modinfo) {
+										const meta = getAstroMetadata(modinfo);
+										if(meta?.containsHead) {
+											for (const [pageInfo] of getTopLevelPages(id, this)) {
+												let metadata = getOrCreateMetadata(pageInfo.id);
+												metadata.containsHead = true;
+											}
+										}
+										if(meta?.propagation === 'self') {
+											for (const [info] of walkParentInfos(id, this)) {
+												let metadata = getOrCreateMetadata(info.id);
+												if(metadata.propagation !== 'self') {
+													metadata.propagation = 'in-tree';
+												}
+											}
 										}
 									}
 

diff --git a/packages/astro/test/units/dev/head-injection.test.js b/packages/astro/test/units/dev/head-injection.test.js
@@ -123,27 +123,38 @@ describe('head injection', () => {
 						});
 					}
 				`.trim(),
+				'/src/components/Content.astro': `
+				---
+				import { renderEntry } from '../common/head.js';
+				const ExtraHead = renderEntry();
+				---
+				<ExtraHead />
+				`,
+				'/src/components/Inner.astro': `
+				---
+				import Content from './Content.astro';
+				---
+				<Content />
+				`,
 				'/src/components/Layout.astro': `
-					---
-					import { renderEntry } from '../common/head.js';
-					const ExtraHead = renderEntry();
-					---
 					<html>
 						<head>
 							<title>Normal head stuff</title>
 						</head>
 						<body>
 							<slot name="title" />
-							<ExtraHead />
+							<slot name="inner" />
 						</body>
 					</html>
 				`,
 				'/src/pages/index.astro': `
 					---
 					import Layout from '../components/Layout.astro';
+					import Inner from '../components/Inner.astro';
 					---
 					<Layout>
 						<h1 slot="title">Test page</h1>
+						<Inner slot="inner" />
 					</Layout>
 				`,
 			},
@@ -168,8 +179,8 @@ describe('head injection', () => {
 				const html = await text();
 				const $ = cheerio.load(html);
 
-				expect($('link[rel=stylesheet][href="/some/fake/styles.css"]')).to.have.a.lengthOf(1);
-				expect($('#other')).to.have.a.lengthOf(1);
+				expect($('link[rel=stylesheet][href="/some/fake/styles.css"]')).to.have.a.lengthOf(1, 'found inner link');
+				expect($('#other')).to.have.a.lengthOf(1, 'Found the #other div');
 			}
 		);
 	});

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml