Babel плагин для стилизованных компонентов

Плагин babel-plugin-styled-components добавляет поддержку серверного рендинга, минификацию стилей и более удобную отладку.

Страница в документации с подробным описанием: https://styled-components.com/docs/tooling#babel-plugin

#стили #styledcomponents #документация #инструменты

​Запрет проброса пропсов

Мы уже знаем, что можно запретить проброс пропсов стилизованного компонента до самого HTML-узла и превращение их в атрибуты: https://yangx.top/react_junior/176

Для этого нужно просто добавить к имени пропа символ $.

Но есть и более сложный механизм фильтрации таких пропсов: метод shouldForwardProp. Он может пригодиться, если множество компонентов высшего порядка составлены в один и используют один и тот же проп.

У созданного с помощью функции styled() компонента нужно вызвать метод withConfig и передать ему объект конфигурации с полем shouldForwardProp.

🤔 В документации не нашлось других примеров использования метода withConfig.

‼️ Важно: остальные методы компонента, например, attrs должны идти в цепочке после withConfig.

Итак, функция shouldForwardProp - это просто фильтр для пропов. Она получает два аргумента: имя свойства и (опционально) дефолтную функцию валидации, которая отфильтровывает только имена HTML-атрибутов. Внутри shouldForwardProp вы можете разместить любую логику отбора по имени пропа.

#стили #styledcomponents #документация #примерыкода

Стилизованные компоненты без компонентов

Если вы не хотите создавать отдельный стилизованный компонент, но хотите при этом стилизовать какой-то элемент в той же манере, можно использовать проп css. Его можно установить и для обычного HTML-элемента, и для React-компонента, но чтобы он правильно обрабатывался, нужно использовать плагин для Babel.

Любой элемент, для которого указан проп css под капотом будет превращаться в стилизованный компонент.

Импортировать ничего не нужно, этот проп обрабатывается плагином автоматически.

#стили #styledcomponents #документация

Макрос для Babel

Библиотека styled components также может использоваться в виде babel macro. Макрос - это альтернатива для плагина babel, которая не нуждается во внешней конфигурации и отдельном подключении. Подробнее о макросах Babel в документации.

Если ваш проект создан с помощью create-react-app, то он уже поддерживает использование макросов из коробки. В ином случае сначала нужно подключить babel-plugin-macros.

Макрос нужно импортировать из 'styled-components/macro', а затем можно использовать вместо плагина.

#стили #styledcomponents #документация

Использование вместе с TypeScript

При установке пропа css для произвольных элементов TypeScript будет выдавать ошибки. Чтобы избежать этого, нужно установить пакет @types/styled-components, а также прописать этот импорт в проекте:

import {} from 'styled-components/cssprop'

#стили #styledcomponents #документация #typescript

​StyleSheetManager

StyleSheetManager - вспомогательный компонент для настройки процесса обработки стилей. Выглядит как обычный React-компонент, принимает пропы для разных настроек. Например, можно отменить добавление вендорных префиксов к стилям (по умолчанию они добавляются).

#стили #styledcomponents #документация

​isStyledComponent

Утилитарная функция для определения, является ли компонент стилизованным компонентом.

#стили #styledcomponents #документация

​Получение текущей темы оформления

Мы уже говорили про поддержку и использование тем оформления в styled components. Вкратце повторю: используем компонент ThemeProvider, передаем ему нужную тему, а затем во всех нижележащих компонентах можем извлечь эту актуальную тему из пропа theme.

В документации нашелся еще хук useTheme, который тоже позволяет получать текущую тему из провайдера. Можно использовать как альтернативу пропу theme, если потребуется.

#стили #styledcomponents #документация

​ThemeConsumer

Еще одна альтернатива использованию пропа theme с текущей темой оформления - это компонент ThemeConsumer. Он использует паттерн render prop, то есть рендерит функцию, которая получает в качестве параметра тему и должна вернуть нужную разметку.

#стили #styledcomponents #документация

