feat(css): use esbuild.log* options when minifying (#9210)

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

@@ -1249,18 +1249,25 @@ async function minifyCSS(css: string, config: ResolvedConfig) {
 function resolveEsbuildMinifyOptions(
   options: ESBuildOptions
 ): TransformOptions {
+  const base: TransformOptions = {
+    logLevel: options.logLevel,
+    logLimit: options.logLimit,
+    logOverride: options.logOverride
+  }
+
   if (
     options.minifyIdentifiers != null ||
     options.minifySyntax != null ||
     options.minifyWhitespace != null
   ) {
     return {
+      ...base,
       minifyIdentifiers: options.minifyIdentifiers ?? true,
       minifySyntax: options.minifySyntax ?? true,
       minifyWhitespace: options.minifyWhitespace ?? true
     }
   } else {
-    return { minify: true }
+    return { ...base, minify: true }
   }
 }
 

playground/css/__tests__/css.spec.ts

@@ -442,3 +442,10 @@ test('aliased css has content', async () => {
   // expect(await page.textContent('.aliased-content')).toMatch('.aliased')
   expect(await getColor('.aliased-module')).toBe('blue')
 })
+
+test.runIf(isBuild)('warning can be suppressed by esbuild.logOverride', () => {
+  serverLogs.forEach((log) => {
+    // no warning from esbuild css minifier
+    expect(log).not.toMatch('unsupported-css-property')
+  })
+})

playground/css/main.js

@@ -104,3 +104,5 @@ import aliasModule from '#alias-module'
 document
   .querySelector('.aliased-module')
   .classList.add(aliasModule.aliasedModule)
+
+import './unsupported.css'

playground/css/unsupported.css

@@ -0,0 +1,3 @@
+.unsupported {
+  overflow-x: hidden;
+}

playground/css/vite.config.js

@@ -7,6 +7,11 @@ module.exports = {
   build: {
     cssTarget: 'chrome61'
   },
+  esbuild: {
+    logOverride: {
+      'unsupported-css-property': 'silent'
+    }
+  },
   resolve: {
     alias: {
       '@': __dirname,