The magic behind 💅 styled-components: https://mxstbr.blog/2016/11/styled-components-magic-explained/

tagged-template-literals.js

const str = (greet) => console.log(greet);
const id = "User1";
const obj = {};
const obj1 = {};

const logData = (...props) => {
	console.log(...props);
	props.forEach((item, index) => {
		if(typeof item === 'function') {
			item();
		}

		if(typeof item === 'object') {
			item[index] = true;
		}
	});
}


// Tagged Template Literals will not work when invoking a function
logData(`test1: ${() => str('Hola')}, are you ${id}? ${obj}`);
console.log(obj)

// correct way to call with Template Literals
// We can pass functions and object references
logData`test2: ${() => str('Hello')}, are you ${id}? ${obj1}`
console.log(obj1)