feat: add build.cssMinifyTarget option

fixes vitejs#4746
fixes vitejs#5070

docs/config/index.md

@@ -643,6 +643,17 @@ createServer()
 
   If disabled, all CSS in the entire project will be extracted into a single CSS file.
 
+### build.cssMinifyTarget
+
+- **Type:** `string | string[]`
+- **Default:** the same as [`build.target`](/config/#build-target)
+
+  This options allows users to set a different browser target for CSS minification from the one used for JavaScript transpilation.
+
+  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.cssMinifyTarget` to `chrome61` to prevent vite from transform `rgba()` colors into `#RGBA` hexadecimal notations.
+
 ### build.sourcemap
 
 - **Type:** `boolean | 'inline' | 'hidden'`

packages/playground/css/__tests__/css.spec.ts

@@ -338,3 +338,14 @@ test('inlined', async () => {
   // should not insert css
   expect(await getColor('.inlined')).toBe('black')
 })
+
+test('minify css', async () => {
+  if (!isBuild) {
+    return
+  }
+
+  // should keep the rgba() syntax
+  const cssFile = findAssetFile(/index\.\w+\.css$/)
+  expect(cssFile).toMatch('rgba(')
+  expect(cssFile).not.toMatch('#ffff00b3')
+})

packages/playground/css/main.js

@@ -1,3 +1,5 @@
+import './minify.css'
+
 import css from './imported.css'
 text('.imported-css', css)
 

packages/playground/css/minify.css

@@ -0,0 +1,3 @@
+.test-minify {
+  color: rgba(255, 255, 0, 0.7);
+}

packages/playground/css/vite.config.js

@@ -3,6 +3,9 @@ const path = require('path')
  * @type {import('vite').UserConfig}
  */
 module.exports = {
+  build: {
+    cssMinifyTarget: 'chrome61'
+  },
   resolve: {
     alias: {
       '@': __dirname

packages/vite/src/node/build.ts

@@ -102,6 +102,15 @@ export interface BuildOptions {
    * @default true
    */
   cssCodeSplit?: boolean
+  /**
+   * An optional separate target for CSS minification.
+   * As esbuild only supports configuring targets to mainstream
+   * browsers, users may need this option when they are targeting
+   * a niche browser that comes with most modern JavaScript features
+   * but has poor CSS support, e.g. Android WeChat WebView, which
+   * doesn't support the #RGBA syntax.
+   */
+  cssMinifyTarget?: TransformOptions['target'] | false
   /**
    * If `true`, a separate sourcemap file will be created. If 'inline', the
    * sourcemap will be appended to the resulting output file as data URI.
@@ -232,6 +241,7 @@ export function resolveBuildOptions(raw?: BuildOptions): ResolvedBuildOptions {
     assetsDir: 'assets',
     assetsInlineLimit: 4096,
     cssCodeSplit: !raw?.lib,
+    cssMinifyTarget: false,
     sourcemap: false,
     rollupOptions: {},
     commonjsOptions: {
@@ -275,6 +285,10 @@ export function resolveBuildOptions(raw?: BuildOptions): ResolvedBuildOptions {
     resolved.target = 'es2019'
   }
 
+  if (!resolved.cssMinifyTarget) {
+    resolved.cssMinifyTarget = resolved.target
+  }
+
   // normalize false string into actual false
   if ((resolved.minify as any) === 'false') {
     resolved.minify = false

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

@@ -906,7 +906,7 @@ async function minifyCSS(css: string, config: ResolvedConfig) {
   const { code, warnings } = await transform(css, {
     loader: 'css',
     minify: true,
-    target: config.build.target || undefined
+    target: config.build.cssMinifyTarget || undefined
   })
   if (warnings.length) {
     const msgs = await formatMessages(warnings, { kind: 'warning' })