finalizeCss() — vite Function Reference

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

Function typescript PluginSystem AssetManagement calls 2 called by 1

Entity Profile

PluginSystem→ AssetManagement→ finalizeCss() — vite Function Reference

Dependency Diagram

graph TD
  06417328_af61_add3_8a48_844e44f416a2["finalizeCss()"]
  c3eb47df_971b_0616_6c9f_29b3ded72224["css.ts"]
  06417328_af61_add3_8a48_844e44f416a2 -->|defined in| c3eb47df_971b_0616_6c9f_29b3ded72224
  cd131d16_e223_ab79_1b7c_8ea449ae51a2["cssPostPlugin()"]
  cd131d16_e223_ab79_1b7c_8ea449ae51a2 -->|calls| 06417328_af61_add3_8a48_844e44f416a2
  e39deb1c_7e8d_a625_cb86_17f9cb0fd0dd["hoistAtRules()"]
  06417328_af61_add3_8a48_844e44f416a2 -->|calls| e39deb1c_7e8d_a625_cb86_17f9cb0fd0dd
  297b7917_5996_b011_26d1_5bce9b0e6724["minifyCSS()"]
  06417328_af61_add3_8a48_844e44f416a2 -->|calls| 297b7917_5996_b011_26d1_5bce9b0e6724
  style 06417328_af61_add3_8a48_844e44f416a2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/vite/src/node/plugins/css.ts lines 1900–1919

async function finalizeCss(css: string, config: ResolvedConfig) {
  // hoist external @imports and @charset to the top of the CSS chunk per spec (#1845 and #6333)
  if (css.includes('@import') || css.includes('@charset')) {
    css = await hoistAtRules(css)
  }
  if (config.build.cssMinify) {
    css = await minifyCSS(css, config, false)
  }
  // inject an additional string to generate a different hash for https://github.com/vitejs/vite/issues/18038
  //
  // pre-5.4.3, we generated CSS link tags without crossorigin attribute and generated an hash without
  // this string
  // in 5.4.3, we added crossorigin attribute to the generated CSS link tags but that made chromium browsers
  // to block the CSSs from loading due to chromium's weird behavior
  // (https://www.hacksoft.io/blog/handle-images-cors-error-in-chrome, https://issues.chromium.org/issues/40381978)
  // to avoid that happening, we inject an additional string so that a different hash is generated
  // for the same CSS content
  css += viteHashUpdateMarker
  return css
}