Handle edge case in jsx-runtime (#4158)

* fix(#4135): handle edge case in jsx-runtime

* test: add mdx test case

* chore: fix utils reference

* test: fix mdx escape test

Co-authored-by: Nate Moore <nate@astro.build>

6 files changed, 59 insertions, 0 deletions

diff --git a/packages/integrations/mdx/test/fixtures/mdx-escape/src/components/Em.astro b/packages/integrations/mdx/test/fixtures/mdx-escape/src/components/Em.astro
new file mode 100644
index 000000000..8166c0586
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-escape/src/components/Em.astro
@@ -0,0 +1,7 @@
+<em><slot/></em>
+
+<style>
+  em {
+    color: red;
+  }
+</style>
diff --git a/packages/integrations/mdx/test/fixtures/mdx-escape/src/components/P.astro b/packages/integrations/mdx/test/fixtures/mdx-escape/src/components/P.astro
new file mode 100644
index 000000000..e29ac6d8f
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-escape/src/components/P.astro
@@ -0,0 +1 @@
+<p><slot /></p>
diff --git a/packages/integrations/mdx/test/fixtures/mdx-escape/src/components/Title.astro b/packages/integrations/mdx/test/fixtures/mdx-escape/src/components/Title.astro
new file mode 100644
index 000000000..333ec04a2
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-escape/src/components/Title.astro
@@ -0,0 +1 @@
+<h1><slot/></h1>
diff --git a/packages/integrations/mdx/test/fixtures/mdx-escape/src/pages/html-tag.mdx b/packages/integrations/mdx/test/fixtures/mdx-escape/src/pages/html-tag.mdx
new file mode 100644
index 000000000..e668c0dc7
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-escape/src/pages/html-tag.mdx
@@ -0,0 +1,5 @@
+import P from '../components/P.astro';
+import Em from '../components/Em.astro';
+
+<P>Render <Em>Me</Em></P>
+<P><Em>Me</Em></P>
diff --git a/packages/integrations/mdx/test/fixtures/mdx-escape/src/pages/index.mdx b/packages/integrations/mdx/test/fixtures/mdx-escape/src/pages/index.mdx
new file mode 100644
index 000000000..d1c6cec9d
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-escape/src/pages/index.mdx
@@ -0,0 +1,13 @@
+import P from '../components/P.astro';
+import Em from '../components/Em.astro';
+import Title from '../components/Title.astro';
+
+export const components = { p: P, em: Em, h1: Title };
+
+# Hello _there_
+
+# _there_
+
+Hello _there_
+
+_there_
diff --git a/packages/integrations/mdx/test/mdx-escape.test.js b/packages/integrations/mdx/test/mdx-escape.test.js
new file mode 100644
index 000000000..d2a4e79ca
--- /dev/null
+++ b/packages/integrations/mdx/test/mdx-escape.test.js
@@ -0,0 +1,32 @@
+import mdx from '@astrojs/mdx';
+
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+const FIXTURE_ROOT = new URL('./fixtures/mdx-escape/', import.meta.url);
+
+describe('MDX frontmatter', () => {
+	let fixture;
+	before(async () => {
+		fixture = await loadFixture({
+			root: FIXTURE_ROOT,
+			integrations: [mdx()],
+		});
+		await fixture.build();
+	});
+
+	it('does not have unescaped HTML at top-level', async () => {
+		const html = await fixture.readFile('/index.html');
+		const { document } = parseHTML(html);
+
+		expect(document.body.textContent).to.not.include('<em');
+	});
+
+	it('does not have unescaped HTML inside html tags', async () => {
+		const html = await fixture.readFile('/html-tag/index.html');
+		const { document } = parseHTML(html);
+
+		expect(document.body.textContent).to.not.include('<em');
+	});
+});