@visulima/colorize
Version:
Terminal and Console string styling done right.
418 lines (414 loc) • 10.6 kB
JavaScript
const ansiCodeHexMap = {
0: "#000",
1: "#800",
2: "#080",
3: "#880",
4: "#008",
5: "#808",
6: "#088",
7: "#ccc",
8: "#444",
9: "#f00",
10: "#0f0",
11: "#ff0",
12: "#00f",
13: "#f0f",
14: "#0ff",
15: "#fff",
16: "#000",
17: "#00005f",
18: "#000087",
19: "#0000af",
20: "#0000d7",
21: "#0000ff",
22: "#005f00",
23: "#005f5f",
24: "#005f87",
25: "#005faf",
26: "#005fd7",
27: "#005fff",
28: "#008700",
29: "#00875f",
30: "#008787",
31: "#0087af",
32: "#0087d7",
33: "#0087ff",
34: "#00af00",
35: "#00af5f",
36: "#00af87",
37: "#00afaf",
38: "#00afd7",
39: "#00afff",
40: "#00d700",
41: "#00d75f",
42: "#00d787",
43: "#00d7af",
44: "#00d7d7",
45: "#00d7ff",
46: "#00ff00",
47: "#00ff5f",
48: "#00ff87",
49: "#00ffaf",
50: "#00ffd7",
51: "#00ffff",
52: "#5f0000",
53: "#5f005f",
54: "#5f0087",
55: "#5f00af",
56: "#5f00d7",
57: "#5f00ff",
58: "#5f5f00",
59: "#5f5f5f",
60: "#5f5f87",
61: "#5f5faf",
62: "#5f5fd7",
63: "#5f5fff",
64: "#5f8700",
65: "#5f875f",
66: "#5f8787",
67: "#5f87af",
68: "#5f87d7",
69: "#5f87ff",
70: "#5faf00",
71: "#5faf5f",
72: "#5faf87",
73: "#5fafaf",
74: "#5fafd7",
75: "#5fafff",
76: "#5fd700",
77: "#5fd75f",
78: "#5fd787",
79: "#5fd7af",
80: "#5fd7d7",
81: "#5fd7ff",
82: "#5fff00",
83: "#5fff5f",
84: "#5fff87",
85: "#5fffaf",
86: "#5fffd7",
87: "#5fffff",
88: "#870000",
89: "#87005f",
90: "#870087",
91: "#8700af",
92: "#8700d7",
93: "#8700ff",
94: "#875f00",
95: "#875f5f",
96: "#875f87",
97: "#875faf",
98: "#875fd7",
99: "#875fff",
100: "#878700",
101: "#87875f",
102: "#878787",
103: "#8787af",
104: "#8787d7",
105: "#8787ff",
106: "#87af00",
107: "#87af5f",
108: "#87af87",
109: "#87afaf",
110: "#87afd7",
111: "#87afff",
112: "#87d700",
113: "#87d75f",
114: "#87d787",
115: "#87d7af",
116: "#87d7d7",
117: "#87d7ff",
118: "#87ff00",
119: "#87ff5f",
120: "#87ff87",
121: "#87ffaf",
122: "#87ffd7",
123: "#87ffff",
124: "#af0000",
125: "#af005f",
126: "#af0087",
127: "#af00af",
128: "#af00d7",
129: "#af00ff",
130: "#af5f00",
131: "#af5f5f",
132: "#af5f87",
133: "#af5faf",
134: "#af5fd7",
135: "#af5fff",
136: "#af8700",
137: "#af875f",
138: "#af8787",
139: "#af87af",
140: "#af87d7",
141: "#af87ff",
142: "#afaf00",
143: "#afaf5f",
144: "#afaf87",
145: "#afafaf",
146: "#afafd7",
147: "#afafff",
148: "#afd700",
149: "#afd75f",
150: "#afd787",
151: "#afd7af",
152: "#afd7d7",
153: "#afd7ff",
154: "#afff00",
155: "#afff5f",
156: "#afff87",
157: "#afffaf",
158: "#afffd7",
159: "#afffff",
160: "#d70000",
161: "#d7005f",
162: "#d70087",
163: "#d700af",
164: "#d700d7",
165: "#d700ff",
166: "#d75f00",
167: "#d75f5f",
168: "#d75f87",
169: "#d75faf",
170: "#d75fd7",
171: "#d75fff",
172: "#d78700",
173: "#d7875f",
174: "#d78787",
175: "#d787af",
176: "#d787d7",
177: "#d787ff",
178: "#d7af00",
179: "#d7af5f",
180: "#d7af87",
181: "#d7afaf",
182: "#d7afd7",
183: "#d7afff",
184: "#d7d700",
185: "#d7d75f",
186: "#d7d787",
187: "#d7d7af",
188: "#d7d7d7",
189: "#d7d7ff",
190: "#d7ff00",
191: "#d7ff5f",
192: "#d7ff87",
193: "#d7ffaf",
194: "#d7ffd7",
195: "#d7ffff",
196: "#ff0000",
197: "#ff005f",
198: "#ff0087",
199: "#ff00af",
200: "#ff00d7",
201: "#ff00ff",
202: "#ff5f00",
203: "#ff5f5f",
204: "#ff5f87",
205: "#ff5faf",
206: "#ff5fd7",
207: "#ff5fff",
208: "#ff8700",
209: "#ff875f",
210: "#ff8787",
211: "#ff87af",
212: "#ff87d7",
213: "#ff87ff",
214: "#ffaf00",
215: "#ffaf5f",
216: "#ffaf87",
217: "#ffafaf",
218: "#ffafd7",
219: "#ffafff",
220: "#ffd700",
221: "#ffd75f",
222: "#ffd787",
223: "#ffd7af",
224: "#ffd7d7",
225: "#ffd7ff",
226: "#ffff00",
227: "#ffff5f",
228: "#ffff87",
229: "#ffffaf",
230: "#ffffd7",
231: "#ffffff",
232: "#080808",
233: "#121212",
234: "#1c1c1c",
235: "#262626",
236: "#303030",
237: "#3a3a3a",
238: "#444444",
239: "#4e4e4e",
240: "#585858",
241: "#626262",
242: "#6c6c6c",
243: "#767676",
244: "#808080",
245: "#8a8a8a",
246: "#949494",
247: "#9e9e9e",
248: "#a8a8a8",
249: "#b2b2b2",
250: "#bcbcbc",
251: "#c6c6c6",
252: "#d0d0d0",
253: "#dadada",
254: "#e4e4e4",
255: "#eeeeee"
};
var __defProp$1 = Object.defineProperty;
var __name$1 = (target, value) => __defProp$1(target, "name", { value, configurable: true });
const baseStyles = {
bold: "font-weight: bold;",
dim: "opacity: 0.5;",
hidden: "visibility: hidden;",
inverse: "background-color: currentColor; color: background-color;",
italic: "font-style: italic;",
overline: "text-decoration: overline;",
reset: "color: inherit",
strike: "text-decoration: line-through;",
strikethrough: "text-decoration: line-through;",
underline: "text-decoration: underline;",
visible: "opacity: 0;"
};
const baseColors = {
bgBlack: "background-color: black; color: white;",
bgBlackBright: "background-color: #666; color: white;",
bgBlue: "background-color: blue; color: white;",
bgBlueBright: "background-color: #55f; color: white;",
bgCyan: "background-color: cyan; color: black;",
bgCyanBright: "background-color: #5ff; color: black;",
bgGray: "background-color: #666; color: white;",
// US spelling alias for bgBlackBright
bgGreen: "background-color: green; color: white;",
bgGreenBright: "background-color: #5f5; color: white;",
bgGrey: "background-color: #666; color: white;",
// UK spelling alias for bgBlackBright
bgMagenta: "background-color: magenta; color: white;",
bgMagentaBright: "background-color: #f5f; color: white;",
bgRed: "background-color: red; color: white;",
bgRedBright: "background-color: #f55; color: white;",
bgWhite: "background-color: white; color: black;",
bgWhiteBright: "background-color: #eee; color: black;",
bgYellow: "background-color: yellow; color: black;",
bgYellowBright: "background-color: #ff5; color: black;",
black: "color: black;",
blackBright: "color: #666;",
blue: "color: blue;",
blueBright: "color: #55f;",
cyan: "color: cyan;",
cyanBright: "color: #5ff;",
gray: "color: #666;",
// US spelling alias for blackBright
green: "color: green;",
greenBright: "color: #5f5;",
grey: "color: #666;",
// UK spelling alias for blackBright
magenta: "color: magenta;",
magentaBright: "color: #f5f;",
red: "color: red;",
redBright: "color: #f55;",
white: "color: white;",
whiteBright: "color: #eee;",
yellow: "color: yellow;",
yellowBright: "color: #ff5;"
};
const styleMethods = {
// eslint-disable-next-line security/detect-object-injection
bg: /* @__PURE__ */ __name$1((code) => "background-color: " + ansiCodeHexMap[code] + ";", "bg"),
bgHex: /* @__PURE__ */ __name$1((hex) => "background-color: " + hex + ";", "bgHex"),
bgRgb: /* @__PURE__ */ __name$1((r, g, b) => "background-color: rgb(" + r + "," + g + "," + b + ");", "bgRgb"),
// eslint-disable-next-line security/detect-object-injection
fg: /* @__PURE__ */ __name$1((code) => "color: " + ansiCodeHexMap[code] + ";", "fg"),
hex: /* @__PURE__ */ __name$1((hex) => "color:" + hex + ";", "hex"),
rgb: /* @__PURE__ */ __name$1((r, g, b) => "color: rgb(" + r + "," + g + "," + b + ");", "rgb")
};
var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
const styles = {};
let stylePrototype = null;
const cssStringToObject = /* @__PURE__ */ __name((css) => {
const cssObject = {};
css.replace(/(?<=^|;)\s*([^:]+)\s*:\s*([^;]+)\s*/g, (_, key, value) => {
cssObject[key] = value;
return value;
});
return cssObject;
}, "cssStringToObject");
const createStyle = /* @__PURE__ */ __name(({ props }, css) => {
let cssStack = css;
if (props?.cssStack) {
const cssObject = cssStringToObject(css);
const propertiesCssObject = cssStringToObject(props.cssStack);
for (const key in propertiesCssObject) {
if (cssObject[key] === void 0) {
cssObject[key] = propertiesCssObject[key];
}
}
cssStack = JSON.stringify(cssObject).replace(/["{}]/g, "").replace(/,/g, ";") + ";";
}
const style = /* @__PURE__ */ __name((input, ...values) => {
if (!input) {
return [];
}
if (typeof input === "string" && input.includes("%c")) {
const collectedStyles = input.match(/(?<=,).*;/g);
const inputWithoutStyles = input.replace(/,.*;/g, "");
return ["%c" + inputWithoutStyles, style.css, ...collectedStyles ?? []];
}
if (typeof input === "number" || typeof input === "string") {
return ["%c" + input, style.css];
}
if (input.raw !== null && Array.isArray(values) && values.length > 0) {
const rawString = String.raw(input, ...values);
const collectedStyles = rawString.match(/(?<=,).*;/g);
const inputWithoutStyles = rawString.replace(/,.*;/g, "");
return ["%c" + inputWithoutStyles, style.css, ...(collectedStyles ?? []).join("").split(",").filter(Boolean)];
}
const [first, ...rest] = input;
rest.unshift(style.css);
return [((first + "").includes("%c") ? "" : "%c") + (first + ""), rest.join("")];
}, "style");
Object.setPrototypeOf(style, stylePrototype);
style.props = { css, cssStack, props };
style.css = cssStack;
return style;
}, "createStyle");
const WebColorize = /* @__PURE__ */ __name(function() {
const self = /* @__PURE__ */ __name((string_) => string_ + "", "self");
self.strip = (value) => value;
for (const name in baseColors) {
styles[name] = {
get() {
const style = createStyle(this, baseColors[name]);
Object.defineProperty(this, name, { value: style });
return style;
}
};
}
for (const name in baseStyles) {
styles[name] = {
get() {
const style = createStyle(this, baseStyles[name]);
Object.defineProperty(this, name, { value: style });
return style;
}
};
}
stylePrototype = Object.defineProperties({}, styles);
Object.setPrototypeOf(self, stylePrototype);
return self;
}, "WebColorize");
for (const name in styleMethods) {
styles[name] = {
get() {
return (...arguments_) => (
// @ts-expect-error: TODO: fix typing of `arguments_`
createStyle(this, styleMethods[name](...arguments_))
);
}
};
}
styles.ansi256 = styles.fg;
styles.bgAnsi256 = styles.bg;
export { WebColorize as default };