refactor(cli): hierarchical indentation for styled CLI output

packages/webpack-cli/src/webpack-cli.ts

@@ -1492,11 +1492,11 @@ class WebpackCLI {
             : helper.commandDescription(command);
 
           if (commandDescription.length > 0) {
-            output = [...output, `${INDENT}${commandDescription}`, ""];
+            output = [...output, commandDescription, ""];
           }
 
           // Usage
-          output = [...output, `${INDENT}${bold("Usage:")} ${helper.commandUsage(command)}`, ""];
+          output = [...output, `${bold("Usage:")} ${helper.commandUsage(command)}`, ""];
 
           // Arguments
           output = addSection(
@@ -1689,34 +1689,34 @@ class WebpackCLI {
 
   /** A horizontal rule used to separate sections. */
   #uiDivider(): string {
-    return `${UI_INDENT}${this.colors.blue("─".repeat(UI_DIVIDER_WIDTH))}`;
+    return this.colors.blue("─".repeat(UI_DIVIDER_WIDTH));
   }
 
   /** A branded title, e.g. `⬡ webpack build`. */
   #uiHeader(title: string): string {
     const { bold, cyan } = this.colors;
-    return `${UI_INDENT}${bold(cyan("⬡"))} ${bold(cyan(title))}`;
+    return `${bold(cyan("⬡"))} ${bold(cyan(title))}`;
   }
 
   /** A section heading with an underline, e.g. `Options` followed by a divider. */
   #uiSectionTitle(title: string): string {
     const { bold, cyan } = this.colors;
-    return `${UI_INDENT}${bold(cyan(title))}\n${this.#uiDivider()}`;
+    return `${bold(cyan(title))}\n${this.#uiDivider()}`;
   }
 
   /** A single status message prefixed with an icon (`✔`/`✖`/`⚠`/`ℹ`). */
   #uiStatusLine(kind: StatusKind, message: string): string {
     const { green, red, yellow, cyan } = this.colors;
     const color = { success: green, error: red, warning: yellow, info: cyan }[kind];
