compilePostCSS() — vite Function Reference

Source Code

packages/vite/src/node/plugins/css.ts lines 1491–1664

async function compilePostCSS(
  environment: PartialEnvironment,
  id: string,
  code: string,
  deps: Set<string>,
  lang: CssLang | undefined,
  workerController: PreprocessorWorkerController,
  urlResolver?: CssUrlResolver,
): Promise<
  | {
      code: string
      map?: Exclude<SourceMapInput, string>
      modules?: Record<string, string>
    }
  | undefined
> {
  const { config } = environment
  const { modules: modulesOptions, devSourcemap } = config.css
  const isModule = modulesOptions !== false && cssModuleRE.test(id)
  // although at serve time it can work without processing, we do need to
  // crawl them in order to register watch dependencies.
  const needInlineImport = code.includes('@import')
  const hasUrl = cssUrlRE.test(code) || cssImageSetRE.test(code)
  const postcssConfig = await resolvePostcssConfig(
    environment.getTopLevelConfig(),
  )

  // postcss processing is not needed
  if (
    lang !== 'sss' &&
    !postcssConfig &&
    !isModule &&
    !needInlineImport &&
    !hasUrl
  ) {
    return
  }

  // postcss
  const atImportResolvers = getAtImportResolvers(
    environment.getTopLevelConfig(),
  )
  const postcssPlugins = postcssConfig?.plugins.slice() ?? []

  if (needInlineImport) {
    postcssPlugins.unshift(
      (await importPostcssImport()).default({
        async resolve(id, basedir) {
          const publicFile = checkPublicFile(
            id,
            environment.getTopLevelConfig(),
          )
          if (publicFile) {
            return publicFile
          }

          const resolved = await atImportResolvers.css(
            environment,
            id,
            path.join(basedir, '*'),
          )

          if (resolved) {
            return path.resolve(resolved)
          }

          // postcss-import falls back to `resolve` dep if this is unresolved,
          // but we've shimmed to remove the `resolve` dep to cut on bundle size.
          // warn here to provide a better error message.
          if (!path.isAbsolute(id)) {
            environment.logger.error(
              colors.red(
                `Unable to resolve \`@import "${id}"\` from ${basedir}`,
              ),
            )
          }

          return id
        },
        async load(id) {
          const code = await fs.promises.readFile(id, 'utf-8')