feat(console): support CSS styling with "%c" (#7357)

1 files changed, 160 insertions, 5 deletions

diff --git a/cli/tests/unit/console_test.ts b/cli/tests/unit/console_test.ts
index 384b5d2c8..691e83662 100644
--- a/cli/tests/unit/console_test.ts
+++ b/cli/tests/unit/console_test.ts
@@ -14,7 +14,10 @@ import { stripColor } from "../../../std/fmt/colors.ts";
 const customInspect = Deno.customInspect;
 const {
   Console,
+  cssToAnsi: cssToAnsi_,
   inspectArgs,
+  parseCss: parseCss_,
+  parseCssColor: parseCssColor_,
   // @ts-expect-error TypeScript (as of 3.7) does not support indexing namespaces by symbol
 } = Deno[Deno.internal];
 
@@ -22,6 +25,37 @@ function stringify(...args: unknown[]): string {
   return stripColor(inspectArgs(args).replace(/\n$/, ""));
 }
 
+interface Css {
+  backgroundColor: [number, number, number] | null;
+  color: [number, number, number] | null;
+  fontWeight: string | null;
+  fontStyle: string | null;
+  textDecorationColor: [number, number, number] | null;
+  textDecorationLine: string[];
+}
+
+const DEFAULT_CSS: Css = {
+  backgroundColor: null,
+  color: null,
+  fontWeight: null,
+  fontStyle: null,
+  textDecorationColor: null,
+  textDecorationLine: [],
+};
+
+function parseCss(cssString: string): Css {
+  return parseCss_(cssString);
+}
+
+function parseCssColor(colorString: string): Css {
+  return parseCssColor_(colorString);
+}
+
+/** ANSI-fy the CSS, replace "\x1b" with "_". */
+function cssToAnsiEsc(css: Css): string {
+  return cssToAnsi_(css).replaceAll("\x1b", "_");
+}
+
 // test cases from web-platform-tests
 // via https://github.com/web-platform-tests/wpt/blob/master/console/console-is-a-namespace.any.js
 unitTest(function consoleShouldBeANamespace(): void {
@@ -745,8 +779,7 @@ unitTest(function consoleTestWithIntegerFormatSpecifier(): void {
   assertEquals(stringify("%i"), "%i");
   assertEquals(stringify("%i", 42.0), "42");
   assertEquals(stringify("%i", 42), "42");
-  assertEquals(stringify("%i", "42"), "42");
-  assertEquals(stringify("%i", "42.0"), "42");
+  assertEquals(stringify("%i", "42"), "NaN");
   assertEquals(stringify("%i", 1.5), "1");
   assertEquals(stringify("%i", -0.5), "0");
   assertEquals(stringify("%i", ""), "NaN");
@@ -764,14 +797,13 @@ unitTest(function consoleTestWithFloatFormatSpecifier(): void {
   assertEquals(stringify("%f"), "%f");
   assertEquals(stringify("%f", 42.0), "42");
   assertEquals(stringify("%f", 42), "42");
-  assertEquals(stringify("%f", "42"), "42");
-  assertEquals(stringify("%f", "42.0"), "42");
+  assertEquals(stringify("%f", "42"), "NaN");
   assertEquals(stringify("%f", 1.5), "1.5");
   assertEquals(stringify("%f", -0.5), "-0.5");
   assertEquals(stringify("%f", Math.PI), "3.141592653589793");
   assertEquals(stringify("%f", ""), "NaN");
   assertEquals(stringify("%f", Symbol("foo")), "NaN");
-  assertEquals(stringify("%f", 5n), "5");
+  assertEquals(stringify("%f", 5n), "NaN");
   assertEquals(stringify("%f %f", 42, 43), "42 43");
   assertEquals(stringify("%f %f", 42), "42 %f");
 });
@@ -799,6 +831,129 @@ unitTest(function consoleTestWithObjectFormatSpecifier(): void {
   );
 });
 
+unitTest(function consoleTestWithStyleSpecifier(): void {
+  assertEquals(stringify("%cfoo%cbar"), "%cfoo%cbar");
+  assertEquals(stringify("%cfoo%cbar", ""), "foo%cbar");
+  assertEquals(stripColor(stringify("%cfoo%cbar", "", "color: red")), "foobar");
+});
+
+unitTest(function consoleParseCssColor(): void {
+  assertEquals(parseCssColor("black"), [0, 0, 0]);
+  assertEquals(parseCssColor("darkmagenta"), [139, 0, 139]);
+  assertEquals(parseCssColor("slateblue"), [106, 90, 205]);
+  assertEquals(parseCssColor("#ffaa00"), [255, 170, 0]);
+  assertEquals(parseCssColor("#ffaa00"), [255, 170, 0]);
+  assertEquals(parseCssColor("#18d"), [16, 128, 208]);
+  assertEquals(parseCssColor("#18D"), [16, 128, 208]);
+  assertEquals(parseCssColor("rgb(100, 200, 50)"), [100, 200, 50]);
+  assertEquals(parseCssColor("rgb(+100.3, -200, .5)"), [100, 0, 1]);
+  assertEquals(parseCssColor("hsl(75, 60%, 40%)"), [133, 163, 41]);
+
+  assertEquals(parseCssColor("rgb(100,200,50)"), [100, 200, 50]);
+  assertEquals(
+    parseCssColor("rgb( \t\n100 \t\n, \t\n200 \t\n, \t\n50 \t\n)"),
+    [100, 200, 50],
+  );
+});
+
+unitTest(function consoleParseCss(): void {
+  assertEquals(
+    parseCss("background-color: red"),
+    { ...DEFAULT_CSS, backgroundColor: [255, 0, 0] },
+  );
+  assertEquals(parseCss("color: blue"), { ...DEFAULT_CSS, color: [0, 0, 255] });
+  assertEquals(
+    parseCss("font-weight: bold"),
+    { ...DEFAULT_CSS, fontWeight: "bold" },
+  );
+  assertEquals(
+    parseCss("font-style: italic"),
+    { ...DEFAULT_CSS, fontStyle: "italic" },
+  );
+  assertEquals(
+    parseCss("font-style: oblique"),
+    { ...DEFAULT_CSS, fontStyle: "oblique" },
+  );
+  assertEquals(
+    parseCss("text-decoration-color: green"),
+    { ...DEFAULT_CSS, textDecorationColor: [0, 128, 0] },
+  );
+  assertEquals(
+    parseCss("text-decoration-line: underline overline line-through"),
+    {
+      ...DEFAULT_CSS,
+      textDecorationLine: ["underline", "overline", "line-through"],
+    },
+  );
+  assertEquals(
+    parseCss("text-decoration: yellow underline"),
+    {
+      ...DEFAULT_CSS,
+      textDecorationColor: [255, 255, 0],
+      textDecorationLine: ["underline"],
+    },
+  );
+
+  assertEquals(
+    parseCss("color:red;font-weight:bold;"),
+    { ...DEFAULT_CSS, color: [255, 0, 0], 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" },
+  );
+  assertEquals(
+    parseCss("color: red; font-weight: bold, font-style: italic"),
+    { ...DEFAULT_CSS, color: [255, 0, 0] },
+  );
+});
+
+unitTest(function consoleCssToAnsi(): void {
+  // TODO(nayeemrmn): Optimize these by accounting for the previous CSS.
+  assertEquals(
+    cssToAnsiEsc({ ...DEFAULT_CSS, backgroundColor: [200, 201, 202] }),
+    "_[48;2;200;201;202m_[39m_[22m_[23m_[59m_[29m_[55m_[24m",
+  );
+  assertEquals(
+    cssToAnsiEsc({ ...DEFAULT_CSS, color: [203, 204, 205] }),
+    "_[49m_[38;2;203;204;205m_[22m_[23m_[59m_[29m_[55m_[24m",
+  );
+  assertEquals(
+    cssToAnsiEsc({ ...DEFAULT_CSS, fontWeight: "bold" }),
+    "_[49m_[39m_[1m_[23m_[59m_[29m_[55m_[24m",
+  );
+  assertEquals(
+    cssToAnsiEsc({ ...DEFAULT_CSS, fontStyle: "italic" }),
+    "_[49m_[39m_[22m_[3m_[59m_[29m_[55m_[24m",
+  );
+  assertEquals(
+    cssToAnsiEsc({ ...DEFAULT_CSS, fontStyle: "oblique" }),
+    "_[49m_[39m_[22m_[3m_[59m_[29m_[55m_[24m",
+  );
+  assertEquals(
+    cssToAnsiEsc({ ...DEFAULT_CSS, textDecorationColor: [206, 207, 208] }),
+    "_[49m_[39m_[22m_[23m_[58;2;206;207;208m_[29m_[55m_[24m",
+  );
+  assertEquals(
+    cssToAnsiEsc({ ...DEFAULT_CSS, textDecorationLine: ["underline"] }),
+    "_[49m_[39m_[22m_[23m_[59m_[29m_[55m_[4m",
+  );
+  assertEquals(
+    cssToAnsiEsc(
+      { ...DEFAULT_CSS, textDecorationLine: ["overline", "line-through"] },
+    ),
+    "_[49m_[39m_[22m_[23m_[59m_[9m_[53m_[24m",
+  );
+  assertEquals(
+    cssToAnsiEsc(
+      { ...DEFAULT_CSS, color: [203, 204, 205], fontWeight: "bold" },
+    ),
+    "_[49m_[38;2;203;204;205m_[1m_[23m_[59m_[29m_[55m_[24m",
+  );
+});
+
 unitTest(function consoleTestWithVariousOrInvalidFormatSpecifier(): void {
   assertEquals(stringify("%s:%s"), "%s:%s");
   assertEquals(stringify("%i:%i"), "%i:%i");