minifyCSS() — vite Function Reference

Source Code

packages/vite/src/node/plugins/css.ts lines 2197–2275

async function minifyCSS(
  css: string,
  config: ResolvedConfig,
  inlined: boolean,
) {
  // We want inlined CSS to not end with a linebreak, while ensuring that
  // regular CSS assets do end with a linebreak.
  // See https://github.com/vitejs/vite/pull/13893#issuecomment-1678628198

  if (config.build.cssMinify === 'esbuild') {
    const { transform, formatMessages } = await importEsbuild()
    try {
      const { code, warnings } = await transform(css, {
        loader: 'css',
        target: config.build.cssTarget || undefined,
        ...resolveMinifyCssEsbuildOptions(config.esbuild || {}),
      })
      if (warnings.length) {
        const msgs = await formatMessages(warnings, { kind: 'warning' })
        config.logger.warn(
          colors.yellow(`[esbuild css minify]\n${msgs.join('\n')}`),
        )
      }
      // esbuild output does return a linebreak at the end
      return inlined ? code.trimEnd() : code
    } catch (e) {
      if (e.errors) {
        e.message = '[esbuild css minify] ' + e.message
        const msgs = await formatMessages(e.errors, { kind: 'error' })
        e.frame = '\n' + msgs.join('\n')
        e.loc = e.errors[0].location
      }
      throw e
    }
  }

  try {
    const { code, warnings } = (await importLightningCSS()).transform({
      ...config.css.lightningcss,
      targets: convertTargets(config.build.cssTarget),
      cssModules: undefined,
      // TODO: Pass actual filename here, which can also be passed to esbuild's
      // `sourcefile` option below to improve error messages
      filename: defaultCssBundleName,
      code: Buffer.from(css),
      minify: true,
    })

    for (const warning of warnings) {
      let msg = `[lightningcss minify] ${warning.message}`
      msg += `\n${generateCodeFrame(css, {
        line: warning.loc.line,
        column: warning.loc.column - 1, // 1-based
      })}`
      config.logger.warn(colors.yellow(msg))
    }

    // NodeJS res.code = Buffer
    // Deno res.code = Uint8Array
    // For correct decode compiled css need to use TextDecoder
    // LightningCSS output does not return a linebreak at the end
    return decoder.decode(code) + (inlined ? '' : '\n')
  } catch (e) {
    e.message = `[lightningcss minify] ${e.message}`
    const friendlyMessage = getLightningCssErrorMessageForIeSyntaxes(css)
    if (friendlyMessage) {
      e.message += friendlyMessage
    }

    if (e.loc) {
      e.loc = {
        line: e.loc.line,
        column: e.loc.column - 1, // 1-based
      }
      e.frame = generateCodeFrame(css, e.loc)
    }
    throw e
  }
}