Can CSS injection in serve mode be detected/hooked by a plug-in?

[webJose]

Hello, everyone.

I have been searching for a way to achieve something: To accurately list all CSS files that are imported by module X and any modules recursively imported by X. For example: If I import module X.ts, I want a list of all CSS imported by that action.

It is my understanding that each CSS import found in this chain of imports trigger on the client a call to updateStyle(), and that this is a function outside the scope of plug-ins.

As far as I can tell, my desired goal seems to be impossible to achieve, but I still wanted to ask here, just in case some son of a gun, daredevil Vite developer knew of a way.

Many thanks!

[lizuju]

I don't think there is a plugin hook around the actual DOM injection path. updateStyle() is part of Vite's client runtime, so by the time that runs you are outside the normal server-side plugin hooks.

For the use case you described though, I would not try to hook the injection. I would read the dev server module graph after the entry has been transformed/requested and walk importedModules from there. CSS modules are represented in the graph too.

Rough shape:

function collectCss(mod, seen = new Set(), css = new Set()) {
  if (!mod || seen.has(mod)) return css
  seen.add(mod)

  for (const dep of mod.importedModules) {
    if (dep.type === 'css' || /\.(css|less|sass|scss|styl|stylus|pcss|postcss)(\?|$)/.test(dep.url)) {
      css.add(dep.file || dep.id || dep.url)
    }
    collectCss(dep, seen, css)
  }

  return css
}

export default function cssDepsPlugin() {
  let server

  return {
    name: 'css-deps',
    configureServer(s) {
      server = s
    },
    async buildStart() {
      // only available in dev, after configureServer has run
    },
  }
}

Then from whatever trigger you control, for example a dev-only middleware or a custom command:

await server.transformRequest('/src/X.ts')
const mod = await server.moduleGraph.getModuleByUrl('/src/X.ts')
const css = [...collectCss(mod)]

On newer Environment API code paths the client graph is also available as server.environments.client.moduleGraph, but the idea is the same: force/await the transform for the entry, get its module node, then traverse imports.

The important limitation is timing. The graph only knows what Vite has already resolved/transformed. If X.ts or one of its branches has not been requested yet, or if the CSS is behind a dynamic import that has not been loaded, it will not appear until that path is processed. So this can give you an accurate list for the currently realized dev graph, but it is not a static whole-program CSS dependency analyzer.