fix(mdx): don't import image component when no images are used (#12921)

* fix(mdx): don't import image component when no images are used * Fix test * Fix test
withastro · Jan 7, 2025 · aeb7e1a · aeb7e1a
1 parent 8b9d530
commit aeb7e1a
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 15 deletions.
diff --git a/.changeset/old-clouds-act.md b/.changeset/old-clouds-act.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/mdx': patch
+---
+
+Fixes a bug that caused Image component to be imported on MDX pages that did not include images
diff --git a/packages/astro/test/content-collections-render.test.js b/packages/astro/test/content-collections-render.test.js
@@ -202,7 +202,7 @@ describe('Content Collections - render()', () => {
 			assert.equal($('ul li').length, 3);
 
 			// Includes styles
-			assert.equal($('head > style').length, 2);
+			assert.equal($('head > style').length, 1);
 			assert.ok($('head > style').text().includes("font-family: 'Comic Sans MS'"));
 		});
 

diff --git a/packages/astro/test/fixtures/ssr-api-route/src/pages/fail.js b/packages/astro/test/fixtures/ssr-api-route/src/pages/fail.js
@@ -1,3 +1,3 @@
 export async function GET({ request }) {
-  return fetch("https://http.im/status/500", request)
+  return fetch("https://httpstat.us/500", request)
 }
diff --git a/packages/astro/test/ssr-api-route.test.js b/packages/astro/test/ssr-api-route.test.js
@@ -141,7 +141,7 @@ describe('API routes in SSR', () => {
 			const response = await fixture.fetch('/fail');
 			const text = await response.text();
 			assert.equal(response.status, 500);
-			assert.equal(text, '');
+			assert.equal(text, '500 Internal Server Error');
 		});
 
 		it('Has valid api context', async () => {

diff --git a/packages/astro/test/units/dev/collections-renderentry.test.js b/packages/astro/test/units/dev/collections-renderentry.test.js
@@ -101,7 +101,7 @@ describe('Content Collections - render()', () => {
 				assert.equal($('ul li').length, 3);
 
 				// Rendered the styles
-				assert.equal($('style').length, 2);
+				assert.equal($('style').length, 1);
 			},
 		);
 	});
@@ -158,7 +158,7 @@ describe('Content Collections - render()', () => {
 				assert.equal($('ul li').length, 3);
 
 				// Rendered the styles
-				assert.equal($('style').length, 2);
+				assert.equal($('style').length, 1);
 			},
 		);
 	});
@@ -225,7 +225,7 @@ describe('Content Collections - render()', () => {
 				assert.equal($('ul li').length, 3);
 
 				// Rendered the styles
-				assert.equal($('style').length, 2);
+				assert.equal($('style').length, 1);
 			},
 		);
 	});
@@ -291,7 +291,7 @@ describe('Content Collections - render()', () => {
 				assert.equal($('ul li').length, 3);
 
 				// Rendered the styles
-				assert.equal($('style').length, 2);
+				assert.equal($('style').length, 1);
 			},
 		);
 	});

diff --git a/packages/integrations/mdx/src/rehype-images-to-component.ts b/packages/integrations/mdx/src/rehype-images-to-component.ts
@@ -73,13 +73,12 @@ function getImageComponentAttributes(props: Properties): MdxJsxAttribute[] {
 
 export function rehypeImageToComponent() {
 	return function (tree: Root, file: VFile) {
-		if (!file.data.astro?.imagePaths) return;
-
+		if (!file.data.astro?.imagePaths?.length) return;
 		const importsStatements: MdxjsEsm[] = [];
 		const importedImages = new Map<string, string>();
 
 		visit(tree, 'element', (node, index, parent) => {
-			if (!file.data.astro?.imagePaths || node.tagName !== 'img' || !node.properties.src) return;
+			if (!file.data.astro?.imagePaths?.length || node.tagName !== 'img' || !node.properties.src) return;
 
 			const src = decodeURI(String(node.properties.src));
 

diff --git a/packages/integrations/mdx/test/css-head-mdx.test.js b/packages/integrations/mdx/test/css-head-mdx.test.js
@@ -28,7 +28,7 @@ describe('Head injection w/ MDX', () => {
 			const { document } = parseHTML(html);
 
 			const links = document.querySelectorAll('head link[rel=stylesheet]');
-			assert.equal(links.length, 2);
+			assert.equal(links.length, 1);
 
 			const scripts = document.querySelectorAll('script[type=module]');
 			assert.equal(scripts.length, 1);
@@ -67,7 +67,7 @@ describe('Head injection w/ MDX', () => {
 			const $ = cheerio.load(html);
 
 			const headLinks = $('head link[rel=stylesheet]');
-			assert.equal(headLinks.length, 2);
+			assert.equal(headLinks.length, 1);
 
 			const bodyLinks = $('body link[rel=stylesheet]');
 			assert.equal(bodyLinks.length, 0);
@@ -92,7 +92,7 @@ describe('Head injection w/ MDX', () => {
 			const $ = cheerio.load(html);
 
 			const headLinks = $('head link[rel=stylesheet]');
-			assert.equal(headLinks.length, 2);
+			assert.equal(headLinks.length, 1);
 
 			const bodyLinks = $('body link[rel=stylesheet]');
 			assert.equal(bodyLinks.length, 0);

diff --git a/packages/integrations/mdx/test/mdx-math.test.js b/packages/integrations/mdx/test/mdx-math.test.js
@@ -28,7 +28,7 @@ describe('MDX math', () => {
 			const mjxContainer = document.querySelector('mjx-container[jax="SVG"]');
 			assert.notEqual(mjxContainer, null);
 
-			const mjxStyle = document.querySelectorAll('style')[1].innerHTML;
+			const mjxStyle = document.querySelectorAll('style')[0].innerHTML;
 			assert.equal(
 				mjxStyle.includes('mjx-container[jax="SVG"]'),
 				true,
@@ -62,7 +62,7 @@ describe('MDX math', () => {
 			const mjxContainer = document.querySelector('mjx-container[jax="CHTML"]');
 			assert.notEqual(mjxContainer, null);
 
-			const mjxStyle = document.querySelectorAll('style')[1].innerHTML;
+			const mjxStyle = document.querySelectorAll('style')[0].innerHTML;
 			assert.equal(
 				mjxStyle.includes('mjx-container[jax="CHTML"]'),
 				true,