feat: minify css with esbuild, deprecate build.cleanCssOptions (#4371)

packages/playground/vue/vite.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
   plugins: [vuePlugin(), vueI18nPlugin],
   build: {
     // to make tests faster
-    minify: false
+    // minify: false
   },
   css: {
     modules: {

packages/vite/LICENSE.md

@@ -1160,33 +1160,6 @@ Repository: git+https://github.com/paulmillr/chokidar.git
 
 ---------------------------------------
 
-## clean-css
-License: MIT
-By: Jakub Pawlowicz
-Repository: https://github.com/jakubpawlowicz/clean-css.git
-
-> Copyright (C) 2017 JakubPawlowicz.com
-> 
-> Permission is hereby granted, free of charge, to any person obtaining a copy
-> of this software and associated documentation files (the "Software"), to deal
-> in the Software without restriction, including without limitation the rights
-> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-> copies of the Software, and to permit persons to whom the Software is furnished
-> to do so, subject to the following conditions:
-> 
-> The above copyright notice and this permission notice shall be included in
-> all copies or substantial portions of the Software.
-> 
-> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-> EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
-> OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-> IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
-> DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
-> ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
-> DEALINGS IN THE SOFTWARE.
-
----------------------------------------
-
 ## color-convert
 License: MIT
 By: Heather Arthur

packages/vite/package.json

@@ -64,7 +64,6 @@
     "@rollup/plugin-node-resolve": "13.0.4",
     "@rollup/plugin-typescript": "^8.2.3",
     "@rollup/pluginutils": "^4.1.1",
-    "@types/clean-css": "^4.2.5",
     "@types/convert-source-map": "^1.5.2",
     "@types/debug": "^4.1.7",
     "@types/es-module-lexer": "^0.3.0",
@@ -87,7 +86,6 @@
     "cac": "^6.7.3",
     "chalk": "^4.1.1",
     "chokidar": "^3.5.2",
-    "clean-css": "^5.1.3",
     "compression": "^1.7.4",
     "connect": "^3.7.0",
     "connect-history-api-fallback": "^1.6.0",

packages/vite/src/node/build.ts

@@ -31,7 +31,6 @@ import dynamicImportVars from '@rollup/plugin-dynamic-import-vars'
 import { RollupDynamicImportVarsOptions } from 'types/dynamicImportVars'
 import { Logger } from './logger'
 import { TransformOptions } from 'esbuild'
-import { CleanCSS } from 'types/clean-css'
 import { dataURIPlugin } from './plugins/dataUri'
 import { buildImportAnalysisPlugin } from './plugins/importAnalysisBuild'
 import { resolveSSRExternal, shouldExternalizeForSSR } from './ssr/ssrExternal'
@@ -116,10 +115,9 @@ export interface BuildOptions {
    */
   terserOptions?: Terser.MinifyOptions
   /**
-   * Options for clean-css
-   * https://github.com/jakubpawlowicz/clean-css#constructor-options
+   * @deprecated Vite now uses esbuild for CSS minification.
    */
-  cleanCssOptions?: CleanCSS.Options
+  cleanCssOptions?: any
   /**
    * Will be merged with internal rollup options.
    * https://rollupjs.org/guide/en/#big-list-of-options
@@ -205,7 +203,9 @@ export interface LibraryOptions {
 
 export type LibraryFormats = 'es' | 'cjs' | 'umd' | 'iife'
 
-export type ResolvedBuildOptions = Required<Omit<BuildOptions, 'base'>>
+export type ResolvedBuildOptions = Required<
+  Omit<BuildOptions, 'base' | 'cleanCssOptions'>
+>
 
 export function resolveBuildOptions(raw?: BuildOptions): ResolvedBuildOptions {
   const resolved: ResolvedBuildOptions = {
@@ -229,7 +229,6 @@ export function resolveBuildOptions(raw?: BuildOptions): ResolvedBuildOptions {
     },
     minify: raw?.ssr ? false : 'terser',
     terserOptions: {},
-    cleanCssOptions: {},
     write: true,
     emptyOutDir: null,
     manifest: false,

packages/vite/src/node/config.ts

@@ -528,6 +528,13 @@ export async function resolveConfig(
     }
   })
 
+  if (config.build?.cleanCssOptions) {
+    logDeprecationWarning(
+      'build.cleanCssOptions',
+      'Vite now uses esbuild for CSS minification.'
+    )
+  }
+
   return resolved
 }
 

packages/vite/src/node/index.ts

@@ -80,6 +80,5 @@ export type { Connect } from 'types/connect'
 export type { HttpProxy } from 'types/http-proxy'
 export type { FSWatcher, WatchOptions } from 'types/chokidar'
 export type { Terser } from 'types/terser'
-export type { CleanCSS } from 'types/clean-css'
 export type { RollupCommonJSOptions } from 'types/commonjs'
 export type { RollupDynamicImportVarsOptions } from 'types/dynamicImportVars'

packages/vite/src/node/plugins/css.ts

@@ -42,6 +42,7 @@ import type Stylus from 'stylus' // eslint-disable-line node/no-extraneous-impor
 import type Less from 'less'
 import { Alias } from 'types/alias'
 import type { ModuleNode } from '../server/moduleGraph'
+import { transform, formatMessages } from 'esbuild'
 
 // const debug = createDebugger('vite:css')
 
@@ -866,31 +867,18 @@ async function doUrlReplace(
   return `url(${wrap}${await replacer(rawUrl)}${wrap})`
 }
 
-let CleanCSS: any
-
 async function minifyCSS(css: string, config: ResolvedConfig) {
-  CleanCSS = CleanCSS || (await import('clean-css')).default
-  const res = new CleanCSS({
-    rebase: false,
-    ...config.build.cleanCssOptions
-  }).minify(css)
-
-  if (res.errors && res.errors.length) {
-    config.logger.error(chalk.red(`error when minifying css:\n${res.errors}`))
-    throw res.errors[0]
-  }
-
-  // do not warn on remote @imports
-  const warnings =
-    res.warnings &&
-    res.warnings.filter((m: string) => !m.includes('remote @import'))
-  if (warnings && warnings.length) {
+  const { code, warnings } = await transform(css, {
+    loader: 'css',
+    minify: true
+  })
+  if (warnings.length) {
+    const msgs = await formatMessages(warnings, { kind: 'warning' })
     config.logger.warn(
-      chalk.yellow(`warnings when minifying css:\n${warnings.join('\n')}`)
+      chalk.yellow(`warnings when minifying css:\n${msgs.join('\n')}`)
     )
   }
-
-  return res.styles
+  return code
 }
 
 // #1845