Replace @colors/colors

[atwupack]

The current colors package is quite old and large in comparison to more modern packages. It could be replaced with ansis or picocolors which are both <10kB. As we only need minimal color support, picocolors would be enough.
Maybe node:util.styleText() would be enough but this has been added in Node 20 and got stable in Node 22.

[webdiscus]

Advantages of ansis

• Named imports for clearer usage.
• Chainable syntax for shorter and more readable code.
• Supports nested template literals without needing parentheses.

- import colors from "@colors/colors/safe.js";
+ import { white } from "ansis"; 

...
- colors.bgGreen(colors.white(" owasp-dependency-check: ")),
+ white.bgGreen` owasp-dependency-check: `,

... 
- console.error([colors.bgRed(colors.white(" ERROR: ")), ...logData].join(" "));
+ console.error([white.bgRed`  ERROR: `, ...logData].join(" ")); 

[atwupack]

@webdiscus Thank you for the information. What would you say are the advantages of ansis over picocolors? I only need the base 16 colors and none of the more advanced features ansis provides afaics.

[webdiscus]

Hallo @atwupack,

If you only need the base 16 ANSI colors, picocolors is a great choice. However, ansis focuses on improving developer experience and readability, even for simple use cases:

• Named imports: You can import color names to make the code shorter:

import colors from 'picocolors';
import { red } from 'ansis';

colors.red('error'); // using picocolors
red('error'); // using ansis
red`error`; // using template literal with ansis

• Chainable syntax: Easily combine styles like ansis.red.bold.underline('text'). So you ca avoid nested calls leaded to "nested parentheses hell".
  Here is an usage example from your code:

import colors from 'picocolors';
import { white } from 'ansis';

console.error([colors.bgRed(colors.white(" ERROR: ")), ...logData].join(" "));  // using picocolors
console.error([white.bgRed`  ERROR: `, ...logData].join(" "));  // using ansis

• Template literal support: you don’t need extra parentheses to color dynamic values:

import colors from 'picocolors';
import { red, cyan } from 'ansis';

colors.red(`Error: ${colors.cyan(colors.bold('file.js'))} not found!`); // using picocolors
red`Error: ${cyan.bold`file.js`} not found!`; // using ansis - short, clean, readable code

P.S. In any case, I appreciate your choice for picocolors - it's a good library too.

[atwupack]

@webdiscus Thank you for answering my question. I completely missed the syntax to chain styles in ansis.

[atwupack]

Using ansis as color library from version 0.8.0 on.