Skip to content

Instantly share code, notes, and snippets.

@luislobo14rap
Last active January 12, 2023 06:07
Show Gist options
  • Save luislobo14rap/67a22e55400b99e2f3a2fc74de112ce5 to your computer and use it in GitHub Desktop.
Save luislobo14rap/67a22e55400b99e2f3a2fc74de112ce5 to your computer and use it in GitHub Desktop.
log-css.js
// log-css.js v2
const log = console.log.bind()
const css = (text, options) => {
let cssOptions = ''
for (let prop in options) {
const value = options[prop]
prop = camelCaseToDashCase(prop)
cssOptions += `${prop}: ${value}; `
}
return [`%c${text}`, cssOptions.trim()]
function camelCaseToDashCase(value) {
return value.replace(/[A-Z]/g, matched => `-${matched.toLowerCase()}`)
}
}
// log-css.js v1.1
const log = console.log.bind();
const css = function(item, color = '#fff', background = 'none', fontSize = '12px', fontWeight = 700, fontFamily) {
return ['%c' + item, 'color:' + color + ';background:' + background + ';font-size:' + fontSize + ';font-weight:' + fontWeight + (fontFamily ? ';font-family:' + fontFamily : '')];
};
@luislobo14rap
Copy link
Author

luislobo14rap commented May 25, 2021

// example
log(...css('TEXT', 'rebeccapurple', '#000', '14px'));

@luislobo14rap
Copy link
Author

Example v2:

log(...css('Example =P', {
	backgroundColor: 'blue',
	color: 'white',
	fontFamily: 'Consolas',
	fontSize: '25px',
	fontWeight: '700',
	lineHeight: '20px',
	padding: '7px 7px'
}))

@luislobo14rap
Copy link
Author

Example v2:
log(...css('asduhasudha', {'font-size': '20px', backgroundColor: 'rebeccapurple', color: '#fff', 'padding': '0.2rem'}))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment