fix: fixes #7 #15 white space and unstyled messages

* fix: #15 for uncolored space between prefix and rest of msg
* fix: #7 unstyled content is left unstyled, added test

src/logger.ts

@@ -1,5 +1,5 @@
 import { BgColors, FontSizes, FontStyles, TextColors } from './style-types';
-import COLOR_STYLES from './styles';
+import logStyles, { WHITE_SPACE_STYLE } from './styles';
 
 // Log levels (lower number are more severe)
 export const enum Level {
@@ -101,6 +101,11 @@ export class Logger {
     return this;
   }
 
+  /**
+   * Add custom CSS styles
+   * @param style
+   * a string of CSS, similar to what you'd use for <div style="">
+   */
   css(style: string) {
     this.stylesInProgress.push(style);
     return this;
@@ -113,22 +118,22 @@ export class Logger {
     return this;
   }
 
-  /** Log an error message */
+  // Log an error message
   error(str?: string) {
     if (typeof str !== 'undefined') this.txt(str);
     return this.printMessage(Level.error);
   }
-  /** Log a warning */
+  // Log a warning
   warn(str?: string) {
     if (typeof str !== 'undefined') this.txt(str);
     return this.printMessage(Level.warn);
   }
-  /** Print some general information */
+  // Print some general information
   log(str?: string) {
     if (typeof str !== 'undefined') this.txt(str);
     return this.printMessage(Level.log);
   }
-  /** Print something for debugging purposes only */
+  // Print something for debugging purposes only
   debug(str?: string) {
     if (typeof str !== 'undefined') this.txt(str);
     return this.printMessage(Level.debug);
@@ -148,16 +153,16 @@ export class Logger {
    */
   private setupStyles() {
     // Loop over each style name (i.e. "red")
-    for (let c in COLOR_STYLES) {
+    for (let c in logStyles) {
       // Make sure the property is on the instance, not the prototype
-      if (COLOR_STYLES.hasOwnProperty(c)) {
+      if (logStyles.hasOwnProperty(c)) {
         // Define a new property on this, of name c (i.e. "red")
         //  that is getter-based (instead of value based)
         const self = this;
         Object.defineProperty(this, c, {
           get() {
-            const cStyle = COLOR_STYLES[c as keyof typeof COLOR_STYLES]; // i.e. ('color: red;')
-            self.stylesInProgress.push(cStyle);
+            const styleCss = logStyles[c as keyof typeof logStyles]; // i.e. ('color: red;')
+            self.stylesInProgress.push(styleCss);
             return this;
           }
         });
@@ -176,14 +181,32 @@ export class Logger {
       let logFunction = this.printer[functionName];
       let allMsgs = '';
       let allStyles: string[] = [];
+
+      /** Flush all prefix and styles into msgsAndStyles
+       * Note: there may not be styles associated with a message or prefix!
+       */
       for (let [msg, style] of this.prefixesAndStyles) {
-        allMsgs += `%c[${msg}]`;
-        allStyles.push(style);
+        // prefix styles
+        if (style) {
+          allMsgs += `%c[${msg}]`;
+          allStyles.push(style); // Only add style to allStyles if present
+        } else {
+          allMsgs += `[${msg}]`;
+        }
+      }
+      // white space style
+      if (allMsgs.length > 0) {
+        allMsgs += '%c '; // space between prefixes and rest of logged message
+        allStyles.push(WHITE_SPACE_STYLE);
       }
-      if (allMsgs.length > 0) allMsgs += ' ';
       for (let [msg, style] of this.msgsAndStyles) {
-        allMsgs += `%c${msg}`;
-        allStyles.push(style);
+        // message styles
+        if (style) {
+          allMsgs += `%c${msg}`;
+          allStyles.push(style); // only add style to allStyles if present
+        } else {
+          allMsgs += `${msg}`;
+        }
       }
       logFunction(allMsgs, ...allStyles);
       this.msgsAndStyles = [];

src/styles.ts

@@ -27,8 +27,13 @@ const FONT_SIZES: StyleObj = {
   huge: 'font-size: 2em;'
 };
 
-export default {
+export const WHITE_SPACE_STYLE =
+  'color: inherit; background-color: transparent;';
+
+const stylesToPutOnLogger = {
   ...COLOR_STYLES,
   ...FONT_STYLES,
   ...FONT_SIZES
 };
+
+export default stylesToPutOnLogger;

test/colors-test.ts

@@ -25,25 +25,26 @@ QUnit.test('Logger in red works', assert => {
 });
 
 QUnit.test('Logger in blue background works', assert => {
-    const printer = makeTestPrinter();
-    const logger = new Logger(Level.debug, printer);
-    assert.ok(logger.bgBlue instanceof Logger, 'logger.bgBlue is a logger');
-    assert.equal(
-      typeof logger.bgBlue.log,
-      'function',
-      'logger.bgBlue.log is a function'
-    );
-    logger.bgBlue.log('my background is blue');
+  const printer = makeTestPrinter();
+  const logger = new Logger(Level.debug, printer);
+  assert.ok(logger.bgBlue instanceof Logger, 'logger.bgBlue is a logger');
+  assert.equal(
+    typeof logger.bgBlue.log,
+    'function',
+    'logger.bgBlue.log is a function'
+  );
+  logger.bgBlue.log('my background is blue');
 
-    logCountAssert(
-      {
-        message: 'after logging with blue background, we should see one log message',
-        assert,
-        printer
-      },
-      { e: 0, w: 0, l: 1, d: 0 }
-    );
-  });
+  logCountAssert(
+    {
+      message:
+        'after logging with blue background, we should see one log message',
+      assert,
+      printer
+    },
+    { e: 0, w: 0, l: 1, d: 0 }
+  );
+});
 
 // logger.red().log('foo')
 

test/formatting-test.ts

@@ -53,3 +53,38 @@ QUnit.test('Logging with multiple styles per message', assert => {
     ['%cHouston, we have a problem', 'font-size: 1.5em;']
   ]);
 });
+
+QUnit.test('Prefixes are styled correctly', assert => {
+  const printer = makeTestPrinter();
+  const logger = new Logger(Level.warn, printer);
+  logger.pushPrefix('prefix');
+  logger.error('Prefix this error');
+
+  // Make sure Prefix is styled %c[prefix]%c
+  assert.deepEqual(
+    printer.messages.error[0][0],
+    '[prefix]%c Prefix this error' // console.log('%c[]......')
+  );
+  assert.ok(
+    printer.messages.error[0].indexOf(
+      // search ALL arguments that might have been passed to console.log
+      'color: inherit; background-color: transparent;'
+    ) >= 0,
+    'I found the style for a "blank space" somewhere'
+  );
+});
+
+// logger.debug('hello')  --> console.log('hello')
+QUnit.test('No styles are applied', assert => {
+  const printer = makeTestPrinter();
+  const logger = new Logger(Level.debug, printer);
+  logger.log('I have no prefix or colors');
+
+  // No prefix or colors
+  assert.deepEqual(printer.messages, {
+    log: [['I have no prefix or colors']],
+    warn: [],
+    error: [],
+    debug: []
+  });
+});