feat(css): improve lightningcss messages (#19880)

Author: sapphi-red

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

@@ -2131,18 +2131,14 @@ async function minifyCSS(
         code: Buffer.from(css),
         minify: true,
       })
-      if (warnings.length) {
-        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${messages.join('\n')}`),
-        )
+
+      for (const warning of warnings) {
+        let msg = `[lightningcss minify] ${warning.message}`
+        msg += `\n${generateCodeFrame(css, {
+          line: warning.loc.line,
+          column: warning.loc.column - 1, // 1-based
+        })}`
+        config.logger.warn(colors.yellow(msg))
       }
 
       // NodeJS res.code = Buffer
@@ -2152,6 +2148,11 @@ async function minifyCSS(
       return decoder.decode(code) + (inlined ? '' : '\n')
     } catch (e) {
       e.message = `[lightningcss minify] ${e.message}`
+      const friendlyMessage = getLightningCssErrorMessageForIeSyntaxes(css)
+      if (friendlyMessage) {
+        e.message += friendlyMessage
+      }
+
       if (e.loc) {
         e.loc = {
           line: e.loc.line,
@@ -2171,7 +2172,7 @@ async function minifyCSS(
     if (warnings.length) {
       const msgs = await formatMessages(warnings, { kind: 'warning' })
       config.logger.warn(
-        colors.yellow(`warnings when minifying css:\n${msgs.join('\n')}`),
+        colors.yellow(`[esbuild css minify]\n${msgs.join('\n')}`),
       )
     }
     // esbuild output does return a linebreak at the end
@@ -3503,23 +3504,11 @@ async function compileLightningCSS(
         line: e.loc.line,
         column: e.loc.column - 1, // 1-based
       }
-      // add friendly error for https://github.com/parcel-bundler/lightningcss/issues/39
       try {
         const code = fs.readFileSync(e.fileName, 'utf-8')
-        const commonIeMessage =
-          ', which was used in the past to support old Internet Explorer versions.' +
-          ' This is not a valid CSS syntax and will be ignored by modern browsers. ' +
-          '\nWhile this is not supported by LightningCSS, you can set `css.lightningcss.errorRecovery: true` to strip these codes.'
-        if (/[\s;{]\*[a-zA-Z-][\w-]+\s*:/.test(code)) {
-          // https://stackoverflow.com/a/1667560
-          e.message +=
-            '.\nThis file contains star property hack (e.g. `*zoom`)' +
-            commonIeMessage
-        } else if (/min-width:\s*0\\0/.test(code)) {
-          // https://stackoverflow.com/a/14585820
-          e.message +=
-            '.\nThis file contains @media zero hack (e.g. `@media (min-width: 0\\0)`)' +
-            commonIeMessage
+        const friendlyMessage = getLightningCssErrorMessageForIeSyntaxes(code)
+        if (friendlyMessage) {
+          e.message += friendlyMessage
         }
       } catch {}
     }
@@ -3596,6 +3585,31 @@ async function compileLightningCSS(
   }
 }
 
+// friendly error for https://github.com/parcel-bundler/lightningcss/issues/39
+function getLightningCssErrorMessageForIeSyntaxes(
+  code: string,
+): string | undefined {
+  const commonIeMessage =
+    ', which was used in the past to support old Internet Explorer versions.' +
+    ' This is not a valid CSS syntax and will be ignored by modern browsers. ' +
+    '\nWhile this is not supported by LightningCSS, you can set `css.lightningcss.errorRecovery: true` to strip these codes.'
+  if (/[\s;{]\*[a-zA-Z-][\w-]+\s*:/.test(code)) {
+    // https://stackoverflow.com/a/1667560
+    return (
+      '.\nThis file contains star property hack (e.g. `*zoom`)' +
+      commonIeMessage
+    )
+  }
+  if (/min-width:\s*0\\0/.test(code)) {
+    // https://stackoverflow.com/a/14585820
+    return (
+      '.\nThis file contains @media zero hack (e.g. `@media (min-width: 0\\0)`)' +
+      commonIeMessage
+    )
+  }
+  return undefined
+}
+
 // Convert https://esbuild.github.io/api/#target
 // To https://github.com/parcel-bundler/lightningcss/blob/master/node/targets.d.ts