Allow accessing Vite mode from config.ts

[Peque]

Is your feature request related to a problem? Please describe.

With Vite, I can access the --mode flag with:

import { loadEnv, defineConfig } from 'vite'

export default ({ mode }) => {
  return defineConfig({
    titleTemplate: mode,
  })
}

With Vitepress, however, this does not seem to be possible, since this command always results in mode == "development":

vitepress dev docs --mode foo

Describe the solution you'd like

Executing this command:

vitepress dev docs --mode foo

Should make this code pass:

import { loadEnv, defineConfig } from 'vitepress'

export default ({ mode }) => {
  if (mode != "foo") {
    throw new Error(mode);
  }
  return defineConfig({
    titleTemplate: mode,
  })
}

Describe alternatives you've considered

Haven't found a suitable alternative. Are there any?

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

You can use env variables as a workaround:

// MODE=foo vitepress dev docs

const mode = process.env.MODE || 'default'

[Peque]

@brc-dd Is is possible to load a different CSS depending on the MODE env variable during build?

I am trying from .vitepress/theme/index.js:

import DefaultTheme from 'vitepress/theme'

const mode = import.meta.env.MODE || 'blue'
import(`./style-${mode}.css`)

export default DefaultTheme

Which works for development, but for building, it seems like both:

MODE=blue vitepress build docs
MODE=red vitepress build docs

Would yield the same result.

[Peque]

Replying to my own question, in case this is useful for someone else, you can use in config.ts:

return defineConfig({
  vite: {
    define: {
      'process.env.MODE': JSON.stringify(mode),
    },
  },
}

And in index.ts:

import DefaultTheme from 'vitepress/theme'

const mode = process.env.MODE
import(`./style-${mode}.css`)

export default DefaultTheme

[brc-dd]

Ah, you need to prefix it with VITE_ if you want to use it in client.

VITE_MODE=foo vitepress build

import.meta.env.VITE_MODE // in theme, markdown/vue, etc.

process.env.VITE_MODE // in config, data/path loader, etc.

https://vitejs.dev/guide/env-and-mode.html#env-files

[Peque]

@brc-dd I made what I think may be a minimal reproducible bug:

https://github.com/Peque/vitepress-color-change

First commit is just a basic Vitepress template. Second commit introduces the code to use different colors depending on the VITE_COLOR variable.

Development works as expected:

• ✅ VITE_COLOR=red npm run docs:dev -> Red color
• ✅ VITE_COLOR=blue npm run docs:dev -> Blue color

Builds do not work as expected when opening http-serve:

• ✅ VITE_COLOR=red npm run docs:build -> Red color
• ❌ VITE_COLOR=blue npm run docs:build -> Red color

Any ideas on what may be going on or how to fix that?

[Peque]

@brc-dd Are you able to reproduce with the minimal code I provided?