watchCssDepsPlugin() — vite Function Reference

Architecture documentation for the watchCssDepsPlugin() function in vite.config.ts from the vite codebase.

Function typescript ViteCore ConfigEngine

Entity Profile

ViteCore→ ConfigEngine→ watchCssDepsPlugin() — vite Function Reference

Dependency Diagram

graph TD
  8218cf33_4b93_537e_7521_f0d14df91040["watchCssDepsPlugin()"]
  1881247f_497c_87d7_8eb6_75c8f50658ae["vite.config.ts"]
  8218cf33_4b93_537e_7521_f0d14df91040 -->|defined in| 1881247f_497c_87d7_8eb6_75c8f50658ae
  style 8218cf33_4b93_537e_7521_f0d14df91040 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

playground/hmr/vite.config.ts lines 106–121

function watchCssDepsPlugin(): Plugin {
  return {
    name: 'watch-css-deps',
    async transform(code, id) {
      // replace the `replaced` identifier in the CSS file with the adjacent
      // `dep.js` file's `color` variable.
      if (id.includes('css-deps/main.css')) {
        const depPath = path.resolve(import.meta.dirname, './css-deps/dep.js')
        const dep = await fs.readFile(depPath, 'utf-8')
        const color = dep.match(/color = '(.+?)'/)[1]
        this.addWatchFile(depPath)
        return code.replace('replaced', color)
      }
    },
  }
}