hoistAtRules() — vite Function Reference

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

Function typescript PluginSystem AssetManagement calls 1 called by 1

Entity Profile

PluginSystem→ AssetManagement→ hoistAtRules() — vite Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/vite/src/node/plugins/css.ts lines 2309–2338

export async function hoistAtRules(css: string): Promise<string> {
  const s = new MagicString(css)
  const cleanCss = emptyCssComments(css)
  let match: RegExpExecArray | null

  // #1845
  // CSS @import can only appear at top of the file. We need to hoist all @import
  // to top when multiple files are concatenated.
  // match until semicolon that's not in quotes
  atImportRE.lastIndex = 0
  while ((match = atImportRE.exec(cleanCss))) {
    s.remove(match.index, match.index + match[0].length)
    // Use `appendLeft` instead of `prepend` to preserve original @import order
    s.appendLeft(0, match[0])
  }

  // #6333
  // CSS @charset must be the top-first in the file, hoist the first to top
  atCharsetRE.lastIndex = 0
  let foundCharset = false
  while ((match = atCharsetRE.exec(cleanCss))) {
    s.remove(match.index, match.index + match[0].length)
    if (!foundCharset) {
      s.prepend(match[0])
      foundCharset = true
    }
  }

  return s.toString()
}