Feat: new `legacy.astroFlavoredMarkdown` flag (#4016)

* refactor: add legacy.jsxInMarkdown flag to config

* refactor: jsxInMarkdown -> astroFlavoredMarkdown

* refactor: remove `markdown.mode`

* feat: wire up legacy.astroFlavoredMarkdown

* test: add legacy to astro-markdown fixture

* test: remark autolinking

* test: remark components

* test: remark expressions

* test: remark strictness

* chore: remove "mode" from md component

* chore: remove "mode: md" from tests

* Fixing legacy MD tests, adding named slots tests for MDX pages

* chore: update lock file

* WIP: debugging named slots in MDX

* fix: handle named slots in MDX properly

* chore: re-enabling slots tests for MDX pages

* fixing test validation for svelte & vue

* removing unused Tailwind test

* legacy flag for Markdown component tests

* adding is:raw to Markdown component test

* adding is:raw to all Markdown component test fixtures

* can't use is:raw when nesting markdown components

* another nested test can't use is:raw

* one more <Markdown> test fix

* fixing another JSX markdown component test

* chore: add changeset

* e2e tests were missing the legacy flag

* removing the broken tailwind E2E markdown page

Co-authored-by: Tony Sullivan <tony.f.sullivan@outlook.com>
Co-authored-by: Nate Moore <nate@astro.build>

4 files changed, 139 insertions, 117 deletions

diff --git a/packages/markdown/remark/test/autolinking.test.js b/packages/markdown/remark/test/autolinking.test.js
index 513d12ac6..61117bddc 100644
--- a/packages/markdown/remark/test/autolinking.test.js
+++ b/packages/markdown/remark/test/autolinking.test.js
@@ -2,91 +2,107 @@ import { renderMarkdown } from '../dist/index.js';
 import chai from 'chai';
 
 describe('autolinking', () => {
-	it('autolinks URLs starting with a protocol in plain text', async () => {
-		const { code } = await renderMarkdown(`See https://example.com for more.`, {});
-
-		chai
-			.expect(code.replace(/\n/g, ''))
-			.to.equal(`<p>See <a href="https://example.com">https://example.com</a> for more.</p>`);
-	});
-
-	it('autolinks URLs starting with "www." in plain text', async () => {
-		const { code } = await renderMarkdown(`See www.example.com for more.`, {});
-
-		chai
-			.expect(code.trim())
-			.to.equal(`<p>See <a href="http://www.example.com">www.example.com</a> for more.</p>`);
-	});
-
-	it('does not autolink URLs in code blocks', async () => {
-		const { code } = await renderMarkdown(
-			'See `https://example.com` or `www.example.com` for more.',
-			{}
-		);
-
-		chai
-			.expect(code.trim())
-			.to.equal(
-				`<p>See <code is:raw>https://example.com</code> or ` +
-					`<code is:raw>www.example.com</code> for more.</p>`
+	describe('plain md', () => {
+		it('autolinks URLs starting with a protocol in plain text', async () => {
+			const { code } = await renderMarkdown(`See https://example.com for more.`, {});
+	
+			chai
+				.expect(code.replace(/\n/g, ''))
+				.to.equal(`<p>See <a href="https://example.com">https://example.com</a> for more.</p>`);
+		});
+	
+		it('autolinks URLs starting with "www." in plain text', async () => {
+			const { code } = await renderMarkdown(`See www.example.com for more.`, {});
+	
+			chai
+				.expect(code.trim())
+				.to.equal(`<p>See <a href="http://www.example.com">www.example.com</a> for more.</p>`);
+		});
+	
+		it('does not autolink URLs in code blocks', async () => {
+			const { code } = await renderMarkdown(
+				'See `https://example.com` or `www.example.com` for more.',
+				{}
 			);
+	
+			chai
+				.expect(code.trim())
+				.to.equal(
+					`<p>See <code>https://example.com</code> or ` +
+						`<code>www.example.com</code> for more.</p>`
+				);
+		});
 	});
 
-	it('does not autolink URLs in fenced code blocks', async () => {
-		const { code } = await renderMarkdown(
-			'Example:\n```\nGo to https://example.com or www.example.com now.\n```',
-			{}
-		);
-
-		chai
-			.expect(code)
-			.to.contain(`<pre is:raw`)
-			.to.contain(`Go to https://example.com or www.example.com now.`);
-	});
-
-	it('does not autolink URLs starting with a protocol when nested inside links', async () => {
-		const { code } = await renderMarkdown(
-			`See [http://example.com](http://example.com) or ` +
-				`<a test href="https://example.com">https://example.com</a>`,
-			{}
-		);
+	describe('astro-flavored md', () => {
+		const renderAstroMd = text => renderMarkdown(text, { isAstroFlavoredMd: true });
 
-		chai
-			.expect(code.replace(/\n/g, ''))
-			.to.equal(
-				`<p>See <a href="http://example.com">http://example.com</a> or ` +
-					`<a test href="https://example.com">https://example.com</a></p>`
+		it('does not autolink URLs in code blocks', async () => {
+			const { code } = await renderAstroMd(
+				'See `https://example.com` or `www.example.com` for more.',
+				{}
 			);
-	});
-
-	it('does not autolink URLs starting with "www." when nested inside links', async () => {
-		const { code } = await renderMarkdown(
-			`See [www.example.com](https://www.example.com) or ` +
-				`<a test href="https://www.example.com">www.example.com</a>`,
-			{}
-		);
-
-		chai
-			.expect(code.replace(/\n/g, ''))
-			.to.equal(
-				`<p>See <a href="https://www.example.com">www.example.com</a> or ` +
-					`<a test href="https://www.example.com">www.example.com</a></p>`
+	
+			chai
+				.expect(code.trim())
+				.to.equal(
+					`<p>See <code is:raw>https://example.com</code> or ` +
+						`<code is:raw>www.example.com</code> for more.</p>`
+				);
+		});
+	
+		it('does not autolink URLs in fenced code blocks', async () => {
+			const { code } = await renderAstroMd(
+				'Example:\n```\nGo to https://example.com or www.example.com now.\n```'
 			);
-	});
-
-	it('does not autolink URLs when nested several layers deep inside links', async () => {
-		const { code } = await renderMarkdown(
-			`<a href="https://www.example.com">**Visit _our www.example.com or ` +
-				`http://localhost pages_ for more!**</a>`,
-			{}
-		);
-
-		chai
-			.expect(code.replace(/\n/g, ''))
-			.to.equal(
-				`<a href="https://www.example.com"><strong>` +
-					`Visit <em>our www.example.com or http://localhost pages</em> for more!` +
-					`</strong></a>`
+	
+			chai
+				.expect(code)
+				.to.contain(`<pre is:raw`)
+				.to.contain(`Go to https://example.com or www.example.com now.`);
+		});
+	
+		it('does not autolink URLs starting with a protocol when nested inside links', async () => {
+			const { code } = await renderAstroMd(
+				`See [http://example.com](http://example.com) or ` +
+					`<a test href="https://example.com">https://example.com</a>`
 			);
-	});
+	
+			chai
+				.expect(code.replace(/\n/g, ''))
+				.to.equal(
+					`<p>See <a href="http://example.com">http://example.com</a> or ` +
+						`<a test href="https://example.com">https://example.com</a></p>`
+				);
+		});
+	
+		it('does not autolink URLs starting with "www." when nested inside links', async () => {
+			const { code } = await renderAstroMd(
+				`See [www.example.com](https://www.example.com) or ` +
+					`<a test href="https://www.example.com">www.example.com</a>`
+			);
+	
+			chai
+				.expect(code.replace(/\n/g, ''))
+				.to.equal(
+					`<p>See <a href="https://www.example.com">www.example.com</a> or ` +
+						`<a test href="https://www.example.com">www.example.com</a></p>`
+				);
+		});
+	
+		it('does not autolink URLs when nested several layers deep inside links', async () => {
+			const { code } = await renderAstroMd(
+				`<a href="https://www.example.com">**Visit _our www.example.com or ` +
+					`http://localhost pages_ for more!**</a>`
+			);
+	
+			chai
+				.expect(code.replace(/\n/g, ''))
+				.to.equal(
+					`<a href="https://www.example.com"><strong>` +
+						`Visit <em>our www.example.com or http://localhost pages</em> for more!` +
+						`</strong></a>`
+				);
+		});
+	})
 });
diff --git a/packages/markdown/remark/test/components.test.js b/packages/markdown/remark/test/components.test.js
index 4e06d7301..e60469426 100644
--- a/packages/markdown/remark/test/components.test.js
+++ b/packages/markdown/remark/test/components.test.js
@@ -2,32 +2,34 @@ import { renderMarkdown } from '../dist/index.js';
 import chai from 'chai';
 
 describe('components', () => {
+	const renderAstroMd = (text) => renderMarkdown(text, { isAstroFlavoredMd: true });
+
 	it('should be able to serialize string', async () => {
-		const { code } = await renderMarkdown(`<Component str="cool!" />`, {});
+		const { code } = await renderAstroMd(`<Component str="cool!" />`);
 
 		chai.expect(code).to.equal(`<Component str="cool!" />`);
 	});
 
 	it('should be able to serialize boolean attribute', async () => {
-		const { code } = await renderMarkdown(`<Component bool={true} />`, {});
+		const { code } = await renderAstroMd(`<Component bool={true} />`);
 
 		chai.expect(code).to.equal(`<Component bool={true} />`);
 	});
 
 	it('should be able to serialize array', async () => {
-		const { code } = await renderMarkdown(`<Component prop={["a", "b", "c"]} />`, {});
+		const { code } = await renderAstroMd(`<Component prop={["a", "b", "c"]} />`);
 
 		chai.expect(code).to.equal(`<Component prop={["a", "b", "c"]} />`);
 	});
 
 	it('should be able to serialize object', async () => {
-		const { code } = await renderMarkdown(`<Component prop={{ a: 0, b: 1, c: 2 }} />`, {});
+		const { code } = await renderAstroMd(`<Component prop={{ a: 0, b: 1, c: 2 }} />`);
 
 		chai.expect(code).to.equal(`<Component prop={{ a: 0, b: 1, c: 2 }} />`);
 	});
 
 	it('should be able to serialize empty attribute', async () => {
-		const { code } = await renderMarkdown(`<Component empty />`, {});
+		const { code } = await renderAstroMd(`<Component empty />`);
 
 		chai.expect(code).to.equal(`<Component empty />`);
 	});
@@ -35,25 +37,25 @@ describe('components', () => {
 	// Notable omission: shorthand attribute
 
 	it('should be able to serialize spread attribute', async () => {
-		const { code } = await renderMarkdown(`<Component {...spread} />`, {});
+		const { code } = await renderAstroMd(`<Component {...spread} />`);
 
 		chai.expect(code).to.equal(`<Component {...spread} />`);
 	});
 
 	it('should allow client:* directives', async () => {
-		const { code } = await renderMarkdown(`<Component client:load />`, {});
+		const { code } = await renderAstroMd(`<Component client:load />`);
 
 		chai.expect(code).to.equal(`<Component client:load />`);
 	});
 
 	it('should normalize children', async () => {
-		const { code } = await renderMarkdown(`<Component bool={true}>Hello world!</Component>`, {});
+		const { code } = await renderAstroMd(`<Component bool={true}>Hello world!</Component>`);
 
 		chai.expect(code).to.equal(`<Component bool={true}>Hello world!</Component>`);
 	});
 
 	it('should be able to nest components', async () => {
-		const { code } = await renderMarkdown(
+		const { code } = await renderAstroMd(
 			`<Component bool={true}><Component>Hello world!</Component></Component>`,
 			{}
 		);
@@ -64,7 +66,7 @@ describe('components', () => {
 	});
 
 	it('should allow markdown without many spaces', async () => {
-		const { code } = await renderMarkdown(
+		const { code } = await renderAstroMd(
 			`<Component>
 # Hello world!
 </Component>`,
diff --git a/packages/markdown/remark/test/expressions.test.js b/packages/markdown/remark/test/expressions.test.js
index 828f70561..b2cb1a73d 100644
--- a/packages/markdown/remark/test/expressions.test.js
+++ b/packages/markdown/remark/test/expressions.test.js
@@ -1,21 +1,23 @@
 import { renderMarkdown } from '../dist/index.js';
-import chai, { expect } from 'chai';
+import chai from 'chai';
 
 describe('expressions', () => {
+	const renderAstroMd = (text, opts) => renderMarkdown(text, { isAstroFlavoredMd: true, ...opts });
+
 	it('should be able to serialize bare expression', async () => {
-		const { code } = await renderMarkdown(`{a}`, {});
+		const { code } = await renderAstroMd(`{a}`, {});
 
 		chai.expect(code).to.equal(`{a}`);
 	});
 
 	it('should be able to serialize expression inside component', async () => {
-		const { code } = await renderMarkdown(`<Component>{a}</Component>`, {});
+		const { code } = await renderAstroMd(`<Component>{a}</Component>`, {});
 
 		chai.expect(code).to.equal(`<Component>{a}</Component>`);
 	});
 
 	it('should be able to serialize expression inside markdown', async () => {
-		const { code } = await renderMarkdown(`# {frontmatter.title}`, {});
+		const { code } = await renderAstroMd(`# {frontmatter.title}`, {});
 
 		chai
 			.expect(code)
@@ -23,7 +25,7 @@ describe('expressions', () => {
 	});
 
 	it('should be able to serialize complex expression inside markdown', async () => {
-		const { code } = await renderMarkdown(`# Hello {frontmatter.name}`, {});
+		const { code } = await renderAstroMd(`# Hello {frontmatter.name}`, {});
 
 		chai
 			.expect(code)
@@ -31,7 +33,7 @@ describe('expressions', () => {
 	});
 
 	it('should be able to serialize complex expression with markup inside markdown', async () => {
-		const { code } = await renderMarkdown(`# Hello <span>{frontmatter.name}</span>`, {});
+		const { code } = await renderAstroMd(`# Hello <span>{frontmatter.name}</span>`, {});
 
 		chai
 			.expect(code)
@@ -41,7 +43,7 @@ describe('expressions', () => {
 	});
 
 	it('should be able to avoid evaluating JSX-like expressions in an inline code & generate a slug for id', async () => {
-		const { code } = await renderMarkdown(`# \`{frontmatter.title}\``, {});
+		const { code } = await renderAstroMd(`# \`{frontmatter.title}\``, {});
 
 		chai
 			.expect(code)
@@ -49,7 +51,7 @@ describe('expressions', () => {
 	});
 
 	it('should be able to avoid evaluating JSX-like expressions in inline codes', async () => {
-		const { code } = await renderMarkdown(`# \`{ foo }\` is a shorthand for \`{ foo: foo }\``, {});
+		const { code } = await renderAstroMd(`# \`{ foo }\` is a shorthand for \`{ foo: foo }\``, {});
 
 		chai
 			.expect(code)
@@ -59,7 +61,7 @@ describe('expressions', () => {
 	});
 
 	it('should be able to avoid evaluating JSX-like expressions & escape HTML tag characters in inline codes', async () => {
-		const { code } = await renderMarkdown(
+		const { code } = await renderAstroMd(
 			`###### \`{}\` is equivalent to \`Record<never, never>\` <small>(at TypeScript v{frontmatter.version})</small>`,
 			{}
 		);
@@ -72,7 +74,7 @@ describe('expressions', () => {
 	});
 
 	it('should be able to encode ampersand characters in code blocks', async () => {
-		const { code } = await renderMarkdown(
+		const { code } = await renderAstroMd(
 			'The ampersand in `&nbsp;` must be encoded in code blocks.',
 			{}
 		);
@@ -85,7 +87,7 @@ describe('expressions', () => {
 	});
 
 	it('should be able to encode ampersand characters in fenced code blocks', async () => {
-		const { code } = await renderMarkdown(`
+		const { code } = await renderAstroMd(`
 		\`\`\`md
 			The ampersand in \`&nbsp;\` must be encoded in code blocks.
 		\`\`\`
@@ -95,7 +97,7 @@ describe('expressions', () => {
 	});
 
 	it('should be able to serialize function expression', async () => {
-		const { code } = await renderMarkdown(
+		const { code } = await renderAstroMd(
 			`{frontmatter.list.map(item => <p id={item}>{item}</p>)}`,
 			{}
 		);
@@ -104,13 +106,13 @@ describe('expressions', () => {
 	});
 
 	it('should unwrap HTML comments in inline code blocks', async () => {
-		const { code } = await renderMarkdown(`\`{/*<!-- HTML comment -->*/}\``);
+		const { code } = await renderAstroMd(`\`{/*<!-- HTML comment -->*/}\``);
 
 		chai.expect(code).to.equal('<p><code is:raw>&lt;!-- HTML comment --&gt;</code></p>');
 	});
 
 	it('should unwrap HTML comments in code fences', async () => {
-		const { code } = await renderMarkdown(
+		const { code } = await renderAstroMd(
 			`
 			  \`\`\`
 				<!-- HTML comment -->
diff --git a/packages/markdown/remark/test/strictness.test.js b/packages/markdown/remark/test/strictness.test.js
index 5ba9c215a..c70872701 100644
--- a/packages/markdown/remark/test/strictness.test.js
+++ b/packages/markdown/remark/test/strictness.test.js
@@ -1,9 +1,11 @@
 import { renderMarkdown } from '../dist/index.js';
 import chai from 'chai';
 
-describe('strictness', () => {
+describe('strictness in Astro-flavored markdown', () => {
+	const renderAstroMd = (text, opts) => renderMarkdown(text, { isAstroFlavoredMd: true, ...opts });
+
 	it('should allow self-closing HTML tags (void elements)', async () => {
-		const { code } = await renderMarkdown(
+		const { code } = await renderAstroMd(
 			`Use self-closing void elements<br>like word<wbr>break and images: <img src="hi.jpg">`,
 			{}
 		);
@@ -17,25 +19,25 @@ describe('strictness', () => {
 	});
 
 	it('should allow attribute names starting with ":" after element names', async () => {
-		const { code } = await renderMarkdown(`<div :class="open ? '' : 'hidden'">Test</div>`, {});
+		const { code } = await renderAstroMd(`<div :class="open ? '' : 'hidden'">Test</div>`, {});
 
 		chai.expect(code.trim()).to.equal(`<div :class="open ? '' : 'hidden'">Test</div>`);
 	});
 
 	it('should allow attribute names starting with ":" after local element names', async () => {
-		const { code } = await renderMarkdown(`<div.abc :class="open ? '' : 'hidden'">x</div.abc>`, {});
+		const { code } = await renderAstroMd(`<div.abc :class="open ? '' : 'hidden'">x</div.abc>`, {});
 
 		chai.expect(code.trim()).to.equal(`<div.abc :class="open ? '' : 'hidden'">x</div.abc>`);
 	});
 
 	it('should allow attribute names starting with ":" after attribute names', async () => {
-		const { code } = await renderMarkdown(`<input type="text" disabled :placeholder="hi">`, {});
+		const { code } = await renderAstroMd(`<input type="text" disabled :placeholder="hi">`, {});
 
 		chai.expect(code.trim()).to.equal(`<input type="text" disabled :placeholder="hi" />`);
 	});
 
 	it('should allow attribute names starting with ":" after local attribute names', async () => {
-		const { code } = await renderMarkdown(
+		const { code } = await renderAstroMd(
 			`<input type="text" x-test:disabled :placeholder="hi">`,
 			{}
 		);
@@ -44,19 +46,19 @@ describe('strictness', () => {
 	});
 
 	it('should allow attribute names starting with ":" after attribute values', async () => {
-		const { code } = await renderMarkdown(`<input type="text" :placeholder="placeholder">`, {});
+		const { code } = await renderAstroMd(`<input type="text" :placeholder="placeholder">`, {});
 
 		chai.expect(code.trim()).to.equal(`<input type="text" :placeholder="placeholder" />`);
 	});
 
 	it('should allow attribute names starting with "@" after element names', async () => {
-		const { code } = await renderMarkdown(`<button @click="handleClick">Test</button>`, {});
+		const { code } = await renderAstroMd(`<button @click="handleClick">Test</button>`, {});
 
 		chai.expect(code.trim()).to.equal(`<button @click="handleClick">Test</button>`);
 	});
 
 	it('should allow attribute names starting with "@" after local element names', async () => {
-		const { code } = await renderMarkdown(
+		const { code } = await renderAstroMd(
 			`<button.local @click="handleClick">Test</button.local>`,
 			{}
 		);
@@ -65,7 +67,7 @@ describe('strictness', () => {
 	});
 
 	it('should allow attribute names starting with "@" after attribute names', async () => {
-		const { code } = await renderMarkdown(
+		const { code } = await renderAstroMd(
 			`<button disabled @click="handleClick">Test</button>`,
 			{}
 		);
@@ -74,7 +76,7 @@ describe('strictness', () => {
 	});
 
 	it('should allow attribute names starting with "@" after local attribute names', async () => {
-		const { code } = await renderMarkdown(
+		const { code } = await renderAstroMd(
 			`<button x-test:disabled @click="handleClick">Test</button>`,
 			{}
 		);
@@ -83,7 +85,7 @@ describe('strictness', () => {
 	});
 
 	it('should allow attribute names starting with "@" after attribute values', async () => {
-		const { code } = await renderMarkdown(
+		const { code } = await renderAstroMd(
 			`<button type="submit" @click="handleClick">Test</button>`,
 			{}
 		);
@@ -92,7 +94,7 @@ describe('strictness', () => {
 	});
 
 	it('should allow attribute names containing dots', async () => {
-		const { code } = await renderMarkdown(`<input x-on:input.debounce.500ms="fetchResults">`, {});
+		const { code } = await renderAstroMd(`<input x-on:input.debounce.500ms="fetchResults">`, {});
 
 		chai.expect(code.trim()).to.equal(`<input x-on:input.debounce.500ms="fetchResults" />`);
 	});