util: add %c to ANSI transform for console.log()

Author: jcbhmr

doc/api/console.md

@@ -118,10 +118,11 @@ changes:
     streams. **Default:** `true`.
   * `colorMode` {boolean|string} Set color support for this `Console` instance.
     Setting to `true` enables coloring while inspecting values. Setting to
-    `false` disables coloring while inspecting values. Setting to
-    `'auto'` makes color support depend on the value of the `isTTY` property
-    and the value returned by `getColorDepth()` on the respective stream. This
-    option can not be used, if `inspectOptions.colors` is set as well.
+    `false` disables coloring while inspecting values as well as disabling `%c`
+    CSS color effects. Setting to `'auto'` makes color support depend on the
+    value of the `isTTY` property and the value returned by `getColorDepth()` on
+    the respective stream. This option can not be used, if
+    `inspectOptions.colors` is set as well.
     **Default:** `'auto'`.
   * `inspectOptions` {Object} Specifies options that are passed along to
     [`util.inspect()`][].

doc/api/util.md

@@ -302,7 +302,13 @@ corresponding argument. Supported specifiers are:
 * `%O`: `Object`. A string representation of an object with generic JavaScript
   object formatting. Similar to `util.inspect()` without options. This will show
   the full object not including non-enumerable properties and proxies.
-* `%c`: `CSS`. This specifier is ignored and will skip any CSS passed in.
+* `%c`: `CSS`. Will parse basic CSS from the substitution subject like
+  `color: red` into ANSI color codes. These codes will then be placed where the
+  `%c` specifier is. Supported CSS properties are `color`, `background-color`,
+  `font-weight`, `font-style`, `text-decoration`, `text-decoration-color`, and
+  `text-decoration-line`. Unsupported CSS properties are ignored. An empty
+  `%c` CSS string substitution will become an ANSI style reset. If color is
+  disabled, `%c` is ignored.
 * `%%`: single percent sign (`'%'`). This does not consume an argument.
 * Returns: {string} The formatted string
 

lib/internal/util/inspect.js

@@ -26,8 +26,8 @@ const {
   FunctionPrototypeCall,
   FunctionPrototypeToString,
   JSONStringify,
-  MapPrototypeEntries,
   MapPrototypeGetSize,
+  MapPrototypeEntries,
   MathFloor,
   MathMax,
   MathMin,
@@ -158,6 +158,8 @@ const {
   kValidateObjectAllowArray,
 } = require('internal/validators');
 
+const { parseCss, cssToAnsi } = require('internal/util/inspect_colors');
+
 let hexSlice;
 let internalUrl;
 
@@ -2194,6 +2196,8 @@ function formatWithOptionsInternal(inspectOptions, args) {
     }
     let tempStr;
     let lastPos = 0;
+    let usedStyle = false;
+    let prevCss = null;
 
     for (let i = 0; i < first.length - 1; i++) {
       if (StringPrototypeCharCodeAt(first, i) === 37) { // '%'
@@ -2267,10 +2271,22 @@ function formatWithOptionsInternal(inspectOptions, args) {
               }
               break;
             }
-            case 99: // 'c'
-              a += 1;
-              tempStr = '';
+            case 99: { // 'c'
+              // Inspired by Deno's handling of '%c'.
+              // https://github.com/denoland/deno/blob/ece2a3de5b19588160634452638aa656218853c5/ext/console/01_console.js#L3115
+              const value = args[++a];
+              if (inspectOptions?.colors) {
+                const css = parseCss(value);
+                tempStr = cssToAnsi(css, prevCss);
+                if (tempStr !== '') {
+                  usedStyle = true;
+                  prevCss = css;
+                }
+              } else {
+                tempStr = '';
+              }
               break;
+            }
             case 37: // '%'
               str += StringPrototypeSlice(first, lastPos, i);
               lastPos = i + 1;
@@ -2296,6 +2312,9 @@ function formatWithOptionsInternal(inspectOptions, args) {
         str += StringPrototypeSlice(first, lastPos);
       }
     }
+    if (usedStyle) {
+      str += '\x1b[0m';
+    }
   }
 
   while (a < args.length) {