fix(ext/console): map basic css color keywords to ansi (#13175)

2 files changed, 63 insertions, 21 deletions

diff --git a/cli/tests/unit/console_test.ts b/cli/tests/unit/console_test.ts
index 6319f85dc..bdca0f8e4 100644
--- a/cli/tests/unit/console_test.ts
+++ b/cli/tests/unit/console_test.ts
@@ -31,8 +31,8 @@ function stringify(...args: unknown[]): string {
 }
 
 interface Css {
-  backgroundColor: [number, number, number] | null;
-  color: [number, number, number] | null;
+  backgroundColor: [number, number, number] | string | null;
+  color: [number, number, number] | string | null;
   fontWeight: string | null;
   fontStyle: string | null;
   textDecorationColor: [number, number, number] | null;
@@ -1010,9 +1010,9 @@ Deno.test(function consoleParseCssColor() {
 Deno.test(function consoleParseCss() {
   assertEquals(
     parseCss("background-color: red"),
-    { ...DEFAULT_CSS, backgroundColor: [255, 0, 0] },
+    { ...DEFAULT_CSS, backgroundColor: "red" },
   );
-  assertEquals(parseCss("color: blue"), { ...DEFAULT_CSS, color: [0, 0, 255] });
+  assertEquals(parseCss("color: blue"), { ...DEFAULT_CSS, color: "blue" });
   assertEquals(
     parseCss("font-weight: bold"),
     { ...DEFAULT_CSS, fontWeight: "bold" },
@@ -1047,22 +1047,30 @@ Deno.test(function consoleParseCss() {
 
   assertEquals(
     parseCss("color:red;font-weight:bold;"),
-    { ...DEFAULT_CSS, color: [255, 0, 0], fontWeight: "bold" },
+    { ...DEFAULT_CSS, color: "red", fontWeight: "bold" },
   );
   assertEquals(
     parseCss(
       " \t\ncolor \t\n: \t\nred \t\n; \t\nfont-weight \t\n: \t\nbold \t\n; \t\n",
     ),
-    { ...DEFAULT_CSS, color: [255, 0, 0], fontWeight: "bold" },
+    { ...DEFAULT_CSS, color: "red", fontWeight: "bold" },
   );
   assertEquals(
     parseCss("color: red; font-weight: bold, font-style: italic"),
-    { ...DEFAULT_CSS, color: [255, 0, 0] },
+    { ...DEFAULT_CSS, color: "red" },
   );
 });
 
 Deno.test(function consoleCssToAnsi() {
   assertEquals(
+    cssToAnsiEsc({ ...DEFAULT_CSS, backgroundColor: "black" }),
+    "_[40m",
+  );
+  assertEquals(
+    cssToAnsiEsc({ ...DEFAULT_CSS, color: "blue" }),
+    "_[34m",
+  );
+  assertEquals(
     cssToAnsiEsc({ ...DEFAULT_CSS, backgroundColor: [200, 201, 202] }),
     "_[48;2;200;201;202m",
   );
diff --git a/ext/console/02_console.js b/ext/console/02_console.js
index 8d650d8ec..6a80f1867 100644
--- a/ext/console/02_console.js
+++ b/ext/console/02_console.js
@@ -1478,14 +1478,12 @@
 
     for (const [key, value] of rawEntries) {
       if (key == "background-color") {
-        const color = parseCssColor(value);
-        if (color != null) {
-          css.backgroundColor = color;
+        if (value != null) {
+          css.backgroundColor = value;
         }
       } else if (key == "color") {
-        const color = parseCssColor(value);
-        if (color != null) {
-          css.color = color;
+        if (value != null) {
+          css.color = value;
         }
       } else if (key == "font-weight") {
         if (value == "bold") {
@@ -1545,19 +1543,55 @@
     prevCss = prevCss ?? getDefaultCss();
     let ansi = "";
     if (!colorEquals(css.backgroundColor, prevCss.backgroundColor)) {
-      if (css.backgroundColor != null) {
-        const [r, g, b] = css.backgroundColor;
-        ansi += `\x1b[48;2;${r};${g};${b}m`;
-      } else {
+      if (css.backgroundColor == null) {
         ansi += "\x1b[49m";
+      } else if (css.backgroundColor == "black") {
+        ansi += `\x1b[40m`;
+      } else if (css.backgroundColor == "red") {
+        ansi += `\x1b[41m`;
+      } else if (css.backgroundColor == "green") {
+        ansi += `\x1b[42m`;
+      } else if (css.backgroundColor == "yellow") {
+        ansi += `\x1b[43m`;
+      } else if (css.backgroundColor == "blue") {
+        ansi += `\x1b[44m`;
+      } else if (css.backgroundColor == "magenta") {
+        ansi += `\x1b[45m`;
+      } else if (css.backgroundColor == "cyan") {
+        ansi += `\x1b[46m`;
+      } 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 (!colorEquals(css.color, prevCss.color)) {
-      if (css.color != null) {
-        const [r, g, b] = css.color;
-        ansi += `\x1b[38;2;${r};${g};${b}m`;
-      } else {
+      if (css.color == null) {
         ansi += "\x1b[39m";
+      } else if (css.color == "black") {
+        ansi += `\x1b[30m`;
+      } else if (css.color == "red") {
+        ansi += `\x1b[31m`;
+      } else if (css.color == "green") {
+        ansi += `\x1b[32m`;
+      } else if (css.color == "yellow") {
+        ansi += `\x1b[33m`;
+      } else if (css.color == "blue") {
+        ansi += `\x1b[34m`;
+      } else if (css.color == "magenta") {
+        ansi += `\x1b[35m`;
+      } else if (css.color == "cyan") {
+        ansi += `\x1b[36m`;
+      } 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 (css.fontWeight != prevCss.fontWeight) {