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>

1 files changed, 15 insertions, 13 deletions

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" />`);
 	});