123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
/** * Tagged template literal for styling `console.log` statements. * @see [Styling console output on MDN](https://developer.mozilla.org/en-US/docs/Web/API/console#styling_console_output) * @example * // Basic * console.log( *   ...sttyl`Print ${"bold"}.b/ and ${"italic red"}.i.red/.`, * ); * // Dynamic Styles * const style1 = ".b.cyan.u/"; * console.log( *  ...sttyl`Some ${"dynamically styled text"}${style1}.`, * ); * // Custom Styles * const styles = { *   s1: `color: magenta; font-weight: bold`, *   s2: `color: orange; font-style: italic`, * }; * const myStyle = sttyl.with(styles); * console.log( *   ...myStyle`${"And"}.s1/ ${"custom styles"}.s2.u/.`, * ); * // Default Styles * { *   // Colors *   black: "color: black", *   blue: "color: blue", *   cyan: "color: cyan", *   gray: "color: gray", *   green: "color: green", *   grey: "color: grey", *   magenta: "color: magenta", *   red: "color: red", *   white: "color: white", *   yellow: "color: yellow", *   // Formatting *   b: "font-weight: bold", *   bold: "font-weight: bold", *   i: "font-style: italic", *   italic: "font-style: italic", *   s: "text-decoration: line-through", *   strike: "text-decoration: line-through", *   u: "text-decoration: underline", *   underline: "text-decoration: underline", * } */export interface sttyl {  (strings: TemplateStringsArray, ...args: unknown[]): string[];  /**   * Creates a sttyl function that mixes your custom styles in with the default   * styles. See main `sttyl` docs for a list of default styles.   * @example   * const styles = {   *   s1: `color: magenta; font-weight: bold`,   *   s2: `color: orange; font-style: italic`,   * };   * const myStyle = sttyl.with(styles);   * console.log(   *   ...myStyle`Log ${"some"}.s1/ ${"custom styles"}.s2.u/.`,   * );   */  with: typeof styledWith;}
const defaultStyles: Record<string, string> = {  // #region Colors  black: "color: black",  blue: "color: blue",  cyan: "color: cyan",  gray: "color: gray",  green: "color: green",  grey: "color: grey",  magenta: "color: magenta",  red: "color: red",  white: "color: white",  yellow: "color: yellow",  // #endregion  // #region Formatting  b: "font-weight: bold",  bold: "font-weight: bold",  i: "font-style: italic",  italic: "font-style: italic",  s: "text-decoration: line-through",  strike: "text-decoration: line-through",  u: "text-decoration: underline",  underline: "text-decoration: underline",  // #endregion};
function styledWith(styles: Record<string, string>) {  if (styles !== defaultStyles) {    styles = {      ...defaultStyles,      ...styles,    };  }  function styledTag(strings: TemplateStringsArray, ...args: unknown[]) {    /** Message parts to be joined for 1st string argument of `console.log`. */    const msg: string[] = [];    /** CSS style arguments for `console.log`. */    const css: string[] = [];    const { length: stringsLen } = strings;    for (let strIdx = 0; strIdx < stringsLen; strIdx++) {      const str = parseStyleCodes(strings[strIdx]);      let arg = args[strIdx];      if (typeof arg === "string") {        arg = parseStyleCodes(arg);      } else {        arg = arg ?? "";      }      msg.push(str);      msg.push(arg as string);    }    /** Return array for spreading into a call to `console.log(...)`. */    const rv = [msg.join(""), ...css];    // console.log("STYLED", rv);    return rv;
    function parseStyleCodes(str: string) {      if (str.startsWith(".")) {        //        // Match a period, followed by non-whitespace up to the first "/".        //        const match = str.match(/^.[^\s/]+\/{1}/);        if (!match) {          return str;        }        const frame = match[0].toString();        const code = frame.substring(1, frame.length - 1);        // console.log("MATCH: frame", frame, "code", code);        // If it's more than just the period...        if (code) {          // Split the code into keys (keyof styles), skipping the first dot.          const keys = code.split(".");          const { length: keysLen } = keys;          let style = "";          for (let keyIdx = 0; keyIdx < keysLen; keyIdx++) {            const key = keys[keyIdx];            // Join all keys found in styles into one style string.            if (key in styles) {              style += styles[key] + ";";            }          }          if (style) {            // We only apply the `code` found above if it produced a style.            // Otherwise, it's displayed as part of `msg` (below).            const prev = msg.length - 1;            msg[prev] = "%c" + msg[prev] + "%c";            str = str.substring(frame.length);            css.push(style);            css.push("");          }        }      }      return str;    }  }  return styledTag;}
export const sttyl = styledWith(defaultStyles) as sttyl;sttyl.with = styledWith;export default sttyl;
// #region Testing
// console.log("");// console.log(//   "Testing %csttyl%c...",//   `${defaultStyles.b};${defaultStyles.u};${defaultStyles.cyan}`,//   "",// );// console.log("");// //// // Basic// //// console.log(//   ...sttyl`Hello, here is some ${"RED"}.b.i.red.u//&${"YELLOW"}.yellow/ text.`,//   {//     and: "some args",//     more: "and some more args",//   },// );// console.log("");// //// // Dynamic Styles// //// const style1 = ".b.i.cyan.u/";// const style2 = ".b.green/";// console.log(//   ...sttyl`...and some ${"dynamically"}${style1} ${"styled"}${style2} text.`,// );// console.log("");// //// // Custom Styles// //// const styles = {//   s1: `color: magenta; font-weight: bold`,//   s2: `color: orange; font-style: italic`,// };// const myStyle = sttyl.with(styles);// console.log(//   ...myStyle`...and ${"text"}.s1/ ${"with custom style names"}.s2.u/.`,// );// console.log("");// //// // Done// //// console.log(//   ...sttyl`Testing ${"sttyl"}.cyan.b.u/ completed.`,// );// console.log("");
// #endregion