console.style.js

/**
 * @file console.style is micro-library for intuitively styling browser console text with CSS.
 * @author Daniel Lamb <dlamb.open.source@gmail.com>
 */
(function(console) {
  /**
   * @namespace console
   */

  /**
   * @namespace consoleStyle
   */

  /* istanbul ignore if */
  if (!console || !console.log) {
    return;
  }

  var colors = 'Black Blue Cyan Gray Green Magenta Red White Yellow'.split(' ');
  var rxTags = /<(css|b|i)(?:=['"](.*?)['"])?>(.*?)<\/(?:css|b|i)>/ig;
  var rxRules = /([a-z\-]+)\s?:\s?([^;'"]+);?/ig;
  var rxTokens = /%[sdifoO]/g;
  var rxImgs = /<img=['"](.*?)['"]>/ig;
  var bg = 'background';
  var px = 'px';
  var style;
  var wrap;

  /**
   * Regex mojo to parse the text to log in the console.
   * @function parse
   * @memberOf consoleStyle
   * @param {string} text - the text with styles to parse
   * @returns {Array} args - an array of console.log arguments
   */
  var parse = function(text) {
    var args = [text];
    if (typeof text === 'string') {
      text = text.replace(rxImgs, function(matchI, $1I) {
        var width;
        var height;
        var halfHeight;
        var halfWidth;
        var styles = ['font-size:1px'];
        $1I.replace(rxRules, function(matchR, $1R, $2R) {
          switch ($1R) {
            case bg:
            case bg + '-image':
              styles.push($1R+ ':' + $2R, bg + '-repeat:no-repeat');
              break;
            case 'width':
              width = $2R;
              break;
            case 'height':
              height = $2R;
              styles.push('line-height:' + $2R);
              break;
          }
        });
        halfWidth = Math.ceil(parseInt(width) / 2);
        halfHeight = Math.ceil(parseInt(height) / 2);
        styles.push(bg + '-size:' + width + ' ' + height);
        styles.push('padding:' + halfHeight + px + ' ' + halfWidth + px);
        return wrap('', styles.join(';'));
      });
      args[0] = text.replace(rxTags, function(matchT, $1T, $2T, $3T) {
        $2T = $2T || '';
        $3T = $3T.replace(rxTokens, '');
        switch ($1T) {
          case 'b':
            $2T += ';font-weight:bold';
            break;
          case 'i':
            $2T += ';font-style:italic';
            break;
        }
        args.push($2T, '');
        return '%c' + $3T + '%c';
      });
    }
    return args;
  };

  /**
   * Define color shortcut methods on the console.
   * @function colors
   * @memberOf console
   * @param {string} color - the CSS color rule to apply
   * @example console.style('Wow, this is ' + console.colors.green('so much') + ' better!');
   */
  console.colors = {};
  colors.forEach(function(color) {
    console.colors[color.toLowerCase()] = function(text) {
      return wrap(text, 'color:' + color);
    };
    console.colors['bg' + color] = function(text) {
      return wrap(text, bg + '-color:' + color);
    };
  });

  /**
   * Intuitively Style Browser Console Text with CSS.
   * @function style
   * @memberOf console
   * @param text - the text to style
   * @example console.style('Wow, this is <css="color:green;font-weight:bold;">so much</css> better!');
   */
  console.style = style = function() {
    var args = [].slice.call(arguments);
    console.log.apply(console, parse(args.shift()).concat(args));
  };

  /**
   * Wraps the given text in a <css> tag with the provided style rules.
   * @function wrap
   * @memberOf console
   * @param {string} text - the text to wrap
   * @param {string} rule - CSS rules to apply
   * @returns {string} - the wrapped text
   * @example console.style('I just ' + console.style.wrap('love', 'color:#c00;font-weight:bold;') + ' console.style');
   */
  console.style.wrap = wrap = function(text, rules) {
    return '<css="' + rules + '">' + text + '</css>';
  };

}(window.console));