​Утилиты styled components для тестирования

Вспомогательные функции для тестирования находятся в модуле styled-components/test-utils.

👉 find - находит первый подходящий стилизованный компонент в DOM-дереве (похоже на element.querySelector)

find(document.body, Foo)

👉 find - находит все подходящие стилизованные компоненты в DOM-дереве (похоже на element.querySelectorAll)

👉 enzymeFind- находит стилизованные компоненты внутри обертки, созданной методом mount библиотеки enzyme.

#стили #styledcomponents #документация #тестирование

Интеграция styled-components с Jest

Подробнее в документации: https://styled-components.com/docs/tooling#jest-integration

Для тестирования стилизованных компонентов с помощью Jest есть специальный пакет jest-styled-components. Он улучшает тестирование снапшотами и предоставляет дополнительную проверку для стилей - toHaveStyleRule.

Для тестирования используем тестовый рендерер React.

#стили #styledcomponents #документация #тестирование #jest

Подсветка синтаксиса

Когда вы пишете CSS внутри шаблонных строк, то ваш редактор кода, возможно, не сможет обеспечить адекватную подсветку синтаксиса. Чтобы ему помочь, нужно установить дополнительные плагины: https://styled-components.com/docs/tooling#syntax-highlighting

В документации описана текущая ситуация для разных редакторов (Atom, Sublime, VS Code, VIM и т. д.) с указанием нужных плагинов.

#стили #styledcomponents #документация #инструменты

​Styled Theming

Еще один способ создавать темы для стилизованных компонентов - использовать пакет styled-theming.

Тут немного другой подход. Мы также создаем объект темы с помощью функции theme, но внутри компонента уже не нужно вытаскивать эту тему из пропа, достаточно просто указать ссылку на саму тему. Это здорово упрощает код, особенно, если вы активно используете темы.

Если интересно, можно почитать статью: https://jamie.build/styled-theming.html

#стили #styledcomponents #документация #примерыкода #ссылки

​Линтинг стилизованных компонентов

Чтобы использовать stylelint для стилизованных компонентов, нужно доустановить пару пакетов:

👉 stylelint-processor-styled-components, чтобы извлекать стили из компонентов. Процессор игнорирует все файлы, которые не содержат стилизованных компонентов.
👉 stylelint-config-styled-components, чтобы отключить правила, которые конфликтуют с библиотекой.

Процессор и расширение нужно поключить в соответствующие секции файла .stylelintrc.

Важно: Функция —fix не поддерживается.

#стили #styledcomponents #документация #инструменты #линтинг

Линтинг в процессе сборки

Чтобы добавить линтинг стилизованных компонентов в процесс сборки кода (а не просто запускать через командную строку), можно использовать специальный лоадер для webpack: stylelint-custom-processor-loader.

#стили #styledcomponents #документация #инструменты #линтинг

JSS

Будем считать, что со styled-components мы в целом закончили. Дальше по плану React JSS.

Очевидно, что существует некий JSS, у которого есть версия для использования с React. Что это за зверь такой?

Очевидно, это что-то вроде CSS + JS.

Важно: указанный репозиторий неправильный, правильный инструмент в следующем посте

Readme в репозитории jss утверждает, что это простой кросс-браузерный способ использовать javascript, чтобы генерировать стили. И он не просто навешивает инлайн-стили, а позволяет создавать правила уровня документа.

JSS не претендует полностью заменить классический CSS, но предлагает помощь в удобной организации динамических стилей, которые могут изменяться при изменениях самого документа.

Также JSS хорошо подходит для разного рода плагинов и прочих модульных штук, которые все равно динамически загружают свои файлы. А с помощью JSS можно избавиться от загрузки файлов стилей.

Синтаксис у JSS объектный (JSON), то есть мы, очевидно, не сможем писать CSS как он есть, как это было в styled-components.

Конечно же, можно использовать переменные, миксины и прочие удобные штуки, иначе зачем вообще создавать такой инструмент.

