fix(html): support import.meta.env define replacement without quotes (

#13425)
vitejs · Jul 24, 2023 · 883089c · 883089c
1 parent 4848e41
commit 883089c
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 1 deletion.
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
@@ -963,11 +963,21 @@ export function htmlEnvHook(config: ResolvedConfig): IndexHtmlTransformHook {
   const pattern = /%(\S+?)%/g
   const envPrefix = resolveEnvPrefix({ envPrefix: config.envPrefix })
   const env: Record<string, any> = { ...config.env }
+
   // account for user env defines
   for (const key in config.define) {
     if (key.startsWith(`import.meta.env.`)) {
       const val = config.define[key]
-      env[key.slice(16)] = typeof val === 'string' ? val : JSON.stringify(val)
+      if (typeof val === 'string') {
+        try {
+          const parsed = JSON.parse(val)
+          env[key.slice(16)] = typeof parsed === 'string' ? parsed : val
+        } catch {
+          env[key.slice(16)] = val
+        }
+      } else {
+        env[key.slice(16)] = JSON.stringify(val)
+      }
     }
   }
   return (html, ctx) => {

diff --git a/playground/html/__tests__/html.spec.ts b/playground/html/__tests__/html.spec.ts
@@ -294,6 +294,14 @@ describe('env', () => {
   test('env works', async () => {
     expect(await page.textContent('.env')).toBe('bar')
     expect(await page.textContent('.env-define')).toBe('5173')
+    expect(await page.textContent('.env-define-string')).toBe('string')
+    expect(await page.textContent('.env-define-object-string')).toBe(
+      '{ "foo": "bar" }',
+    )
+    expect(await page.textContent('.env-define-template-literal')).toBe(
+      '`template literal`', // only double quotes will be unquoted
+    )
+    expect(await page.textContent('.env-define-null-string')).toBe('null')
     expect(await page.textContent('.env-bar')).toBeTruthy()
     expect(await page.textContent('.env-prod')).toBe(isBuild + '')
     expect(await page.textContent('.env-dev')).toBe(isServe + '')

diff --git a/playground/html/env.html b/playground/html/env.html
@@ -1,5 +1,9 @@
 <p class="env">%VITE_FOO%</p>
 <p class="env-define">%VITE_NUMBER%</p>
+<p class="env-define-string">%VITE_STRING%</p>
+<p class="env-define-object-string">%VITE_OBJECT_STRING%</p>
+<p class="env-define-template-literal">%VITE_TEMPLATE_LITERAL%</p>
+<p class="env-define-null-string">%VITE_NULL_STRING%</p>
 <p class="env-%VITE_FOO%">class name should be env-bar</p>
 <p class="env-prod">%PROD%</p>
 <p class="env-dev">%DEV%</p>

diff --git a/playground/html/vite.config.js b/playground/html/vite.config.js
@@ -36,6 +36,10 @@ export default defineConfig({
 
   define: {
     'import.meta.env.VITE_NUMBER': 5173,
+    'import.meta.env.VITE_STRING': JSON.stringify('string'),
+    'import.meta.env.VITE_OBJECT_STRING': '{ "foo": "bar" }',
+    'import.meta.env.VITE_TEMPLATE_LITERAL': '`template literal`',
+    'import.meta.env.VITE_NULL_STRING': 'null',
   },
 
   plugins: [