Handle MDX optimize for root hast node (#11975)

Author: bluwy

.changeset/lovely-dolphins-draw.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/mdx': patch
+---
+
+Handles nested root hast node when optimizing MDX

packages/integrations/mdx/src/rehype-optimize-static.ts

@@ -64,8 +64,14 @@ export const rehypeOptimizeStatic: RehypePlugin<[OptimizeOptions?]> = (options)
 		 * A non-static node causes all its parents to be non-optimizable
 		 */
 		const isNodeNonStatic = (node: Node) => {
-			// @ts-expect-error Access `.tagName` naively for perf
-			return node.type.startsWith('mdx') || ignoreElementNames.has(node.tagName);
+			return (
+				node.type.startsWith('mdx') ||
+				// @ts-expect-error `node` should never have `type: 'root'`, but in some cases plugins may inject it as children,
+				// which MDX will render as a fragment instead (an MDX fragment is a `mdxJsxFlowElement` type).
+				node.type === 'root' ||
+				// @ts-expect-error Access `.tagName` naively for perf
+				ignoreElementNames.has(node.tagName)
+			);
 		};
 
 		visit(tree as any, {

packages/integrations/mdx/test/fixtures/mdx-optimize/astro.config.mjs

@@ -1,9 +1,37 @@
 import mdx from '@astrojs/mdx';
 
 export default {
-	integrations: [mdx({
-		optimize: {
-			ignoreElementNames: ['strong']
-		}
-	})]
-}
+	integrations: [
+		mdx({
+			optimize: {
+				ignoreElementNames: ['strong'],
+			},
+		}),
+	],
+	markdown: {
+		rehypePlugins: [
+			() => {
+				return (tree) => {
+					tree.children.push({
+						type: 'root',
+						children: [
+							{
+								type: 'element',
+								tagName: 'p',
+								properties: {
+									id: 'injected-root-hast',
+								},
+								children: [
+									{
+										type: 'text',
+										value: 'Injected root hast from rehype plugin',
+									},
+								],
+							},
+						],
+					});
+				};
+			},
+		],
+	},
+};

packages/integrations/mdx/test/mdx-optimize.test.js

@@ -47,4 +47,15 @@ describe('MDX optimize', () => {
 		assert.notEqual(blockquote, null);
 		assert.equal(blockquote.textContent.includes('I like pancakes'), true);
 	});
+
+	it('renders MDX with rehype plugin that incorrectly injects root hast node', async () => {
+		const html = await fixture.readFile('/import/index.html');
+		const { document } = parseHTML(html);
+
+		assert.doesNotMatch(html, /set:html=/);
+		assert.equal(
+			document.getElementById('injected-root-hast').textContent,
+			'Injected root hast from rehype plugin',
+		);
+	});
 });