UNPKG

@lianj-fex/css-console

Version:
266 lines (264 loc) 7.6 kB
const chalk = require('chalk'); const inspector = require('inspector'); const { cssPlaceholder, placeholder } = require('./placeholder'); function padZero(str, len) { len = len || 2; let zeros = new Array(len).join('0'); return (zeros + str).slice(-len); } const colors = { "aliceblue": "#f0f8ff", "antiquewhite": "#faebd7", "aqua": "#00ffff", "aquamarine": "#7fffd4", "azure": "#f0ffff", "beige": "#f5f5dc", "bisque": "#ffe4c4", "black": "#000000", "blanchedalmond": "#ffebcd", "blue": "#0000ff", "blueviolet": "#8a2be2", "brown": "#a52a2a", "burlywood": "#deb887", "cadetblue": "#5f9ea0", "chartreuse": "#7fff00", "chocolate": "#d2691e", "coral": "#ff7f50", "cornflowerblue": "#6495ed", "cornsilk": "#fff8dc", "crimson": "#dc143c", "cyan": "#00ffff", "darkblue": "#00008b", "darkcyan": "#008b8b", "darkgoldenrod": "#b8860b", "darkgray": "#a9a9a9", "darkgreen": "#006400", "darkkhaki": "#bdb76b", "darkmagenta": "#8b008b", "darkolivegreen": "#556b2f", "darkorange": "#ff8c00", "darkorchid": "#9932cc", "darkred": "#8b0000", "darksalmon": "#e9967a", "darkseagreen": "#8fbc8f", "darkslateblue": "#483d8b", "darkslategray": "#2f4f4f", "darkturquoise": "#00ced1", "darkviolet": "#9400d3", "deeppink": "#ff1493", "deepskyblue": "#00bfff", "dimgray": "#696969", "dodgerblue": "#1e90ff", "firebrick": "#b22222", "floralwhite": "#fffaf0", "forestgreen": "#228b22", "fuchsia": "#ff00ff", "gainsboro": "#dcdcdc", "ghostwhite": "#f8f8ff", "gold": "#ffd700", "goldenrod": "#daa520", "gray": "#808080", "green": "#008000", "greenyellow": "#adff2f", "honeydew": "#f0fff0", "hotpink": "#ff69b4", "indianred ": "#cd5c5c", "indigo": "#4b0082", "ivory": "#fffff0", "khaki": "#f0e68c", "lavender": "#e6e6fa", "lavenderblush": "#fff0f5", "lawngreen": "#7cfc00", "lemonchiffon": "#fffacd", "lightblue": "#add8e6", "lightcoral": "#f08080", "lightcyan": "#e0ffff", "lightgoldenrodyellow": "#fafad2", "lightgrey": "#d3d3d3", "lightgreen": "#90ee90", "lightpink": "#ffb6c1", "lightsalmon": "#ffa07a", "lightseagreen": "#20b2aa", "lightskyblue": "#87cefa", "lightslategray": "#778899", "lightsteelblue": "#b0c4de", "lightyellow": "#ffffe0", "lime": "#00ff00", "limegreen": "#32cd32", "linen": "#faf0e6", "magenta": "#ff00ff", "maroon": "#800000", "mediumaquamarine": "#66cdaa", "mediumblue": "#0000cd", "mediumorchid": "#ba55d3", "mediumpurple": "#9370d8", "mediumseagreen": "#3cb371", "mediumslateblue": "#7b68ee", "mediumspringgreen": "#00fa9a", "mediumturquoise": "#48d1cc", "mediumvioletred": "#c71585", "midnightblue": "#191970", "mintcream": "#f5fffa", "mistyrose": "#ffe4e1", "moccasin": "#ffe4b5", "navajowhite": "#ffdead", "navy": "#000080", "oldlace": "#fdf5e6", "olive": "#808000", "olivedrab": "#6b8e23", "orange": "#ffa500", "orangered": "#ff4500", "orchid": "#da70d6", "palegoldenrod": "#eee8aa", "palegreen": "#98fb98", "paleturquoise": "#afeeee", "palevioletred": "#d87093", "papayawhip": "#ffefd5", "peachpuff": "#ffdab9", "peru": "#cd853f", "pink": "#ffc0cb", "plum": "#dda0dd", "powderblue": "#b0e0e6", "purple": "#800080", "rebeccapurple": "#663399", "red": "#ff0000", "rosybrown": "#bc8f8f", "royalblue": "#4169e1", "saddlebrown": "#8b4513", "salmon": "#fa8072", "sandybrown": "#f4a460", "seagreen": "#2e8b57", "seashell": "#fff5ee", "sienna": "#a0522d", "silver": "#c0c0c0", "skyblue": "#87ceeb", "slateblue": "#6a5acd", "slategray": "#708090", "snow": "#fffafa", "springgreen": "#00ff7f", "steelblue": "#4682b4", "tan": "#d2b48c", "teal": "#008080", "thistle": "#d8bfd8", "tomato": "#ff6347", "turquoise": "#40e0d0", "violet": "#ee82ee", "wheat": "#f5deb3", "white": "#ffffff", "whitesmoke": "#f5f5f5", "yellow": "#ffff00", "yellowgreen": "#9acd32" }; function colorKeywordToHex(color) { return colors[color.toLowerCase()].toUpperCase(); } function isHex(color) { return color.indexOf('#') === 0; } function invertColor(hex, bw) { hex = hex.slice(1); // convert 3-digit hex to 6-digits. if (hex.length === 3) { hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; } if (hex.length !== 6) { throw new Error('Invalid HEX color.'); } let r = parseInt(hex.slice(0, 2), 16); let g = parseInt(hex.slice(2, 4), 16); let b = parseInt(hex.slice(4, 6), 16); if (bw) { // http://stackoverflow.com/a/3943023/112731 return (r * 0.299 + g * 0.587 + b * 0.114) > 186 ? '#000000' : '#FFFFFF'; } // invert color components r = (255 - r).toString(16); g = (255 - g).toString(16); b = (255 - b).toString(16); // pad each with zeros and return return "#" + padZero(r) + padZero(g) + padZero(b); } function camelize(str, upper) { return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(letter, index) { if (index === 0) { if (typeof upper === 'boolean') { return letter[`to${upper ? 'Upper' : 'Lower'}Case`]() } } else { return letter.toUpperCase(); } return letter; }).replace(/[^\w]+/g, ''); } function cssParse(s) { if (!s) return {}; return s.split(';').reduce((result, item) => { item = item.trim(); if (item) { item = item.split(':'); result[camelize(item[0].trim(), false)] = item[1].trim(); } return result; }, {}); } function normalizeCss(s) { if (typeof s === 'string') { s = cssParse(s) } s = Object.assign({}, s); if (s.background && !s.backgroundColor && (s.background.indexOf(0) === '#' || colors[s.background.toLowerCase()])) { s.backgroundColor = s.background; } return s; } function css(...args) { if (inspector.url()) return args; if (typeof args[0] !== 'string' || !cssPlaceholder.test(args[0])) { return args; } let split = args[0].split(placeholder); args = args.slice(1); const str = []; const newArgs = []; split = split.filter((item, i) => !((i === 0 || i === split.length - 1) && item === '')); for (let i = 0; i < split.length; i++) { let item = split[i]; if (split[i].startsWith('%c')) { item = item.replace('%c', ''); let style = normalizeCss(args[i]); if (style.backgroundColor && !isHex(style.backgroundColor)) { style = Object.assign({}, style, { backgroundColor: colorKeywordToHex(style.backgroundColor) }) } if (style.backgroundColor && !style.color) { style = Object.assign({}, style, {color: invertColor(style.backgroundColor, true)}); } if (style.color && !isHex(style.color)) { style = Object.assign({}, style, { color: colorKeywordToHex(style.color) }) } let objChalk = chalk; if (style.textDecoration === 'underline') { objChalk = objChalk.underline } if (style.fontWeight === 'bold') { objChalk = objChalk.bold } if (style.color) { objChalk = objChalk.hex(style.color) } if (style.backgroundColor) { objChalk = objChalk.bgHex(style.backgroundColor) } if (objChalk !== chalk) { item = objChalk(item); } str.push(item); } else { str.push(item); newArgs.push(args[i]); } } return [str.join(''), ...newArgs] } module.exports = css