-    return `${UI_INDENT}${color(UI_STATUS_ICONS[kind])} ${message}`;
+    return `${color(UI_STATUS_ICONS[kind])} ${message}`;
   }
 
   /** The header block printed at the top of a framed command (`info`, `version`, …). */
   #uiCommandHeader(name: string, description?: string): string {
     const lines = ["", this.#uiHeader(`webpack ${name}`), this.#uiDivider()];
 
     if (description) {
-      lines.push(`${UI_INDENT}${description}`, "");
+      lines.push(description, "");
     }
 
     return lines.join("\n");
@@ -1729,15 +1729,15 @@ class WebpackCLI {
 
     if (!options.verbose) {
       lines.push(
-        `${UI_INDENT}${cyan("ℹ")} Run ${bold("'webpack --help=verbose'")} to see all available commands and options.`,
+        `${cyan("ℹ")} Run ${bold("'webpack --help=verbose'")} to see all available commands and options.`,
       );
     }
 
     lines.push(
       "",
-      `${UI_INDENT}${bold("Webpack documentation:")}  ${cyan("https://webpack.js.org/")}`,
-      `${UI_INDENT}${bold("CLI documentation:")}      ${cyan("https://webpack.js.org/api/cli/")}`,
-      `${UI_INDENT}${bold("Made with")} ${red("♥")} ${bold("by the webpack team")}`,
+      `${bold("Webpack documentation:")}  ${cyan("https://webpack.js.org/")}`,
+      `${bold("CLI documentation:")}      ${cyan("https://webpack.js.org/api/cli/")}`,
+      `${bold("Made with")} ${red("♥")} ${bold("by the webpack team")}`,
     );
 
     return lines.join("\n");

test/api/__snapshots__/CLI.test.js.snap.webpack5

@@ -6,10 +6,10 @@ exports[`CLI API custom help output should display help information 1`] = `
     "",
   ],
   [
-    "  ⬡ --mode",
+    "⬡ --mode",
   ],
   [
-    "  ────────────────────────────────────────────────────────────────────────",
+    "────────────────────────────────────────────────────────────────────────",
   ],
   [
     "  Usage: webpack --mode <value>",
@@ -21,17 +21,17 @@ exports[`CLI API custom help output should display help information 1`] = `
     "  Possible values: 'development' | 'production' | 'none'",
   ],
   [
-    "  ────────────────────────────────────────────────────────────────────────",
+    "────────────────────────────────────────────────────────────────────────",
   ],
   [
     "",
   ],
   [
-    "  ℹ Run 'webpack --help=verbose' to see all available commands and options.
+    "ℹ Run 'webpack --help=verbose' to see all available commands and options.
 
-  Webpack documentation:  https://webpack.js.org/
-  CLI documentation:      https://webpack.js.org/api/cli/
-  Made with ♥ by the webpack team",
+Webpack documentation:  https://webpack.js.org/
+CLI documentation:      https://webpack.js.org/api/cli/
+Made with ♥ by the webpack team",
   ],
 ]
 `;

test/configtest/with-config-path/__snapshots__/with-config-path.test.js.snap.webpack5

@@ -18,50 +18,50 @@ exports[`'configtest' command with the configuration path option should throw sy
 exports[`'configtest' command with the configuration path option should throw syntax error: stdout 1`] = `""`;
 
 exports[`'configtest' command with the configuration path option should throw validation error: stderr 1`] = `
-"  ✖ Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
+"✖ Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
  - configuration.mode should be one of these:
    "development" | "production" | "none"
    -> Enable production optimizations or development hints."
 `;
 
 exports[`'configtest' command with the configuration path option should throw validation error: stdout 1`] = `
 "
-  ⬡ webpack configtest
-  ────────────────────────────────────────────────────────────────────────
-  Validating your webpack configuration.
+⬡ webpack configtest
+────────────────────────────────────────────────────────────────────────
+Validating your webpack configuration.
 
-  ℹ Validating: ./error.config.js"
+ℹ Validating: ./error.config.js"
 `;
 
 exports[`'configtest' command with the configuration path option should validate the config with alias 't': stderr 1`] = `
-"  ✖ Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
+"✖ Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
  - configuration.mode should be one of these:
    "development" | "production" | "none"
    -> Enable production optimizations or development hints."
 `;
 
 exports[`'configtest' command with the configuration path option should validate the config with alias 't': stdout 1`] = `
 "
-  ⬡ webpack configtest
-  ────────────────────────────────────────────────────────────────────────
-  Validating your webpack configuration.
+⬡ webpack configtest
+────────────────────────────────────────────────────────────────────────
+Validating your webpack configuration.
 
-  ℹ Validating: ./error.config.js"
+ℹ Validating: ./error.config.js"
 `;
 
 exports[`'configtest' command with the configuration path option should validate webpack config successfully: stderr 1`] = `""`;
 
 exports[`'configtest' command with the configuration path option should validate webpack config successfully: stdout 1`] = `
 "
-  ⬡ webpack configtest
-  ────────────────────────────────────────────────────────────────────────
-  Validating your webpack configuration.
+⬡ webpack configtest
+────────────────────────────────────────────────────────────────────────
+Validating your webpack configuration.
 
-  ℹ Validating: ./basic.config.js
-  ✔ No validation errors found.
-  ℹ Run 'webpack --help=verbose' to see all available commands and options.
+ℹ Validating: ./basic.config.js
+✔ No validation errors found.
+ℹ Run 'webpack --help=verbose' to see all available commands and options.
 
-  Webpack documentation:  https://webpack.js.org/
-  CLI documentation:      https://webpack.js.org/api/cli/
-  Made with ♥ by the webpack team"
+Webpack documentation:  https://webpack.js.org/
+CLI documentation:      https://webpack.js.org/api/cli/
+Made with ♥ by the webpack team"
 `;

test/configtest/without-config-path-custom-extension/__snapshots__/without-config-path.test.js.snap.webpack5

