UrlRewritePostcssPlugin() — vite Function Reference

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

Function typescript PluginSystem AssetManagement calls 2 called by 1

Entity Profile

PluginSystem→ AssetManagement→ UrlRewritePostcssPlugin() — vite Function Reference

Dependency Diagram

graph TD
  bf50047e_a0e3_48b6_aa97_2e41d9b50e56["UrlRewritePostcssPlugin()"]
  c3eb47df_971b_0616_6c9f_29b3ded72224["css.ts"]
  bf50047e_a0e3_48b6_aa97_2e41d9b50e56 -->|defined in| c3eb47df_971b_0616_6c9f_29b3ded72224
  6aa50cd4_4412_2a02_b76b_495614715811["compilePostCSS()"]
  6aa50cd4_4412_2a02_b76b_495614715811 -->|calls| bf50047e_a0e3_48b6_aa97_2e41d9b50e56
  195cd9c3_f2f4_e90a_85a2_ca6bf6eb0b86["rewriteCssUrls()"]
  bf50047e_a0e3_48b6_aa97_2e41d9b50e56 -->|calls| 195cd9c3_f2f4_e90a_85a2_ca6bf6eb0b86
  adbeefd5_f002_aded_c354_d39e64e7c473["rewriteCssImageSet()"]
  bf50047e_a0e3_48b6_aa97_2e41d9b50e56 -->|calls| adbeefd5_f002_aded_c354_d39e64e7c473
  style bf50047e_a0e3_48b6_aa97_2e41d9b50e56 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/vite/src/node/plugins/css.ts lines 2007–2063

}> = (opts) => {
  if (!opts) {
    throw new Error('base or replace is required')
  }

  return {
    postcssPlugin: 'vite-url-rewrite',
    Once(root) {
      const promises: Promise<void>[] = []
      root.walkDecls((declaration) => {
        const importer = declaration.source?.input.file
        if (!importer) {
          opts.logger.warnOnce(
            '\nA PostCSS plugin did not pass the `from` option to `postcss.parse`. ' +
              'This may cause imported assets to be incorrectly transformed. ' +
              "If you've recently added a PostCSS plugin that raised this warning, " +
              'please contact the package author to fix the issue.',
          )
        }
        const isCssUrl = cssUrlRE.test(declaration.value)
        const isCssImageSet = cssImageSetRE.test(declaration.value)
        if (isCssUrl || isCssImageSet) {
          const replacerForDeclaration = async (rawUrl: string) => {
            const [newUrl, resolvedId] = await opts.resolver(rawUrl, importer)
            if (resolvedId) {
              opts.deps.add(resolvedId)
            }
            return newUrl
          }
          if (isCssUrl && isCssImageSet) {
            promises.push(
              rewriteCssUrls(declaration.value, replacerForDeclaration)
                .then((url) => rewriteCssImageSet(url, replacerForDeclaration))
                .then((url) => {
                  declaration.value = url
                }),
            )
          } else {
            const rewriterToUse = isCssImageSet
              ? rewriteCssImageSet
              : rewriteCssUrls
            promises.push(
              rewriterToUse(declaration.value, replacerForDeclaration).then(
                (url) => {
                  declaration.value = url
                },
              ),
            )
          }
        }
      })
      if (promises.length) {
        return Promise.all(promises) as any
      }
    },
  }
}