Emotion и styled-components действительно генерируют CSS в runtime, то есть стили создаются и вставляются в DOM во время выполнения приложения. Это может приводить к некоторым проблемам с производительностью:

Время загрузки: при первом рендере происходит генерация и вставка стилей, что может увеличить время отображения страницы.
Перерисовки: при динамическом изменении стилей может происходить дополнительная нагрузка.
Размер бандла: библиотеки добавляют свой runtime-код.

Когда это начинает болеть:

На больших проектах с множеством компонентов и сложными стилями.
При необходимости максимально быстрой загрузки (например, для SEO или мобильных устройств).
Если приложение сильно интерактивно и часто меняет стили.

Альтернативы с лучшим performance:

CSS Modules: стили компилируются на этапе сборки, минимизируя runtime.
Tailwind CSS: утилитарный CSS с классами, генерируемыми заранее.
Static extraction: некоторые CSS-in-JS библиотеки (например, Linaria, Vanilla Extract) позволяют извлекать CSS на этапе сборки, а не в runtime.

Пример использования CSS Modules:

import styles from './Button.module.css';

function Button() {
  return <button className={styles.primary}>Click me</button>;
}

Таким образом, если важна производительность и минимизация runtime, стоит рассмотреть подходы с генерацией стилей на этапе сборки, а не в runtime.

Emotion и styled-components генерируют стили в runtime — это проблема? Когда начинает болеть? Какие есть альтернативы с лучшим performance?