feat: use lightningcss by default for cssMinify

Author: sapphi-red

packages/vite/package.json

@@ -87,6 +87,7 @@
   "dependencies": {
     "@oxc-project/runtime": "0.61.2",
     "esbuild": "^0.25.0",
+    "lightningcss": "^1.29.3",
     "picomatch": "^4.0.2",
     "postcss": "^8.5.3",
     "rolldown": "1.0.0-beta.7-commit.7452fa0",
@@ -126,7 +127,6 @@
     "etag": "^1.8.1",
     "http-proxy": "^1.18.1",
     "launch-editor-middleware": "^2.10.0",
-    "lightningcss": "^1.29.3",
     "magic-string": "^0.30.17",
     "mlly": "^1.7.4",
     "mrmime": "^2.0.1",
@@ -160,7 +160,6 @@
     "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
     "jiti": ">=1.21.0",
     "less": "*",
-    "lightningcss": "^1.21.0",
     "sass": "*",
     "sass-embedded": "*",
     "stylus": "*",
@@ -191,9 +190,6 @@
     "sugarss": {
       "optional": true
     },
-    "lightningcss": {
-      "optional": true
-    },
     "terser": {
       "optional": true
     },

packages/vite/src/node/build.ts

@@ -161,9 +161,9 @@ export interface BuildEnvironmentOptions {
   /**
    * Override CSS minification specifically instead of defaulting to `build.minify`,
    * so you can configure minification for JS and CSS separately.
-   * @default 'esbuild'
+   * @default 'lightningcss'
    */
-  cssMinify?: boolean | 'esbuild' | 'lightningcss'
+  cssMinify?: boolean | 'lightningcss' | 'esbuild'
   /**
    * If `true`, a separate sourcemap file will be created. If 'inline', the
    * sourcemap will be appended to the resulting output file as data URI.
@@ -457,7 +457,8 @@ export function resolveBuildEnvironmentOptions(
     ...merged,
     cssTarget: merged.cssTarget ?? merged.target,
     cssMinify:
-      merged.cssMinify ?? (consumer === 'server' ? 'esbuild' : !!merged.minify),
+      merged.cssMinify ??
+      (consumer === 'server' ? 'lightningcss' : !!merged.minify),
     // Resolve to false | object
     modulePreload:
       merged.modulePreload === false

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

@@ -2102,69 +2102,70 @@ async function minifyCSS(
   // regular CSS assets do end with a linebreak.
   // See https://github.com/vitejs/vite/pull/13893#issuecomment-1678628198
 
-  if (config.build.cssMinify === 'lightningcss') {
+  if (config.build.cssMinify === 'esbuild') {
     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,
+      const { code, warnings } = await transform(css, {
+        loader: 'css',
+        target: config.build.cssTarget || undefined,
+        ...resolveMinifyCssEsbuildOptions(config.esbuild || {}),
       })
       if (warnings.length) {
-        const messages = warnings.map(
-          (warning) =>
-            `${warning.message}\n` +
-            generateCodeFrame(css, {
-              line: warning.loc.line,
-              column: warning.loc.column - 1, // 1-based
-            }),
-        )
+        const msgs = await formatMessages(warnings, { kind: 'warning' })
         config.logger.warn(
-          colors.yellow(`warnings when minifying css:\n${messages.join('\n')}`),
+          colors.yellow(`warnings when minifying css:\n${msgs.join('\n')}`),
         )
       }
-
-      // 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')
+      // esbuild output does return a linebreak at the end
+      return inlined ? code.trimEnd() : code
     } catch (e) {
-      e.message = `[lightningcss minify] ${e.message}`
-      if (e.loc) {
-        e.loc = {
-          line: e.loc.line,
-          column: e.loc.column - 1, // 1-based
-        }
-        e.frame = generateCodeFrame(css, e.loc)
+      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 transform(css, {
-      loader: 'css',
-      target: config.build.cssTarget || undefined,
-      ...resolveMinifyCssEsbuildOptions(config.esbuild || {}),
+    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,
     })
     if (warnings.length) {
-      const msgs = await formatMessages(warnings, { kind: 'warning' })
+      const messages = warnings.map(
+        (warning) =>
+          `${warning.message}\n` +
+          generateCodeFrame(css, {
+            line: warning.loc.line,
+            column: warning.loc.column - 1, // 1-based
+          }),
+      )
       config.logger.warn(
-        colors.yellow(`warnings when minifying css:\n${msgs.join('\n')}`),
+        colors.yellow(`warnings when minifying css:\n${messages.join('\n')}`),
       )
     }
-    // esbuild output does return a linebreak at the end
-    return inlined ? code.trimEnd() : code
+
+    // 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) {
-    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
+    e.message = `[lightningcss minify] ${e.message}`
+    if (e.loc) {
+      e.loc = {
+        line: e.loc.line,
+        column: e.loc.column - 1, // 1-based
+      }
+      e.frame = generateCodeFrame(css, e.loc)
     }
     throw e
   }

playground/minify/vite.config.js

@@ -5,4 +5,7 @@ export default defineConfig({
     legalComments: 'none',
     minifySyntax: false,
   },
+  build: {
+    cssMinify: 'esbuild',
+  },
 })