cssAnalysisPlugin() — vite Function Reference

Architecture documentation for the cssAnalysisPlugin() function in css.ts from the vite codebase.

Function typescript PluginSystem AssetManagement calls 4 called by 1

Entity Profile

PluginSystem→ AssetManagement→ cssAnalysisPlugin() — vite Function Reference

Dependency Diagram

graph TD
  946fc4c1_3a7b_9d6a_6a0f_ab4355ad25c9["cssAnalysisPlugin()"]
  c3eb47df_971b_0616_6c9f_29b3ded72224["css.ts"]
  946fc4c1_3a7b_9d6a_6a0f_ab4355ad25c9 -->|defined in| c3eb47df_971b_0616_6c9f_29b3ded72224
  b1b40b5b_3e43_2197_dea0_d36389d312a1["resolvePlugins()"]
  b1b40b5b_3e43_2197_dea0_d36389d312a1 -->|calls| 946fc4c1_3a7b_9d6a_6a0f_ab4355ad25c9
  1c3423db_563a_92c5_87fa_42d035132b6c["getModuleById()"]
  946fc4c1_3a7b_9d6a_6a0f_ab4355ad25c9 -->|calls| 1c3423db_563a_92c5_87fa_42d035132b6c
  51afdf58_3045_64b1_cf5b_929b1091e877["get()"]
  946fc4c1_3a7b_9d6a_6a0f_ab4355ad25c9 -->|calls| 51afdf58_3045_64b1_cf5b_929b1091e877
  be6bcf2e_db73_a434_d3c1_5c6380cf3a97["createFileOnlyEntry()"]
  946fc4c1_3a7b_9d6a_6a0f_ab4355ad25c9 -->|calls| be6bcf2e_db73_a434_d3c1_5c6380cf3a97
  aa7d5861_e3d7_fc0a_68dc_8a1f7d5e6b62["updateModuleInfo()"]
  946fc4c1_3a7b_9d6a_6a0f_ab4355ad25c9 -->|calls| aa7d5861_e3d7_fc0a_68dc_8a1f7d5e6b62
  style 946fc4c1_3a7b_9d6a_6a0f_ab4355ad25c9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/vite/src/node/plugins/css.ts lines 1170–1220

export function cssAnalysisPlugin(config: ResolvedConfig): Plugin {
  return {
    name: 'vite:css-analysis',

    transform: {
      filter: {
        id: {
          include: CSS_LANGS_RE,
          exclude: [commonjsProxyRE, SPECIAL_QUERY_RE],
        },
      },
      async handler(_, id) {
        const { moduleGraph } = this.environment as DevEnvironment
        const thisModule = moduleGraph.getModuleById(id)

        // Handle CSS @import dependency HMR and other added modules via this.addWatchFile.
        // JS-related HMR is handled in the import-analysis plugin.
        if (thisModule) {
          // CSS modules cannot self-accept since it exports values
          const isSelfAccepting =
            !cssModulesCache.get(config)?.get(id) &&
            !inlineRE.test(id) &&
            !htmlProxyRE.test(id)
          // attached by pluginContainer.addWatchFile
          const pluginImports = (this as unknown as TransformPluginContext)
            ._addedImports
          if (pluginImports) {
            // record deps in the module graph so edits to @import css can trigger
            // main import to hot update
            const depModules = new Set<string | EnvironmentModuleNode>()
            for (const file of pluginImports) {
              depModules.add(moduleGraph.createFileOnlyEntry(file))
            }
            moduleGraph.updateModuleInfo(
              thisModule,
              depModules,
              null,
              // The root CSS proxy module is self-accepting and should not
              // have an explicit accept list
              new Set(),
              null,
              isSelfAccepting,
            )
          } else {
            thisModule.isSelfAccepting = isSelfAccepting
          }
        }
      },
    },
  }
}