fix(diagnostic): dim gutter style for better visual hierarchy (#12341)

* fix(diagnostic): dim gutter style for better visual hierarchy

* fix: style

Author: chenjiahan

Cargo.lock

@@ -61,14 +61,14 @@ linked_hash_set     = { version = "0.1.5", default-features = false }
 md4                 = { version = "0.10.2", default-features = false }
 memchr              = { version = "2.7.5", default-features = false }
 micromegas-perfetto = { version = "0.9.0", default-features = false }
-miette              = { version = "7.5.0", default-features = false }
+miette              = { version = "7.6.0", default-features = false }
 mimalloc            = { version = "0.2.4", package = "mimalloc-rspack", default-features = false }
 mime_guess          = { version = "2.0.5", default-features = false, features = ["rev-mappings"] }
 notify              = { version = "8.2.0", default-features = false }
 num-bigint          = { version = "0.4.6", default-features = false }
 once_cell           = { version = "1.20.2", default-features = false }
 oneshot             = { version = "0.1.8", default-features = false, features = ["std", "async"] }
-owo-colors          = { version = "4.0.0", default-features = false }
+owo-colors          = { version = "4.0.0", default-features = false, features = ["supports-colors"] }
 parcel_sourcemap    = { version = "2.1.1", default-features = false }
 paste               = { version = "1.0.15", default-features = false }
 path-clean          = { version = "1.0.1", default-features = false }

Cargo.toml

@@ -1,5 +1,5 @@
 use itertools::Itertools;
-use rspack_error::{Diagnostic, Error, Label};
+use rspack_error::{Diagnostic, Error, Label, dim};
 
 use crate::{BoxLoader, DependencyRange};
 
@@ -48,7 +48,7 @@ impl From<ModuleBuildError> for Error {
     let source = value.error;
 
     let message = if let Some(from) = value.from {
-      format!("Module build failed (from {from}):")
+      format!("Module build failed {}:", dim(format!("(from {from})")))
     } else {
       "Module build failed:".to_string()
     };

crates/rspack_core/src/diagnostics.rs

@@ -0,0 +1,10 @@
+use owo_colors::{OwoColorize, Stream};
+
+/**
+ * Dim the text if the stream supports color.
+ */
+pub fn dim(text: impl std::fmt::Display) -> String {
+  text
+    .if_supports_color(Stream::Stdout, |text| text.dimmed())
+    .to_string()
+}

crates/rspack_error/src/colors.rs

@@ -13,6 +13,8 @@ use miette::{
 use owo_colors::{OwoColorize, Style};
 use unicode_width::UnicodeWidthChar;
 
+use crate::colors::dim;
+
 /**
 A [`ReportHandler`] that displays a given [`Report`](crate::Report) in a
 quasi-graphical way, using terminal colors, unicode drawing characters, and
@@ -212,7 +214,7 @@ impl GraphicalReportHandler {
     };
 
     let initial_indent = format!("  {} ", severity_icon.style(severity_style));
-    let rest_indent = format!("  {} ", self.theme.characters.vbar.style(severity_style));
+    let rest_indent = format!("  {} ", dim(self.theme.characters.vbar));
     let width = self.termwidth.saturating_sub(2);
     let opts = textwrap::Options::new(width)
       .initial_indent(&initial_indent)
@@ -237,21 +239,19 @@ impl GraphicalReportHandler {
         } else {
           self.theme.characters.lbot
         };
-        let initial_indent = format!(
+        let initial_indent = dim(format!(
           "  {}{}{} ",
           char, self.theme.characters.hbar, self.theme.characters.rarrow
-        )
-        .style(severity_style)
+        ))
         .to_string();
-        let rest_indent = format!(
+        let rest_indent = dim(format!(
           "  {}   ",
           if is_last {
             ' '
           } else {
             self.theme.characters.vbar
           }
-        )
-        .style(severity_style)
+        ))
         .to_string();
         let opts = textwrap::Options::new(width)
           .initial_indent(&initial_indent)

crates/rspack_error/src/displayer/renderer/graphical.rs

@@ -1,4 +1,5 @@
 mod batch_error;
+mod colors;
 mod convert;
 mod diagnosable;
 mod diagnostic;
@@ -9,6 +10,7 @@ mod macros;
 
 pub use self::{
   batch_error::BatchErrors,
+  colors::dim,
   convert::{
     AnyhowResultToRspackResultExt, SerdeResultToRspackResultExt, ToStringResultToRspackResultExt,
   },

crates/rspack_error/src/lib.rs

@@ -246,6 +246,8 @@ skip = [
     { crate = "foldhash", reason = "external dependency" },
     { crate = "wasmparser", reason = "external dependency"},
     { crate = "windows_i686_gnullvm", reason = "external dependency"},
+    { crate = "hermit-abi", reason = "external dependency"},
+    { crate = "supports-color", reason = "external dependency"},
 
     { crate = "zerocopy", reason = "external dependency"},
     { crate = "linux-raw-sys", reason = "external dependency"},

deny.toml

@@ -18,18 +18,18 @@ module.exports = isCaseInsensitiveFilesystem
 		},
 		async check(diagnostics) {
 			expect(diagnostics).toMatchInlineSnapshot(`
-			Object {
-			  "errors": Array [],
-			  "warnings": Array [
-			    Object {
-			      "code": "Sensitive Modules Warn",
-			      "message": "  ⚠ There are multiple modules with names that only differ in casing.  │   - <TEST_ROOT>/fixtures/errors/FILE.js  │     - used by <TEST_ROOT>/fixtures/errors/case-sensitive.js  │   - <TEST_ROOT>/fixtures/errors/file.js  │     - used by <TEST_ROOT>/fixtures/errors/case-sensitive.js  │ ",
-			      "moduleTrace": Array [],
-			      "stack": undefined,
-			    },
-			  ],
-			}
-		`);
+				Object {
+				  "errors": Array [],
+				  "warnings": Array [
+				    Object {
+				      "code": "Sensitive Modules Warn",
+				      "message": "  ⚠ There are multiple modules with names that only differ in casing.  │   - <TEST_ROOT>/fixtures/errors/FILE.js  │     - used by <TEST_ROOT>/fixtures/errors/case-sensitive.js  │   - <TEST_ROOT>/fixtures/errors/file.js  │     - used by <TEST_ROOT>/fixtures/errors/case-sensitive.js  │ ",
+				      "moduleTrace": Array [],
+				      "stack": undefined,
+				    },
+				  ],
+				}
+			`);
 		}
 	}
 	: {

tests/rspack-test/errorCases/error-case-sensitive.js

@@ -11,16 +11,16 @@ module.exports = {
 	},
 	async check(diagnostics) {
 		expect(diagnostics).toMatchInlineSnapshot(`
-		Object {
-		  "errors": Array [
-		    Object {
-		      "code": "GenericFailure",
-		      "message": "  × caused by plugins in Compilation.hooks.additionalChunkRuntimeRequirements  ╰─▶   × Library name must be a string or string array. Common configuration options that specific library names are 'output.library[.name]', 'entry.xyz.library[.name]', 'ModuleFederationPlugin.name' and 'ModuleFederationPlugin.library[.name]'.      ",
-		      "stack": "Error:   × caused by plugins in Compilation.hooks.additionalChunkRuntimeRequirements  ╰─▶   × Library name must be a string or string array. Common configuration options that specific library names are 'output.library[.name]', 'entry.xyz.library[.name]', 'ModuleFederationPlugin.name' and 'ModuleFederationPlugin.library[.name]'.      ",
-		    },
-		  ],
-		  "warnings": Array [],
-		}
-	`);
+			Object {
+			  "errors": Array [
+			    Object {
+			      "code": "GenericFailure",
+			      "message": "  × caused by plugins in Compilation.hooks.additionalChunkRuntimeRequirements  ╰─▶   × Library name must be a string or string array. Common configuration options that specific library names are 'output.library[.name]', 'entry.xyz.library[.name]', 'ModuleFederationPlugin.name' and 'ModuleFederationPlugin.library[.name]'.      ",
+			      "stack": "Error:   × caused by plugins in Compilation.hooks.additionalChunkRuntimeRequirements  ╰─▶   × Library name must be a string or string array. Common configuration options that specific library names are 'output.library[.name]', 'entry.xyz.library[.name]', 'ModuleFederationPlugin.name' and 'ModuleFederationPlugin.library[.name]'.      ",
+			    },
+			  ],
+			  "warnings": Array [],
+			}
+		`);
 	}
 };