rebaseUrls() — vite Function Reference

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

Function typescript PluginSystem LegacySupport calls 6 called by 2

Entity Profile

PluginSystem→ LegacySupport→ rebaseUrls() — vite Function Reference

Dependency Diagram

graph TD
  5b519ec5_dd2f_e06c_4b7f_2007d9f5d884["rebaseUrls()"]
  c3eb47df_971b_0616_6c9f_29b3ded72224["css.ts"]
  5b519ec5_dd2f_e06c_4b7f_2007d9f5d884 -->|defined in| c3eb47df_971b_0616_6c9f_29b3ded72224
  788c7102_1f9e_48db_0312_d3566b067276["makeScssWorker()"]
  788c7102_1f9e_48db_0312_d3566b067276 -->|calls| 5b519ec5_dd2f_e06c_4b7f_2007d9f5d884
  f4aa02c2_8aea_ce8b_ef25_c65bac13369a["makeLessWorker()"]
  f4aa02c2_8aea_ce8b_ef25_c65bac13369a -->|calls| 5b519ec5_dd2f_e06c_4b7f_2007d9f5d884
  dfa2b928_25a4_a78f_1e11_1e7e643cae09["resolve()"]
  5b519ec5_dd2f_e06c_4b7f_2007d9f5d884 -->|calls| dfa2b928_25a4_a78f_1e11_1e7e643cae09
  f9a13b61_758d_6973_4d25_637ddaa2a22f["url()"]
  5b519ec5_dd2f_e06c_4b7f_2007d9f5d884 -->|calls| f9a13b61_758d_6973_4d25_637ddaa2a22f
  a4adb1a7_cf54_091f_eb63_8217e684a8e1["normalizePath()"]
  5b519ec5_dd2f_e06c_4b7f_2007d9f5d884 -->|calls| a4adb1a7_cf54_091f_eb63_8217e684a8e1
  69e125ed_1a35_31cd_bd1a_2fa751979fbd["rewriteImportCss()"]
  5b519ec5_dd2f_e06c_4b7f_2007d9f5d884 -->|calls| 69e125ed_1a35_31cd_bd1a_2fa751979fbd
  195cd9c3_f2f4_e90a_85a2_ca6bf6eb0b86["rewriteCssUrls()"]
  5b519ec5_dd2f_e06c_4b7f_2007d9f5d884 -->|calls| 195cd9c3_f2f4_e90a_85a2_ca6bf6eb0b86
  a73b802f_5d97_3b91_585d_ee35e8c8e6d4["rewriteCssDataUris()"]
  5b519ec5_dd2f_e06c_4b7f_2007d9f5d884 -->|calls| a73b802f_5d97_3b91_585d_ee35e8c8e6d4
  style 5b519ec5_dd2f_e06c_4b7f_2007d9f5d884 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/vite/src/node/plugins/css.ts lines 2692–2747

async function rebaseUrls(
  environment: PartialEnvironment,
  file: string,
  rootFile: string,
  resolver: ResolveIdFn,
  ignoreUrl?: (unquotedUrl: string, rawUrl: string) => boolean,
): Promise<{ file: string; contents?: string }> {
  file = path.resolve(file) // ensure os-specific flashes
  // in the same dir, no need to rebase
  const fileDir = path.dirname(file)
  const rootDir = path.dirname(rootFile)
  if (fileDir === rootDir) {
    return { file }
  }

  const content = await fsp.readFile(file, 'utf-8')
  // no url()
  const hasUrls = cssUrlRE.test(content)
  // data-uri() calls
  const hasDataUris = cssDataUriRE.test(content)
  // no @import xxx.css
  const hasImportCss = importCssRE.test(content)

  if (!hasUrls && !hasDataUris && !hasImportCss) {
    return { file }
  }

  let rebased
  const rebaseFn = async (unquotedUrl: string, rawUrl: string) => {
    if (ignoreUrl?.(unquotedUrl, rawUrl)) return false
    if (unquotedUrl[0] === '/') return unquotedUrl
    const absolute =
      (await resolver(environment, unquotedUrl, file)) ||
      path.resolve(fileDir, unquotedUrl)
    const relative = path.relative(rootDir, absolute)
    return normalizePath(relative)
  }

  // fix css imports in less such as `@import "foo.css"`
  if (hasImportCss) {
    rebased = await rewriteImportCss(content, rebaseFn)
  }

  if (hasUrls) {
    rebased = await rewriteCssUrls(rebased || content, rebaseFn)
  }

  if (hasDataUris) {
    rebased = await rewriteCssDataUris(rebased || content, rebaseFn)
  }

  return {
    file,
    contents: rebased,
  }
}