Fix: markdown JSX expression inconsistencies (#3152)

* fix: remove micromark-extension-mdx-expression to unbreak JSX expressions

* chore: changeset

* deps: update lockfile

* tests: jsx expressions in markdown

.changeset/purple-timers-speak.md

@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/markdown-remark': patch
+---
+
+Fix JSX expression inconsistencies within markdown files

packages/astro/test/astro-markdown.test.js

@@ -23,6 +23,17 @@ describe('Astro Markdown', () => {
 		expect($('#test').length).to.be.ok;
 	});
 
+	it('Can parse JSX expressions in markdown pages', async () => {
+		const html = await fixture.readFile('/jsx-expressions/index.html');
+		const $ = cheerio.load(html);
+
+		expect($('h2').html()).to.equal('Blog Post with JSX expressions')
+		expect($('p').first().html()).to.equal('JSX at the start of the line!')
+		for (let listItem of ['test-1', 'test-2', 'test-3']) {
+			expect($(`#${listItem}`).html()).to.equal(`\n${listItem}\n`)
+		}
+	})
+
 	it('Can load more complex jsxy stuff', async () => {
 		const html = await fixture.readFile('/complex/index.html');
 		const $ = cheerio.load(html);

packages/astro/test/fixtures/astro-markdown/src/pages/jsx-expressions.md

@@ -0,0 +1,11 @@
+---
+title: Blog Post with JSX expressions
+paragraph: JSX at the start of the line!
+list: ['test-1', 'test-2', 'test-3']
+---
+
+## {frontmatter.title}
+
+{frontmatter.paragraph}
+
+{frontmatter.list.map(item => <p id={item}>{item}</p>)}

packages/markdown/remark/package.json

@@ -29,7 +29,6 @@
     "mdast-util-mdx-expression": "^1.2.0",
     "mdast-util-mdx-jsx": "^1.2.0",
     "mdast-util-to-string": "^3.1.0",
-    "micromark-extension-mdx-expression": "^1.0.3",
     "micromark-extension-mdx-jsx": "^1.0.3",
     "prismjs": "^1.27.0",
     "rehype-raw": "^6.1.1",

packages/markdown/remark/src/remark-expressions.ts

@@ -1,13 +1,11 @@
 // Vite bug: dynamically import() modules needed for CJS. Cache in memory to keep side effects
-let mdxExpression: any;
 let mdxExpressionFromMarkdown: any;
 let mdxExpressionToMarkdown: any;
 
 export function remarkExpressions(this: any, options: any) {
 	let settings = options || {};
 	let data = this.data();
 
-	add('micromarkExtensions', mdxExpression({}));
 	add('fromMarkdownExtensions', mdxExpressionFromMarkdown);
 	add('toMarkdownExtensions', mdxExpressionToMarkdown);
 
@@ -19,10 +17,6 @@ export function remarkExpressions(this: any, options: any) {
 }
 
 export async function loadRemarkExpressions() {
-	if (!mdxExpression) {
-		const micromarkMdxExpression = await import('micromark-extension-mdx-expression');
-		mdxExpression = micromarkMdxExpression.mdxExpression;
-	}
 	if (!mdxExpressionFromMarkdown || !mdxExpressionToMarkdown) {
 		const mdastUtilMdxExpression = await import('mdast-util-mdx-expression');
 		mdxExpressionFromMarkdown = mdastUtilMdxExpression.mdxExpressionFromMarkdown;