From a7850d7fe6c52225acd614167495d765ed2385f3 Mon Sep 17 00:00:00 2001
From: Zach <zachauten@gmail.com>
Date: Sun, 6 Feb 2022 05:00:06 -0500
Subject: [PATCH] fix(ext/console): fix uncaught TypeError in css styling
 (#13567)

When using css coloring in the console, non-color values should be ignored rather than throw exceptions.
Fixes #13469
---
 cli/tests/unit/console_test.ts | 28 ++++++++++++++++++++++++++++
 ext/console/02_console.js      | 32 ++++++++++++++++++++++++--------
 2 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/cli/tests/unit/console_test.ts b/cli/tests/unit/console_test.ts
index af42a655b2..af78cf49e6 100644
--- a/cli/tests/unit/console_test.ts
+++ b/cli/tests/unit/console_test.ts
@@ -1000,6 +1000,7 @@ Deno.test(function consoleTestWithStyleSpecifier() {
 });
 
 Deno.test(function consoleParseCssColor() {
+  assertEquals(parseCssColor("inherit"), null);
   assertEquals(parseCssColor("black"), [0, 0, 0]);
   assertEquals(parseCssColor("darkmagenta"), [139, 0, 139]);
   assertEquals(parseCssColor("slateblue"), [106, 90, 205]);
@@ -1019,6 +1020,14 @@ Deno.test(function consoleParseCssColor() {
 });
 
 Deno.test(function consoleParseCss() {
+  assertEquals(
+    parseCss("background-color: inherit"),
+    { ...DEFAULT_CSS, backgroundColor: "inherit" },
+  );
+  assertEquals(
+    parseCss("color: inherit"),
+    { ...DEFAULT_CSS, color: "inherit" },
+  );
   assertEquals(
     parseCss("background-color: red"),
     { ...DEFAULT_CSS, backgroundColor: "red" },
@@ -1073,10 +1082,22 @@ Deno.test(function consoleParseCss() {
 });
 
 Deno.test(function consoleCssToAnsi() {
+  assertEquals(
+    cssToAnsiEsc({ ...DEFAULT_CSS, backgroundColor: "inherit" }),
+    "_[49m",
+  );
+  assertEquals(
+    cssToAnsiEsc({ ...DEFAULT_CSS, backgroundColor: "foo" }),
+    "_[49m",
+  );
   assertEquals(
     cssToAnsiEsc({ ...DEFAULT_CSS, backgroundColor: "black" }),
     "_[40m",
   );
+  assertEquals(
+    cssToAnsiEsc({ ...DEFAULT_CSS, color: "inherit" }),
+    "_[39m",
+  );
   assertEquals(
     cssToAnsiEsc({ ...DEFAULT_CSS, color: "blue" }),
     "_[34m",
@@ -1572,6 +1593,13 @@ Deno.test(function consoleLogShouldNotThrowError() {
   });
 });
 
+Deno.test(function consoleLogShouldNotThrowErrorWhenInvalidCssColorsAreGiven() {
+  mockConsole((console, out) => {
+    console.log("%cfoo", "color: foo; background-color: bar;");
+    assertEquals(stripColor(out.toString()), "foo\n");
+  });
+});
+
 // console.log(Invalid Date) test
 Deno.test(function consoleLogShoultNotThrowErrorWhenInvalidDateIsPassed() {
   mockConsole((console, out) => {
diff --git a/ext/console/02_console.js b/ext/console/02_console.js
index d3734b6a4a..3020c0794b 100644
--- a/ext/console/02_console.js
+++ b/ext/console/02_console.js
@@ -1621,10 +1621,18 @@
       } else if (css.backgroundColor == "white") {
         ansi += `\x1b[47m`;
       } else {
-        const [r, g, b] = ArrayIsArray(css.backgroundColor)
-          ? css.backgroundColor
-          : parseCssColor(css.backgroundColor);
-        ansi += `\x1b[48;2;${r};${g};${b}m`;
+        if (ArrayIsArray(css.backgroundColor)) {
+          const [r, g, b] = css.backgroundColor;
+          ansi += `\x1b[48;2;${r};${g};${b}m`;
+        } else {
+          const parsed = parseCssColor(css.backgroundColor);
+          if (parsed !== null) {
+            const [r, g, b] = parsed;
+            ansi += `\x1b[48;2;${r};${g};${b}m`;
+          } else {
+            ansi += "\x1b[49m";
+          }
+        }
       }
     }
     if (!colorEquals(css.color, prevCss.color)) {
@@ -1647,10 +1655,18 @@
       } else if (css.color == "white") {
         ansi += `\x1b[37m`;
       } else {
-        const [r, g, b] = ArrayIsArray(css.color)
-          ? css.color
-          : parseCssColor(css.color);
-        ansi += `\x1b[38;2;${r};${g};${b}m`;
+        if (ArrayIsArray(css.color)) {
+          const [r, g, b] = css.color;
+          ansi += `\x1b[38;2;${r};${g};${b}m`;
+        } else {
+          const parsed = parseCssColor(css.color);
+          if (parsed !== null) {
+            const [r, g, b] = parsed;
+            ansi += `\x1b[38;2;${r};${g};${b}m`;
+          } else {
+            ansi += "\x1b[39m";
+          }
+        }
       }
     }
     if (css.fontWeight != prevCss.fontWeight) {