feat(css): add build.cssMinify

docs/config/build-options.md

@@ -117,6 +117,13 @@ It should only be used when you are targeting a non-mainstream browser.
 One example is Android WeChat WebView, which supports most modern JavaScript features but not the [`#RGBA` hexadecimal color notation in CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb_colors).
 In this case, you need to set `build.cssTarget` to `chrome61` to prevent vite from transform `rgba()` colors into `#RGBA` hexadecimal notations.
 
+## build.cssMinify
+
+- **Type:** `boolean`
+- **Default:** the same as [`build.minify`](#build-minify)
+
+This option allows users to override CSS minification specifically instead of defaulting to `build.minify`, so you can configure minification for JS and CSS separately. Vite uses `esbuild` to minify CSS.
+
 ## build.sourcemap
 
 - **Type:** `boolean | 'inline' | 'hidden'`

packages/vite/src/node/build.ts

@@ -126,6 +126,12 @@ export interface BuildOptions {
    * @default target
    */
   cssTarget?: TransformOptions['target'] | false
+  /**
+   * Override CSS minification specifically instead of defaulting to `build.minify`,
+   * so you can configure minification for JS and CSS separately.
+   * @default minify
+   */
+  cssMinify?: boolean
   /**
    * If `true`, a separate sourcemap file will be created. If 'inline', the
    * sourcemap will be appended to the resulting output file as data URI.
@@ -395,6 +401,10 @@ export function resolveBuildOptions(
     resolved.minify = 'esbuild'
   }
 
+  if (resolved.cssMinify == null) {
+    resolved.cssMinify = !!resolved.minify
+  }
+
   return resolved
 }
 

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

@@ -437,7 +437,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           code = modulesCode
         } else {
           let content = css
-          if (config.build.minify) {
+          if (config.build.cssMinify) {
             content = await minifyCSS(content, config)
           }
           code = `export default ${JSON.stringify(content)}`
@@ -1121,7 +1121,7 @@ async function finalizeCss(
   if (css.includes('@import') || css.includes('@charset')) {
     css = await hoistAtRules(css)
   }
-  if (minify && config.build.minify) {
+  if (minify && config.build.cssMinify) {
     css = await minifyCSS(css, config)
   }
   return css

playground/css/__tests__/no-css-minify/no-css-minify.spec.ts

@@ -0,0 +1,14 @@
+import { describe, expect, test } from 'vitest'
+import { findAssetFile, isBuild } from '~utils'
+
+describe.runIf(isBuild)('no css minify', () => {
+  test('js minified but css not minified', () => {
+    expect(findAssetFile(/index-\w+\.js$/, 'no-css-minify')).not.toMatch(
+      '(function polyfill() {',
+    )
+    expect(findAssetFile(/index-\w+\.css$/, 'no-css-minify')).toMatch(`\
+.test-minify {
+  color: rgba(255, 255, 0, 0.7);
+}`)
+  })
+})

playground/css/__tests__/no-css-minify/vite.config.js

@@ -0,0 +1 @@
+module.exports = require('../../vite.config-no-css-minify')

playground/css/package.json

@@ -9,7 +9,10 @@
     "preview": "vite preview",
     "dev:relative-base": "vite --config ./vite.config-relative-base.js dev",
     "build:relative-base": "vite --config ./vite.config-relative-base.js build",
-    "preview:relative-base": "vite --config ./vite.config-relative-base.js preview"
+    "preview:relative-base": "vite --config ./vite.config-relative-base.js preview",
+    "dev:no-css-minify": "vite --config ./vite.config-no-css-minify.js dev",
+    "build:no-css-minify": "vite --config ./vite.config-no-css-minify.js build",
+    "preview:no-css-minify": "vite --config ./vite.config-no-css-minify.js preview"
   },
   "devDependencies": {
     "@vitejs/test-css-dep": "link:./css-dep",

playground/css/vite.config-no-css-minify.js

@@ -0,0 +1,14 @@
+const baseConfig = require('./vite.config.js')
+
+/**
+ * @type {import('vite').UserConfig}
+ */
+module.exports = {
+  ...baseConfig,
+  build: {
+    ...baseConfig.build,
+    outDir: 'dist/no-css-minify',
+    minify: true,
+    cssMinify: false,
+  },
+}