Fix using Vite env var names in Markdown (#3412) (#3471)

.changeset/old-pigs-exist.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix using Vite env var names in Markdown

packages/astro/src/vite-plugin-markdown/index.ts

@@ -86,11 +86,11 @@ export default function markdown({ config }: AstroPluginOptions): Plugin {
 				return {
 					code: `
 						// Static
-						export const frontmatter = ${JSON.stringify(frontmatter)};
+						export const frontmatter = ${escapeViteEnvReferences(JSON.stringify(frontmatter))};
 						export const file = ${JSON.stringify(fileId)};
 						export const url = ${JSON.stringify(fileUrl)};
 						export function rawContent() {
-							return ${JSON.stringify(rawContent)};
+							return ${escapeViteEnvReferences(JSON.stringify(rawContent))};
 						}
 						export async function compiledContent() {
 							return load().then((m) => m.compiledContent());
@@ -192,7 +192,7 @@ ${tsResult}`;
 					sourcefile: id,
 				});
 				return {
-					code,
+					code: escapeViteEnvReferences(code),
 					map: null,
 				};
 			}
@@ -201,3 +201,10 @@ ${tsResult}`;
 		},
 	};
 }
+
+// Converts the first dot in `import.meta.env.` to its Unicode escape sequence,
+// which prevents Vite from replacing strings like `import.meta.env.SITE`
+// in our JS representation of loaded Markdown files
+function escapeViteEnvReferences(code: string) {
+	return code.replace(/import\.meta\.env\./g, 'import\\u002Emeta.env.');
+}

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

@@ -256,4 +256,21 @@ describe('Astro Markdown', () => {
 			`<h2 id="with-components">With components</h2>\n<h3 id="non-hydrated">Non-hydrated</h3>\n<Hello name="Astro Naut" />\n<h3 id="hydrated">Hydrated</h3>\n<Counter client:load />\n<SvelteButton client:load />`
 		);
 	});
+
+	it('Allows referencing Vite env var names in markdown (#3412)', async () => {
+		const html = await fixture.readFile('/vite-env-vars/index.html');
+		const $ = cheerio.load(html);
+
+		// test 1: referencing an existing var name
+		expect($('code').eq(0).text()).to.equal('import.meta.env.SITE');
+		expect($('li').eq(0).text()).to.equal('import.meta.env.SITE');
+		expect($('code').eq(2).text()).to.contain('site: import.meta.env.SITE');
+		expect($('blockquote').text()).to.contain('import.meta.env.SITE');
+
+		// test 2: referencing a non-existing var name
+		expect($('code').eq(1).text()).to.equal('import.meta.env.TITLE');
+		expect($('li').eq(1).text()).to.equal('import.meta.env.TITLE');
+		expect($('code').eq(2).text()).to.contain('title: import.meta.env.TITLE');
+		expect($('blockquote').text()).to.contain('import.meta.env.TITLE');
+	});
 });

packages/astro/test/fixtures/astro-markdown/astro.config.mjs

@@ -4,5 +4,6 @@ import svelte from "@astrojs/svelte";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [preact(), svelte()]
+  integrations: [preact(), svelte()],
+  site: 'https://astro.build/',
 });

packages/astro/test/fixtures/astro-markdown/src/pages/vite-env-vars.md

@@ -0,0 +1,31 @@
+---
+title: Referencing Vite Env Vars like import.meta.env.SITE and import.meta.env.TITLE
+layout: ../layouts/content.astro
+---
+
+## Referencing the full name of Vite env vars
+
+You can get the configured site URL with `import.meta.env.SITE`.
+
+The variable `import.meta.env.TITLE` is not configured.
+
+This should also work outside of code blocks:
+- import.meta.env.SITE
+- import.meta.env.TITLE
+
+## Usage in fenced code blocks with syntax highlighting
+
+```js
+// src/pages/rss.xml.js
+import rss from '@astrojs/rss';
+
+export const get = () => rss({
+	site: import.meta.env.SITE,
+	title: import.meta.env.TITLE,
+	items: import.meta.glob('./**/*.md'),
+});
+```
+
+## Usage in frontmatter
+
+> frontmatter.title: {frontmatter.title}