feat(env): Load env from .env.[browser] variants (#1078)

Co-authored-by: Aaron <[email protected]>

docs/guide/essentials/config/environment-variables.md

@@ -9,6 +9,10 @@ WXT supports [dotenv files the same way as Vite](https://vite.dev/guide/env-and-
 .env.local
 .env.[mode]
 .env.[mode].local
+.env.[browser]
+.env.[browser].local
+.env.[mode].[browser]
+.env.[mode].[browser].local
 ```
 
 And any environment variables listed inside them will be available at runtime:

packages/wxt/src/core/resolve-config.ts

@@ -74,7 +74,7 @@ export async function resolveConfig(
   const mode = mergedConfig.mode ?? COMMAND_MODES[command];
   const env: ConfigEnv = { browser, command, manifestVersion, mode };
 
-  loadEnv(mode); // Load any environment variables used below
+  loadEnv(mode, browser); // Load any environment variables used below
 
   const root = path.resolve(
     inlineConfig.root ?? userConfig.root ?? process.cwd(),

packages/wxt/src/core/utils/env.ts

@@ -1,10 +1,21 @@
 import { config } from 'dotenv';
+import type { TargetBrowser } from '../../types';
 
 /**
- * Load environment files based on the current mode.
+ * Load environment files based on the current mode and browser.
  */
-export function loadEnv(mode: string) {
+export function loadEnv(mode: string, browser: TargetBrowser) {
   return config({
-    path: [`.env.${mode}.local`, `.env.${mode}`, `.env.local`, `.env`],
+    // Files on top override files below
+    path: [
+      `.env.${mode}.${browser}.local`,
+      `.env.${mode}.${browser}`,
+      `.env.${browser}.local`,
+      `.env.${browser}`,
+      `.env.${mode}.local`,
+      `.env.${mode}`,
+      `.env.local`,
+      `.env`,
+    ],
   });
 }