Подчеркивается, что вставлять стили в документ лучше, чем навешивать их на отдельные элементы, потому что это требует всего лишь одной перерисовки страницы.

Что ж, практически убедили :)

#стили #jss #документация

JSS (попытка #2)

Очевидно, произошло недопонимание, и репозиторий jss из прошлого поста совсем не тот, который нам нужен.

А нужен нам вот этот сайт: https://cssinjs.org/

И настоящий JSS, кажется, имеет намного больше амбиций, чем тот предыдущий.

Он позволяет использовать JavaScript для описания стилей в декларативном и переиспользуемом стиле, без конфликтов. Может компилироваться в браузере, на сервере или в процессе сборки на Node.

#стили #jss #документация

JSS: первый взгляд

Инструмент состоит из собственно ядра, каких-то плагинов, интеграций для фреймворков и прочих модулей. То есть мы, вероятно, сможем выделить только нужные нам части.

Основной пакет: jss
Пакет для React: react-jss
Есть даже пакет для любителей styled-components: styled-jss, с таким же api, как у styled-components, но поддержкой фич JSS (о которых мы скоро узнаем).

Для оформления стилей используется объектная нотация. Есть онлайн-компилятор, чтобы сразу понимать, во что превращается ваш код: https://cssinjs.org/repl/

Есть также песочницы:

- jss
- react-jss

В стандартной версии мы пишем объект со стилями, с помощью специального метода превращаем его, очевидно, в CSS-код, получаем сгенерированные имена классов и помещаем их в нужные места (на нужные элементы).

В React-версии примерно то же, плюс совмещаем все это с ThemeProvider для использования тем.

#стили #jss #документация

Фичи JSS

Список фич, которые предлагает JSS в чем-то похож на уже изученные инструменты (css модули и styled-components) - это логично, учитывая что фундаментальный подход у них общий.

👉 генерация "настоящего" CSS и поддержка всех нативных возможностей CSS
👉 отсутствие коллизий имен (генерация уникальных классов)
👉 возможность переиспользовать код
👉 возможность создавать динамические стили
👉 возможность удалять стили со страницы, если они больше не нужны
👉 в React версии - выделение критических стилей (загружаются стили только для тех компонентов, которые в данный момент используются)

Из новенького:

👉 архитектура, основанная на плагинах, можно прикрутить что-то свое, если хочется, или подобрать готовые плагины
👉 "выразительный" синтаксис
👉 полная изоляция от глобальных стилей (используется плагин), полезно для создания виджетов

#стили #jss #документация

Недооцененные хуки React, которые вы упускаете

Статья (англ.): https://blog.logrocket.com/underrated-react-hooks-youre-missing-out-on/

В статье разобраны три встроенных хука, про которые мы уже читали в документации:

👉 useImperativeHandle
👉 useLayoutEffect
👉 useDebugValue

Помимо описания есть примеры использования, что очень приятно.

Вкратце:

useImperativeHandle позволяет вместо обычного рефа вернуть родительскому компоненту настроенный объект с нужными методами. Его удобно использовать, например, для управления модальным окном. При этом состояние хранится внутри компонента модалки, но родитель получает удобный способ его изменять. Используется в сочетании с функцией forwardRef.

useLayoutEffect вызывается после применения обновлений, но ДО того, как браузер их отрисует (синхронно, в отличие от useEffect). То есть он блокирует отрисовку и может использоваться для внесения изменений непосредственно в DOM компонента, чтобы пользователь не увидел изменений. Автор статьи использует его для управления скроллом при изменении контента страницы при роутинге.

useDebugValue улучшает опыт разработчика при логировании кастомных хуков. По умолчанию, если в кастомном хуке используются встроенные хуки типа useState, в React DevTools они не подписаны - просто какой-то State. Нужно помнить порядок использования, чтобы понять, какой стейт к чему относится. useDebugValue позволяет вывести что-нибудь полезное в панель отладки, основываясь на текущих значениях состояний.

#ссылки #хуки