Color sequences incorrectly terminate in Chrome

[mindplay-dk]

After some initial testing, I picked ansi-colors from the wealth of color-packages, as it appeared to be the only package that would load and work in the browser.

But it looks like I've run into a problem - take this simple example:

import colors from "ansi-colors";

console.log(`this is ${colors.bgRed.white("white")}\nthis is ${colors.bgGreen.white("green")}\nall good?`);

When run in a terminal, as expected:

However, when run in the Chrome or Edge DevTools console:

Also, when running in Firefox, it doesn't correctly detect color support:

It happens with just background and no text color too:

console.log(`this is ${colors.bgRed("white")}\nthis is ${colors.bgGreen("green")}\nall good?`);

However, it only happens with background colors and not with text colors - so this:

console.log(`this is ${colors.red("red")}\nthis is ${colors.green("green")}\nall good?`);

Looks fine in Chrome:

Here's a running example.

It could be a bug in Chrome and Edge, I suppose?

Is browser support officially supported by the library?

I mean, the README doesn't say it is, and the only reason I assumed it did, was because I noticed there's a ansi-colors-es6 fork with the description "Easily add ANSI colors to your node terminal or browser console". (and yes, this fork has the same problem.)

[doowb]

@mindplay-dk sorry for the delayed response... I looked into this a little:

It could be a bug in Chrome and Edge, I suppose?

I think this is the case because I tried using the ansi escape codes directly in Chrome, and the background colors would not reset properly (resetting by setting the background color to the default). There's more information on ANSI escape codes here.

I'm not familiar with the chromium source code, so I'm not sure where to start looking to see how they handle setting the default background color.

Is browser support officially supported by the library?

This library is not pre-bundled to be used in the browser, but it can be bundled (and your other issue helped make that possible). We're currently using it with packages bundled using babel (via webpack) and esbuild.

[mindplay-dk]

I've opened a Chrome issue, we'll see what they think.

[mindplay-dk]

Looks like this broke in Chrome 96.

Likely not a bug in this library, but I'll post further updates when we've seen what they conclude.