Fix left curly bracket formatting (#1094)

* Fix curly braces

* Add tests

* chore: formatting

* sstyle: update fix to be more explicit and ireduce chance of false positive

* style: use suggestions

Co-authored-by: mmarkelov <maks-markel@mail.ru>

5 files changed, 29 insertions, 4 deletions

diff --git a/packages/astro/src/compiler/codegen/index.ts b/packages/astro/src/compiler/codegen/index.ts
index 3d7e2de9e..9c4f3bf50 100644
--- a/packages/astro/src/compiler/codegen/index.ts
+++ b/packages/astro/src/compiler/codegen/index.ts
@@ -768,7 +768,7 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile
             }
             if (parent.name === 'code') {
               // Special case, escaped { characters from markdown content
-              text = node.raw.replace(/{/g, '{');
+              text = node.raw.replace(/ASTRO_ESCAPED_LEFT_CURLY_BRACKET\0/g, '{');
             }
             buffers[curr] += ',' + JSON.stringify(text);
             return;
diff --git a/packages/astro/src/compiler/transform/prism.ts b/packages/astro/src/compiler/transform/prism.ts
index 9fe241810..6c82c8f6a 100644
--- a/packages/astro/src/compiler/transform/prism.ts
+++ b/packages/astro/src/compiler/transform/prism.ts
@@ -11,14 +11,14 @@ function escape(code: string) {
     .replace(/[`$]/g, (match) => {
       return '\\' + match;
     })
-    .replace(/{/g, '{');
+    .replace(/ASTRO_ESCAPED_LEFT_CURLY_BRACKET\0/g, '{');
 }
 
 /** Unescape { characters transformed by Markdown generation */
 function unescapeCode(code: TemplateNode) {
   code.children = code.children?.map((child) => {
     if (child.type === 'Text') {
-      return { ...child, raw: child.raw.replace(/{/g, '{') };
+      return { ...child, raw: child.raw.replace(/ASTRO_ESCAPED_LEFT_CURLY_BRACKET\0/g, '{') };
     }
     return child;
   });
diff --git a/packages/astro/test/astro-markdown.test.js b/packages/astro/test/astro-markdown.test.js
index 72b976b73..baf39fb3e 100644
--- a/packages/astro/test/astro-markdown.test.js
+++ b/packages/astro/test/astro-markdown.test.js
@@ -90,6 +90,17 @@ Markdown('Renders dynamic content though the content attribute', async ({ runtim
   assert.ok($('#inner').is('[class]'), 'Scoped class passed down');
 });
 
+Markdown('Renders curly braces correctly', async ({ runtime }) => {
+  const result = await runtime.load('/braces');
+  assert.ok(!result.error, `build error: ${result.error}`);
+
+  const $ = doc(result.contents);
+  assert.equal($('code').length, 3, 'Rendered curly braces markdown content');
+  assert.equal($('code:first-child').text(), '({})', 'Rendered curly braces markdown content');
+  assert.equal($('code:nth-child(2)').text(), '{...props}', 'Rendered curly braces markdown content');
+  assert.equal($('code:last-child').text(), '{/* JavaScript */}', 'Rendered curly braces markdown content');
+});
+
 Markdown('Does not close parent early when using content attribute (#494)', async ({ runtime }) => {
   const result = await runtime.load('/close');
   assert.ok(!result.error, `build error: ${result.error}`);
diff --git a/packages/astro/test/fixtures/astro-markdown/src/pages/braces.astro b/packages/astro/test/fixtures/astro-markdown/src/pages/braces.astro
new file mode 100644
index 000000000..ff56ef3ec
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-markdown/src/pages/braces.astro
@@ -0,0 +1,14 @@
+---
+import { Markdown } from 'astro/components';
+const title = 'My Blog Post';
+const description = 'This is a post about some stuff.';
+---
+
+<Markdown>
+  ## Interesting Topic
+
+  `({})`
+  `{...props}` 
+  `{/* JavaScript */}`
+  
+</Markdown>
diff --git a/packages/markdown-support/src/codeblock.ts b/packages/markdown-support/src/codeblock.ts
index 2f48c6631..3f3e8237c 100644
--- a/packages/markdown-support/src/codeblock.ts
+++ b/packages/markdown-support/src/codeblock.ts
@@ -21,7 +21,7 @@ export function rehypeCodeBlock() {
   const escapeCode = (code: any) => {
     code.children = code.children.map((child: any) => {
       if (child.type === 'text') {
-        return { ...child, value: child.value.replace(/\{/g, '&#123;') };
+        return { ...child, value: child.value.replace(/\{/g, 'ASTRO_ESCAPED_LEFT_CURLY_BRACKET\0') };
       }
       return child;
     });