feat: introduce DEV_PROD_CONDITION variable

Author: sapphi-red

docs/config/shared-options.md

@@ -117,7 +117,7 @@ For SSR builds, deduplication does not work for ESM build outputs configured fro
 ## resolve.conditions
 
 - **Type:** `string[]`
-- **Default:** `['module', 'browser', 'production', 'development']`
+- **Default:** `['module', 'browser', DEV_PROD_CONDITION]`
 
 Additional allowed conditions when resolving [Conditional Exports](https://nodejs.org/api/packages.html#packages_conditional_exports) from a package.
 
@@ -136,7 +136,7 @@ A package with conditional exports may have the following `exports` field in its
 
 Here, `import` and `require` are "conditions". Conditions can be nested and should be specified from most specific to least specific.
 
-Some of the default conditions (`production`, `development`) are only applied when the requirements are met. For example, `production` is only applied when `process.env.NODE_ENV === 'production'`. The `resolve.conditions` config option allows specifying additional allowed conditions and those conditions will be applied unconditionally.
+`DEV_PROD_CONDITION` is a special variable that is replaced with `production` or `development` depending on the value of `process.env.NODE_ENV`. It is replaced with `production` when `process.env.NODE_ENV === 'production'` and `development` otherwise.
 
 Note that `import`, `require`, `default` conditions are always applied if the requirements are met.
 

docs/config/ssr-options.md

@@ -34,7 +34,7 @@ Build target for the SSR server.
 ## ssr.resolve.conditions
 
 - **Type:** `string[]`
-- **Default:** `['module', 'node', 'production', 'development']` (`['module', 'browser', 'production', 'development']` for `ssr.target === 'webworker'`)
+- **Default:** `['module', 'node', DEV_PROD_CONDITION]` (`['module', 'browser', DEV_PROD_CONDITION]` for `ssr.target === 'webworker'`)
 - **Related:** [Resolve Conditions](./shared-options.md#resolve-conditions)
 
 These conditions are used in the plugin pipeline, and only affect non-externalized dependencies during the SSR build. Use `ssr.resolve.externalConditions` to affect externalized imports.

docs/guide/migration.md

@@ -21,13 +21,13 @@ In Vite 5, the default value for `resolve.conditions` was `[]` and some conditio
 From Vite 6, some of the conditions are no longer added internally and need to be included in the config values.
 The conditions that are no longer added internally for
 
-- `resolve.conditions` are `['module', 'browser', 'production', 'development']`
-- `ssr.resolve.conditions` are `['module', 'node', 'production', 'development']`
+- `resolve.conditions` are `['module', 'browser', DEV_PROD_CONDITION]`
+- `ssr.resolve.conditions` are `['module', 'node', DEV_PROD_CONDITION]`
 
-The default values for those options are updated to the corresponding values and `ssr.resolve.conditions` no longer uses `resolve.conditions` as the default value.
+The default values for those options are updated to the corresponding values and `ssr.resolve.conditions` no longer uses `resolve.conditions` as the default value. Note that `DEV_PROD_CONDITION` is a special variable that is replaced with `production` or `development` depending on the value of `process.env.NODE_ENV`.
 
 If you specified a custom value for `resolve.conditions` or `ssr.resolve.conditions`, you need to update it to include the new conditions.
-For example, if you previously specified `['custom']` for `resolve.conditions`, you need to specify `['custom', 'module', 'browser', 'production', 'development']` instead.
+For example, if you previously specified `['custom']` for `resolve.conditions`, you need to specify `['custom', 'module', 'browser', DEV_PROD_CONDITION]` instead.
 
 ### JSON stringify
 

packages/vite/src/node/constants.ts

@@ -46,12 +46,23 @@ export const DEFAULT_MAIN_FIELDS = [
   'jsnext',
 ]
 
+// using " and $ as conditions would usually avoid using $ or "
+// as it makes difficult to use the condition in command line or json
+// also avoiding a symbol so that dual package hazard won't be a problem
+type SpecialCondition<T extends string> = `vite$"${T}"` & { __brand: never }
+
+/**
+ * A special condition that would be replaced with production or development
+ * depending on NODE_ENV env variable
+ */
+export const DEV_PROD_CONDITION =
+  `vite$"dev-prod"` as SpecialCondition<'dev-prod'>
+
 export const DEFAULT_CONDITIONS = [
   'module',
   'browser',
   'node',
-  'production',
-  'development',
+  DEV_PROD_CONDITION,
 ]
 
 export const DEFAULT_EXTERNAL_CONDITIONS = ['node']

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

@@ -44,6 +44,7 @@ import {
 import {
   CLIENT_PUBLIC_PATH,
   CSS_LANGS_RE,
+  DEV_PROD_CONDITION,
   ESBUILD_MODULES_TARGET,
   SPECIAL_QUERY_RE,
 } from '../constants'
@@ -1092,7 +1093,7 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
       return (cssResolve ??= createBackCompatIdResolver(config, {
         extensions: ['.css'],
         mainFields: ['style'],
-        conditions: ['style', 'production', 'development'],
+        conditions: ['style', DEV_PROD_CONDITION],
         tryIndex: false,
         preferRelative: true,
       }))
@@ -1103,7 +1104,7 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
         const resolver = createBackCompatIdResolver(config, {
           extensions: ['.scss', '.sass', '.css'],
           mainFields: ['sass', 'style'],
-          conditions: ['sass', 'style', 'production', 'development'],
+          conditions: ['sass', 'style', DEV_PROD_CONDITION],
           tryIndex: true,
           tryPrefix: '_',
           preferRelative: true,
@@ -1122,7 +1123,7 @@ function createCSSResolvers(config: ResolvedConfig): CSSAtImportResolvers {
       return (lessResolve ??= createBackCompatIdResolver(config, {
         extensions: ['.less', '.css'],
         mainFields: ['less', 'style'],
-        conditions: ['less', 'style', 'production', 'development'],
+        conditions: ['less', 'style', DEV_PROD_CONDITION],
         tryIndex: false,
         preferRelative: true,
       }))

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

@@ -9,6 +9,7 @@ import type { Plugin } from '../plugin'
 import {
   CLIENT_ENTRY,
   DEP_VERSION_RE,
+  DEV_PROD_CONDITION,
   ENV_ENTRY,
   FS_PREFIX,
   OPTIMIZABLE_ENTRY_RE,
@@ -1078,21 +1079,18 @@ function resolveExportsOrImports(
   options: InternalResolveOptions,
   type: 'imports' | 'exports',
 ) {
-  const conditions = [...options.conditions, 'require', 'import'].filter(
-    (condition) => {
-      switch (condition) {
-        case 'production':
-          return options.isProduction
-        case 'development':
-          return !options.isProduction
-        case 'require':
-          return options.isRequire
-        case 'import':
-          return !options.isRequire
-      }
-      return true
-    },
-  )
+  const conditions = options.conditions.map((condition) => {
+    if (condition === DEV_PROD_CONDITION) {
+      return options.isProduction ? 'production' : 'development'
+    }
+    return condition
+  })
+
+  if (options.isRequire) {
+    conditions.push('require')
+  } else {
+    conditions.push('import')
+  }
 
   const fn = type === 'imports' ? imports : exports
   const result = fn(pkg, key, { conditions, unsafe: true })

packages/vite/src/node/publicUtils.ts

@@ -3,7 +3,7 @@
  * This file will be bundled to ESM and CJS and redirected by ../index.cjs
  * Please control the side-effects by checking the ./dist/node-cjs/publicUtils.cjs bundle
  */
-export { VERSION as version } from './constants'
+export { VERSION as version, DEV_PROD_CONDITION } from './constants'
 export { version as esbuildVersion } from 'esbuild'
 export {
   splitVendorChunkPlugin,

packages/vite/src/node/ssr/fetchModule.ts

@@ -3,6 +3,7 @@ import type { FetchResult } from 'vite/module-runner'
 import type { EnvironmentModuleNode, TransformResult } from '..'
 import { tryNodeResolve } from '../plugins/resolve'
 import { isBuiltin, isExternalUrl, isFilePathESM } from '../utils'
+import { DEV_PROD_CONDITION } from '../constants'
 import { unwrapId } from '../../shared/utils'
 import {
   MODULE_RUNNER_SOURCEMAPPING_SOURCE,
@@ -46,7 +47,7 @@ export async function fetchModule(
 
     const resolved = tryNodeResolve(url, importer, {
       mainFields: ['main'],
-      conditions: [...externalConditions, 'production', 'development'],
+      conditions: [...externalConditions, DEV_PROD_CONDITION],
       externalConditions,
       external: [],
       noExternal: [],

playground/resolve/vite.config.js

@@ -1,5 +1,5 @@
 import path from 'node:path'
-import { defineConfig, normalizePath } from 'vite'
+import { DEV_PROD_CONDITION, defineConfig, normalizePath } from 'vite'
 import { a } from './config-dep.cjs'
 
 const virtualFile = '@virtual-file'
@@ -32,7 +32,7 @@ export default defineConfig({
   resolve: {
     extensions: ['.mjs', '.js', '.es', '.ts'],
     mainFields: ['browser', 'custom', 'module'],
-    conditions: ['module', 'browser', 'production', 'development', 'custom'],
+    conditions: ['module', 'browser', DEV_PROD_CONDITION, 'custom'],
   },
   define: {
     VITE_CONFIG_DEP_TEST: a,

playground/ssr-conditions/vite.config.js

@@ -1,17 +1,11 @@
-import { defineConfig } from 'vite'
+import { DEV_PROD_CONDITION, defineConfig } from 'vite'
 
 export default defineConfig({
   ssr: {
     external: ['@vitejs/test-ssr-conditions-external'],
     noExternal: ['@vitejs/test-ssr-conditions-no-external'],
     resolve: {
-      conditions: [
-        'module',
-        'node',
-        'production',
-        'development',
-        'react-server',
-      ],
+      conditions: ['module', 'node', DEV_PROD_CONDITION, 'react-server'],
       externalConditions: ['node', 'workerd', 'react-server'],
     },
   },