From 9f2707337da4f8cca748d681b61ac968b9cca341 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Wed, 29 Sep 2021 15:48:44 +0800
Subject: [PATCH] feat(plugin-legacy): set `build.cssMinifyTarget`

fixes #4930
---
 packages/plugin-legacy/index.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/plugin-legacy/index.js b/packages/plugin-legacy/index.js
index a0a44499e34822..8c12bf804d2451 100644
--- a/packages/plugin-legacy/index.js
+++ b/packages/plugin-legacy/index.js
@@ -86,6 +86,15 @@ function viteLegacyPlugin(options = {}) {
       if (!config.build) {
         config.build = {}
       }
+
+      if (!config.build.cssMinifyTarget) {
+        // Hint for esbuild that we are targeting legacy browsers when minifying CSS.
+        // Full CSS compat table available at https://github.com/evanw/esbuild/blob/78e04680228cf989bdd7d471e02bbc2c8d345dc9/internal/compat/css_table.go
+        // But note that only the `HexRGBA` feature affects the minify outcome.
+        // HSL & rebeccapurple values will be minified away regardless the target.
+        // So targeting `chrome61` suffices to fix the compatiblity issue.
+        config.build.cssMinifyTarget = 'chrome61'
+      }
     }
   }
 
@@ -125,7 +134,7 @@ function viteLegacyPlugin(options = {}) {
           bundle,
           facadeToModernPolyfillMap,
           config.build,
-          options.externalSystemJS,
+          options.externalSystemJS
         )
         return
       }
@@ -156,7 +165,7 @@ function viteLegacyPlugin(options = {}) {
           // force using terser for legacy polyfill minification, since esbuild
           // isn't legacy-safe
           config.build,
-          options.externalSystemJS,
+          options.externalSystemJS
         )
       }
     }