vite.config.js — vite Source File

Architecture documentation for vite.config.js, a javascript file in the vite codebase. 2 imports, 1 dependents.

File javascript ViteCore 2 imports 1 dependents

Entity Profile

ViteCore→ vite.config.js — vite Source File

Dependency Diagram

graph LR
  239f49a0_c85e_aad5_e41b_f65a653acf85["vite.config.js"]
  54c37fea_4fe7_2693_71cb_1276b77f55f9["vite"]
  239f49a0_c85e_aad5_e41b_f65a653acf85 --> 54c37fea_4fe7_2693_71cb_1276b77f55f9
  ff79973e_f09f_1c6b_f6b5_d1707df47116["magic-string"]
  239f49a0_c85e_aad5_e41b_f65a653acf85 --> ff79973e_f09f_1c6b_f6b5_d1707df47116
  a104f700_9bbc_8e39_0d9e_9f35f35b4f02["vite.config-lightningcss.js"]
  a104f700_9bbc_8e39_0d9e_9f35f35b4f02 --> 239f49a0_c85e_aad5_e41b_f65a653acf85
  style 239f49a0_c85e_aad5_e41b_f65a653acf85 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { defineConfig } from 'vite'
import MagicString from 'magic-string'

export default defineConfig({
  resolve: {
    alias: {
      '@': import.meta.dirname,
    },
  },
  css: {
    devSourcemap: true,
    preprocessorOptions: {
      less: {
        additionalData: '@color: red;',
      },
      styl: {
        additionalData: (content, filename) => {
          const ms = new MagicString(content, { filename })

          const willBeReplaced = 'blue-red-mixed'
          const start = content.indexOf(willBeReplaced)
          ms.overwrite(start, start + willBeReplaced.length, 'purple')

          const map = ms.generateMap({ hires: 'boundary' })
          map.file = filename
          map.sources = [filename]

          return {
            content: ms.toString(),
            map,
          }
        },
      },
    },
  },
  build: {
    sourcemap: true,
  },
  plugins: [
    {
      name: 'virtual-html',
      configureServer(server) {
        server.middlewares.use(async (req, res, next) => {
          if (req.url === '/virtual.html') {
            const t = await server.transformIndexHtml(
              '/virtual.html',
              '<style> .foo { color: red; } </style> <p class="foo">virtual html</p>',
            )
            res.setHeader('Content-Type', 'text/html')
            res.statusCode = 200
            res.end(t)
            return
          }
          next()
        })
      },
    },
  ],
})