fix: Markdown usage when deeply nested on a page (#303)

* fix: Markdown component deeply nested on a page

* chore: add changeset

.changeset/strong-geese-boil.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes a few small bugs with the `Markdown` component when there are multiple instances on the same page

packages/astro/src/compiler/codegen/index.ts

@@ -440,7 +440,7 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile
       let { content: rendered } = await renderMarkdown(dedent(md), {
         ...(markdownOptions as AstroMarkdownOptions),
         mode: 'astro-md',
-        $: { scopedClassName: scopedClassName.slice(1, -1) },
+        $: { scopedClassName: scopedClassName && scopedClassName.slice(1, -1) },
       });
 
       // 1. Parse
@@ -454,7 +454,9 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile
       });
 
       // 3. Codegen
-      const result = await compileHtml(ast.html, { ...state, markers: { ...state.markers, insideMarkdown: false } }, compileOptions);
+      // Reset state before compilation
+      state.markers.insideMarkdown = false;
+      const result = await compileHtml(ast.html, state, compileOptions);
 
       buffers.out += ',' + result;
       buffers.markdown = '';
@@ -645,6 +647,7 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile
           case 'InlineComponent': {
             if (curr === 'markdown' && buffers.markdown !== '') {
               await pushMarkdownToBuffer();
+              return;
             }
             if (paren !== -1) {
               buffers.out += ')';

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

@@ -45,6 +45,21 @@ Markdown('Bundles client-side JS for prod', async (context) => {
   assert.ok(counterJs, 'Counter.jsx is bundled for prod');
 });
 
+Markdown('Renders content correctly when deeply nested on a page', async ({ runtime }) => {
+  const result = await runtime.load('/deep');
+  if (result.error) throw new Error(result.error);
+
+  const $ = doc(result.contents);
+  assert.equal($('#deep').children().length, 3, 'Rendered all children');
+  assert.equal($('.a').children().length, 1, 'Only rendered title in each section');
+  assert.equal($('.b').children().length, 1, 'Only rendered title in each section');
+  assert.equal($('.c').children().length, 1, 'Only rendered title in each section');
+
+  assert.equal($('.a > h2').text(), 'A', 'Rendered title in correct section');
+  assert.equal($('.b > h2').text(), 'B', 'Rendered title in correct section');
+  assert.equal($('.c > h2').text(), 'C', 'Rendered title in correct section');
+});
+
 Markdown('Renders dynamic content though the content attribute', async ({ runtime }) => {
   const result = await runtime.load('/external');
   if (result.error) throw new Error(result.error);

packages/astro/test/fixtures/astro-markdown/src/pages/deep.astro

@@ -0,0 +1,29 @@
+---
+import { Markdown } from 'astro/components';
+import Layout from '../layouts/content.astro';
+import Hello from '../components/Hello.jsx';
+import Counter from '../components/Counter.jsx';
+
+export const title = 'My Blog Post';
+export const description = 'This is a post about some stuff.';
+---
+
+<div id="deep">
+  <section class="a">
+    <Markdown>
+        ## A
+    </Markdown>
+  </section>
+
+  <section class="b">
+    <Markdown>
+        ## B
+    </Markdown>
+  </section>
+
+  <section class="c">
+    <Markdown>
+        ## C
+    </Markdown>
+  </section>
+</div>