styled-components や Emotion のあれはタグ付きテンプレート

const Button = styled.button`
  padding: 8px;
  background-color: #ff6699;
  color: #ffffff;
`;

const button = css`
  padding: 8px;
  background-color: #ff6699;
  color: #ffffff;
`;

styled.button``;

css``;

const print = (args) => console.log(args);

print('hello'); // hello
print`hello`; // [ 'hello' ]

const print = (args) => console.log(args);

const message = 'world';

print(`hello ${message}`); // hello world
print`hello ${message}`; // [ 'hello ', '' ]

const print = (...args) => console.log(args);

const message = 'world';

print(`hello ${message}`); // [ 'hello world' ]
print`hello ${message}`; // [ [ 'hello ', '' ], 'world' ]

const print = (...args) => console.log(args);

const message1 = 'world';
const message2 = 'again';

print(`hello ${message1} ${message2}`); // [ 'hello world again' ]
print`hello ${message1} ${message2}`; // [ [ 'hello ', ' ', '' ], 'world', 'again' ]

print`hello ${message1} ${message2}`;

// 以下が第一引数として配列で渡される
// - 先頭から最初のテンプレートリテラル（${message1}）開始までの 'hello '
// - 上記終わりから次のテンプレートリテラル（${message2}）開始までの ' '
// - 上記の終わりから最後までの ''
// -> 第一引数 ['hello ', ' ', '']

// テンプレートリテラルで記述された内容は第二引数以降でそれぞれ渡される
// -> 第二引数 'world'
// -> 第三引数 'again'

const print = (...args) => console.log(args);

print(`hello ${() => console.log('world')}`); // [ "hello () => console.log('world')" ]
print`hello ${() => console.log('world')}`; // [ [ 'hello ', '' ], () => console.log('world') ]

const exec = (...args) => {
  args.forEach((arg) => {
    if (typeof arg === 'function') {
      arg();
    }
  });
};

exec`hello ${() => console.log('world')}`; // console.log('world') が実行され world と出力される

const styling = (arg1, arg2) => {
  return `${arg1[0].trim()}${arg2()};`;
};

let bool;

bool = true;

const style1 = styling`
  color: ${() => (bool ? 'red' : 'blue')}
`;

bool = false;

const style2 = styling`
  color: ${() => (bool ? 'red' : 'blue')}
`;

console.log(style1); // color: red;
console.log(style2); // color: blue;