tagged_template_literals.js

// These are equivalent:
myFunc`some string here`
myFunc(['some string here'])

// ----------------------------------

const aVar = 'good'
// These are equivalent:
myFunc`this is a ${aVar} day`
myFunc(['this is a ', ' day'], aVar)

// ----------------------------------

// These are equivalent:
myFunc`
    background-color: ${props => props.primary ? "blue" : "grey"};
    font-size: 20px;
`
myFunc([
    'background-color: ',
     ${props => props.primary ? "blue" : "grey"},
    '\n; font-size: 20px'
])

// Then this is how we define our MyFunc function:
function myFunc($args) {
    css = "";
    for (const argument of args){
        if (typeof argument === 'function') {
            css = css + argument() // call then concat result string
        } else {
            css = css + argument // concat string
        }
    }
    return css;
}