feat(define): don't modify string literals

packages/vite/src/node/__tests__/plugins/define.spec.ts

@@ -10,11 +10,18 @@ async function createDefinePluginTransform(
   const config = await resolveConfig({ define }, build ? 'build' : 'serve')
   const instance = definePlugin(config)
   return async (code: string) => {
-    const result = await instance.transform.call({}, code, 'foo.ts', { ssr })
+    const transform =
+      instance.transform && 'handler' in instance.transform
+        ? instance.transform.handler
+        : instance.transform
+    const result = await transform?.call({}, code, 'foo.ts', { ssr })
     return result?.code || result
   }
 }
 
+// FIXME: Use string concatenation to workaround Vite define-replacement of import\.meta.env in string literals
+const importMetaEnv = 'import' + '.meta.env'
+
 describe('definePlugin', () => {
   test('replaces custom define', async () => {
     const transform = await createDefinePluginTransform({
@@ -28,13 +35,127 @@ describe('definePlugin', () => {
     )
   })
 
-  test('replaces import.meta.env.SSR with false', async () => {
+  test(`replaces ${importMetaEnv}.SSR with false`, async () => {
     const transform = await createDefinePluginTransform()
-    expect(await transform('const isSSR = import.meta.env.SSR ;')).toBe(
+    expect(await transform(`const isSSR = ${importMetaEnv}.SSR ;`)).toBe(
       'const isSSR = false ;'
     )
-    expect(await transform('const isSSR = import.meta.env.SSR;')).toBe(
+    expect(await transform(`const isSSR = ${importMetaEnv}.SSR;`)).toBe(
       'const isSSR = false;'
     )
   })
+
+  // Specially defined constants found in packages/vite/src/node/plugins/define.ts
+  const specialDefines = {
+    'process.env.': '({}).',
+    'global.process.env.': '({}).',
+    'globalThis.process.env.': '({}).',
+    'process.env.NODE_ENV': '"test"',
+    'global.process.env.NODE_ENV': '"test"',
+    'globalThis.process.env.NODE_ENV': '"test"',
+    __vite_process_env_NODE_ENV: '"test"',
+    [importMetaEnv + '.']: '({}).',
+    [importMetaEnv]:
+      '{"BASE_URL":"/","MODE":"development","DEV":true,"PROD":false}',
+    'import.meta.hot': 'false'
+  }
+  const specialDefineKeys = Object.keys(specialDefines)
+
+  const specialDefinesSSR = {
+    ...specialDefines,
+    // process.env is not replaced in SSR
+    'process.env.': null,
+    'global.process.env.': null,
+    'globalThis.process.env.': null,
+    'process.env.NODE_ENV': null,
+    'global.process.env.NODE_ENV': null,
+    'globalThis.process.env.NODE_ENV': null,
+    // __vite_process_env_NODE_ENV is a special variable that resolves to process.env.NODE_ENV, which is not replaced in SSR
+    __vite_process_env_NODE_ENV: 'process.env.NODE_ENV'
+  }
+
+  describe('ignores defined constants in string literals', async () => {
+    const singleQuotedDefines = specialDefineKeys
+      .map((define) => `let x = '${define}'`)
+      .join(';\n')
+    const doubleQuotedDefines = specialDefineKeys
+      .map((define) => `let x = "${define}"`)
+      .join(';\n')
+    const backtickedDefines = specialDefineKeys
+      .map((define) => `let x = \`${define}\``)
+      .join(';\n')
+    const singleQuotedDefinesMultilineNested = specialDefineKeys
+      .map((define) => `let x = \n'${define}'\n\``)
+      .join(';\n')
+    const doubleQuotedDefinesMultilineNested = specialDefineKeys
+      .map((define) => `let x = \n"${define}"\n\``)
+      .join(';\n')
+    const backtickedDefinesMultilineNested = specialDefineKeys
+      .map((define) => `let x = \`\n${define}\n\``)
+      .join(';\n')
+
+    const inputs = [
+      ['double-quoted', doubleQuotedDefines],
+      ['single-quoted', singleQuotedDefines],
+      ['backticked', backtickedDefines],
+      ['multiline nested double-quoted', doubleQuotedDefinesMultilineNested],
+      ['multiline nested single-quoted', singleQuotedDefinesMultilineNested],
+      ['multiline nested backticked', backtickedDefinesMultilineNested]
+    ]
+
+    describe('non-SSR', async () => {
+      const transform = await createDefinePluginTransform()
+      test.each(inputs)('%s', async (label, input) => {
+        // transform() returns null when no replacement is made
+        expect(await transform(input)).toBe(null)
+      })
+    })
+
+    describe('SSR', async () => {
+      const ssrTransform = await createDefinePluginTransform({}, true, true)
+      test.each(inputs)('%s', async (label, input) => {
+        // transform() returns null when no replacement is made
+        expect(await ssrTransform(input)).toBe(null)
+      })
+    })
+  })
+
+  describe('replaces defined constants in template literal expressions', async () => {
+    describe('non-SSR', async () => {
+      const transform = await createDefinePluginTransform()
+
+      test.each(specialDefineKeys)('%s', async (key) => {
+        const result = await transform('let x = `${' + key + '}`')
+        expect(result).toBe('let x = `${' + specialDefines[key] + '}`')
+      })
+
+      // multiline tests
+      test.each(specialDefineKeys)('%s', async (key) => {
+        const result = await transform('let x = `\n${' + key + '}\n`')
+        expect(result).toBe('let x = `\n${' + specialDefines[key] + '}\n`')
+      })
+    })
+    describe('SSR', async () => {
+      const ssrTransform = await createDefinePluginTransform({}, true, true)
+
+      test.each(specialDefineKeys)('%s', async (key) => {
+        const result = await ssrTransform('let x = `${' + key + '}`')
+        expect(result).toBe(
+          specialDefinesSSR[key]
+            ? 'let x = `${' + specialDefinesSSR[key] + '}`'
+            : null
+        )
+      })
+
+      // multiline tests
+      test.each(specialDefineKeys)('%s', async (key) => {
+        const result = await ssrTransform('let x = `\n${' + key + '}\n`')
+        expect(result).toBe(
+          specialDefinesSSR[key]
+            ? 'let x = `\n${' + specialDefinesSSR[key] + '}\n`'
+            : null
+        )
+      })
+    })
+  })
 })

packages/vite/src/node/plugins/define.ts

@@ -1,4 +1,5 @@
 import MagicString from 'magic-string'
+import { stripLiteral } from 'strip-literal'
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
 import { transformStableResult } from '../utils'
@@ -45,12 +46,16 @@ export function definePlugin(config: ResolvedConfig): Plugin {
       ...config.env,
       SSR: !!config.build.ssr
     }
+
+    // FIXME: Use string concatenation to workaround Vite define-replacement of import\.meta.env in string literals
+    const importMetaEnv = 'import' + '.meta.env'
+
     for (const key in env) {
-      importMetaKeys[`import.meta.env.${key}`] = JSON.stringify(env[key])
+      importMetaKeys[`${importMetaEnv}.${key}`] = JSON.stringify(env[key])
     }
     Object.assign(importMetaFallbackKeys, {
-      'import.meta.env.': `({}).`,
-      'import.meta.env': JSON.stringify(config.env),
+      [importMetaEnv + '.']: `({}).`,
+      [importMetaEnv]: JSON.stringify(config.env),
       'import.meta.hot': `false`
     })
   }
@@ -123,17 +128,17 @@ export function definePlugin(config: ResolvedConfig): Plugin {
         return null
       }
 
-      if (ssr && !isBuild) {
-        // ssr + dev, simple replace
-        return code.replace(pattern, (_, match) => {
-          return '' + replacements[match]
-        })
+      const maybeNeedsReplacement = new RegExp(pattern).test(code)
+      if (!maybeNeedsReplacement) {
+        return null
       }
 
       const s = new MagicString(code)
       let hasReplaced = false
       let match: RegExpExecArray | null
 
+      code = stripLiteral(code)
+
       while ((match = pattern.exec(code))) {
         hasReplaced = true
         const start = match.index

playground/react/App.jsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import Dummy from './components/Dummy?qs-should-not-break-plugin-react'
+import DefineVariable from './components/DefineVariable'
 import Button from 'jsx-entry'
 
 function App() {
@@ -27,6 +28,7 @@ function App() {
       </header>
 
       <Dummy />
+      <DefineVariable />
       <Button>button</Button>
     </div>
   )

playground/react/__tests__/react.spec.ts

@@ -37,3 +37,9 @@ test.runIf(isServe)(
     ])
   }
 )
+
+test('defined/reserved words are preserved in string literals', async () => {
+  expect(await page.textContent('.define-variable')).toBe(
+    'import' + '.meta.env' // FIXME: Workaround Vite replacement of import\0.meta.env
+  )
+})

playground/react/components/DefineVariable.tsx

@@ -0,0 +1,3 @@
+export default function DefineVariable() {
+  return <div class="define-variable">import.meta.env</div>
+}

playground/vue/DefineVariable.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="define-variable">import.meta.env</div>
+</template>

playground/vue/Main.vue

@@ -22,6 +22,7 @@
   <ReactivityTransform :foo="time" />
   <SetupImportTemplate />
   <WorkerTest />
+  <DefineVariable />
 </template>
 
 <script setup lang="ts">
@@ -39,6 +40,7 @@ import AsyncComponent from './AsyncComponent.vue'
 import ReactivityTransform from './ReactivityTransform.vue'
 import SetupImportTemplate from './setup-import-template/SetupImportTemplate.vue'
 import WorkerTest from './worker.vue'
+import DefineVariable from './DefineVariable.vue'
 import { ref } from 'vue'
 
 const time = ref('loading...')

playground/vue/__tests__/vue.spec.ts

@@ -263,3 +263,11 @@ describe('vue worker', () => {
     expect(await page.textContent('.vue-worker')).toMatch('worker load!')
   })
 })
+
+describe('defined/reserved words', () => {
+  test('are preserved in string literals', async () => {
+    expect(await page.textContent('.define-variable')).toBe(
+      'import' + '.meta.env' // FIXME: Workaround Vite replacement of import\0.meta.env
+    )
+  })
+})