@@ -4,15 +4,15 @@ exports[`'configtest' command without the configuration path option should valid
 
 exports[`'configtest' command without the configuration path option should validate default configuration: stdout 1`] = `
 "
-  ⬡ webpack configtest
-  ────────────────────────────────────────────────────────────────────────
-  Validating your webpack configuration.
+⬡ webpack configtest
+────────────────────────────────────────────────────────────────────────
+Validating your webpack configuration.
 
-  ℹ Validating: <cwd>/test/configtest/without-config-path-custom-extension/webpack.config.json
-  ✔ No validation errors found.
-  ℹ Run 'webpack --help=verbose' to see all available commands and options.
+ℹ Validating: <cwd>/test/configtest/without-config-path-custom-extension/webpack.config.json
+✔ No validation errors found.
+ℹ Run 'webpack --help=verbose' to see all available commands and options.
 
-  Webpack documentation:  https://webpack.js.org/
-  CLI documentation:      https://webpack.js.org/api/cli/
-  Made with ♥ by the webpack team"
+Webpack documentation:  https://webpack.js.org/
+CLI documentation:      https://webpack.js.org/api/cli/
+Made with ♥ by the webpack team"
 `;

test/configtest/without-config-path-error/__snapshots__/without-config-path-error.test.js.snap.webpack5

@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`'configtest' command without the configuration path option should validate default configuration: stderr 1`] = `
-"  ✖ Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
+"✖ Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
  - configuration.mode should be one of these:
    "development" | "production" | "none"
    -> Enable production optimizations or development hints."
 `;
 
 exports[`'configtest' command without the configuration path option should validate default configuration: stdout 1`] = `
 "
-  ⬡ webpack configtest
-  ────────────────────────────────────────────────────────────────────────
-  Validating your webpack configuration.
+⬡ webpack configtest
+────────────────────────────────────────────────────────────────────────
+Validating your webpack configuration.
 
-  ℹ Validating: <cwd>/test/configtest/without-config-path-error/webpack.config.js"
+ℹ Validating: <cwd>/test/configtest/without-config-path-error/webpack.config.js"
 `;

test/configtest/without-config-path-multi-compiler-mode/__snapshots__/without-config-path-multi-compiler-mode.test.js.snap.webpack5

@@ -4,15 +4,15 @@ exports[`'configtest' command without the configuration path option should valid
 
 exports[`'configtest' command without the configuration path option should validate default configuration: stdout 1`] = `
 "
-  ⬡ webpack configtest
-  ────────────────────────────────────────────────────────────────────────
-  Validating your webpack configuration.
+⬡ webpack configtest
+────────────────────────────────────────────────────────────────────────
+Validating your webpack configuration.
 
-  ℹ Validating: <cwd>/test/configtest/without-config-path-multi-compiler-mode/webpack.config.js
-  ✔ No validation errors found.
-  ℹ Run 'webpack --help=verbose' to see all available commands and options.
+ℹ Validating: <cwd>/test/configtest/without-config-path-multi-compiler-mode/webpack.config.js
+✔ No validation errors found.
+ℹ Run 'webpack --help=verbose' to see all available commands and options.
 
-  Webpack documentation:  https://webpack.js.org/
-  CLI documentation:      https://webpack.js.org/api/cli/
-  Made with ♥ by the webpack team"
+Webpack documentation:  https://webpack.js.org/
+CLI documentation:      https://webpack.js.org/api/cli/
+Made with ♥ by the webpack team"
 `;

test/configtest/without-config-path-no-configuration/__snapshots__/without-config-path-no-configuration.test.js.snap.webpack5

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`'configtest' command without the configuration path option should validate default configuration: stderr 1`] = `"  ✖ No configuration found."`;
+exports[`'configtest' command without the configuration path option should validate default configuration: stderr 1`] = `"✖ No configuration found."`;
 
 exports[`'configtest' command without the configuration path option should validate default configuration: stdout 1`] = `
 "
-  ⬡ webpack configtest
-  ────────────────────────────────────────────────────────────────────────
-  Validating your webpack configuration.
+⬡ webpack configtest
+────────────────────────────────────────────────────────────────────────
+Validating your webpack configuration.
 "
 `;

test/configtest/without-config-path/__snapshots__/without-config-path.test.js.snap.webpack5

@@ -4,15 +4,15 @@ exports[`'configtest' command without the configuration path option should valid
 
 exports[`'configtest' command without the configuration path option should validate default configuration: stdout 1`] = `
 "
-  ⬡ webpack configtest
-  ────────────────────────────────────────────────────────────────────────
-  Validating your webpack configuration.
+⬡ webpack configtest
+────────────────────────────────────────────────────────────────────────
+Validating your webpack configuration.
 
-  ℹ Validating: <cwd>/test/configtest/without-config-path/webpack.config.js
-  ✔ No validation errors found.
-  ℹ Run 'webpack --help=verbose' to see all available commands and options.
+ℹ Validating: <cwd>/test/configtest/without-config-path/webpack.config.js
+✔ No validation errors found.
+ℹ Run 'webpack --help=verbose' to see all available commands and options.
 
-  Webpack documentation:  https://webpack.js.org/
-  CLI documentation:      https://webpack.js.org/api/cli/
-  Made with ♥ by the webpack team"
+Webpack documentation:  https://webpack.js.org/
+CLI documentation:      https://webpack.js.org/api/cli/
+Made with ♥ by the webpack team"
 `;