Заметки про React(@ru_react_notes). Griffel – новый CSS-in-JS от Microsoft Microsoft презентовал свою CSS-in-JS библиотеку для стилизац

Griffel – новый CSS-in-JS от Microsoft Microsoft презентовал свою CSS-in-JS библиотеку для стилизации React приложений. Основные фичи: - возможность компиляции CSS во время сборки и в runtime - типизация стилей через csstype - использование Atomic CSS для переиспользования стилей и предотвращения проблем со специфичностью CSS. Пример использования:

import { makeStyles } from '@griffel/react';

const useClasses = makeStyles({
  button: { color: 'red' },
  icon: { paddingLeft: '5px' },
});

function Component() {
  const classes = useClasses();

  return (
    <div>
      <button className={classes.button} />
      <span className={classes.icon} />
    </div>
  );
}

При написании стилей поддерживаются псевдоклассы, псевдоэлементы и at-правила. Также в Griffel есть API для создания глобальных стилей, которые не привязаны к компоненту – makeStaticStyles. https://github.com/microsoft/griffel Очень интересно наблюдать, как появляются новые CSS-in-JS библиотеки, особенно от таких крупных компаний. Еще в 2019 году Facebook рассказал о своей CSS-in-JS библиотеке – Stylex. Правда она еще до сих пор не появилась на гитхабе.