withastro · ascorbic · Jan 17, 2025 · Jan 17, 2025
diff --git a/.changeset/warm-pandas-lick.md b/.changeset/warm-pandas-lick.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes a bug that caused Astro to attempt to inject environment variables into non-source files, causing performance problems and broken builds
diff --git a/packages/astro/src/env/vite-plugin-import-meta-env.ts b/packages/astro/src/env/vite-plugin-import-meta-env.ts
@@ -1,6 +1,7 @@
 import { transform } from 'esbuild';
 import MagicString from 'magic-string';
 import type * as vite from 'vite';
+import { createFilter, isCSSRequest } from 'vite';
 import type { EnvLoader } from './env-loader.js';
 
 interface EnvPluginOptions {
@@ -71,6 +72,7 @@ export function importMetaEnv({ envLoader }: EnvPluginOptions): vite.Plugin {
 	let isDev: boolean;
 	let devImportMetaEnvPrepend: string;
 	let viteConfig: vite.ResolvedConfig;
+	const filter = createFilter(null, ['**/*.html', '**/*.htm', '**/*.json']);
 	return {
 		name: 'astro:vite-plugin-env',
 		config(_, { command }) {
@@ -96,11 +98,17 @@ export function importMetaEnv({ envLoader }: EnvPluginOptions): vite.Plugin {
 				}
 			}
 		},
+
 		transform(source, id, options) {
-			if (!options?.ssr || !source.includes('import.meta.env')) {
+			if (
+				!options?.ssr ||
+				!source.includes('import.meta.env') ||
+				!filter(id) ||
+				isCSSRequest(id) ||
+				viteConfig.assetsInclude(id)
+			) {
 				return;
 			}
-
 			// Find matches for *private* env and do our own replacement.
 			// Env is retrieved before process.env is populated by astro:env
 			// so that import.meta.env is first replaced by values, not process.env

diff --git a/packages/astro/test/astro-envs.test.js b/packages/astro/test/astro-envs.test.js
@@ -120,5 +120,14 @@ describe('Environment Variables', () => {
 			let $ = cheerio.load(indexHtml);
 			assert.equal($('#base-url').text(), '/blog');
 		});
+
+		it('does not inject env into imported asset files', async () => {
+			let res = await fixture.fetch('/blog/');
+			assert.equal(res.status, 200);
+			let indexHtml = await res.text();
+			let $ = cheerio.load(indexHtml);
+			assert.equal($('#env').text(), 'A MYSTERY');
+			assert.equal($('#css').text(), 'good');
+		});
 	});
 });
diff --git a/packages/astro/test/fixtures/astro-envs/.env b/packages/astro/test/fixtures/astro-envs/.env
@@ -1,2 +1,3 @@
 SECRET_PLACE=CLUB_33
 PUBLIC_PLACE=BLUE_BAYOU
+KITTY=CHESHIRE
diff --git a/packages/astro/test/fixtures/astro-envs/astro.config.mjs b/packages/astro/test/fixtures/astro-envs/astro.config.mjs
@@ -6,4 +6,18 @@ export default defineConfig({
 	site: 'http://example.com',
 	base: '/blog',
 	integrations: [vue()],
+	vite: {
+		plugins: [
+			{
+				// Plugin so that we can see in the tests whether the env has been injected
+				name: 'export-env-plugin',
+				enforce: 'post',
+				transform(code, id) {
+					if (id.endsWith('.json')) {
+						return `${code}\n export const env = ${JSON.stringify(code.includes('CHESHIRE') || code.includes('process.env.KITTY') ? 'CHESHIRE' : 'A MYSTERY')}`;
+					}
+				},
+			},
+		],
+	},
 });
diff --git a/packages/astro/test/fixtures/astro-envs/src/data/cats.json b/packages/astro/test/fixtures/astro-envs/src/data/cats.json
@@ -0,0 +1,27 @@
+{
+  "tiddles": {
+    "name": "Tiddles",
+    "age": 3,
+    "colour": "black"
+  },
+  "mittens": {
+    "name": "Mittens",
+    "age": 5,
+    "colour": "white"
+  },
+  "fluffy": {
+    "name": "Fluffy",
+    "age": 2,
+    "colour": "grey"
+  },
+  "whiskers": {
+    "name": "Whiskers",
+    "age": 4,
+    "colour": "tabby"
+  },
+  "bobby-env": {
+    "name": "import.meta.env.KITTY",
+    "age": 1,
+    "colour": "calico"
+  }
+}
diff --git a/packages/astro/test/fixtures/astro-envs/src/data/hello.css b/packages/astro/test/fixtures/astro-envs/src/data/hello.css
@@ -0,0 +1,4 @@
+/* Just mentioning import.meta.env is enough to trigger this */
+body {
+	background-color: red;
+}
diff --git a/packages/astro/test/fixtures/astro-envs/src/data/hi.md b/packages/astro/test/fixtures/astro-envs/src/data/hi.md
@@ -0,0 +1,7 @@
+---
+---
+<h1>import.meta.env.KITTEN</h1>
+
+```js
+console.log(import.meta.env.KITTEN)
+```
diff --git a/packages/astro/test/fixtures/astro-envs/src/pages/index.astro b/packages/astro/test/fixtures/astro-envs/src/pages/index.astro
@@ -1,8 +1,13 @@
 ---
 import Client from '../components/Client.vue';
+import css from '../data/hello.css?inline';
+const {env} = await import('../data/cats.json');
 ---
+<head />
 <environment-variable>{import.meta.env.PUBLIC_PLACE}</environment-variable>
 <environment-variable>{import.meta.env.SECRET_PLACE}</environment-variable>
 <environment-variable>{import.meta.env.SITE}</environment-variable>
 <environment-variable id="base-url">{import.meta.env.BASE_URL}</environment-variable>
+<environment-variable id="env">{env}</environment-variable>
+<environment-variable id="css">{css.includes('SECRET_PLACE') ? 'bad' : 'good' }</environment-variable>
 <Client client:load />
diff --git a/packages/astro/test/fixtures/astro-envs/src/pages/info.html b/packages/astro/test/fixtures/astro-envs/src/pages/info.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Document</title>
+</head>
+
+<body>
+	Did you know import.meta.env is a magic word?
+</body>
+
+</html>