Руководство

В этом разделе мы установим EffCSS и посмотрим, как им пользоваться.

Установка

Введите в вашем терминале:

Типизация CSS

По умолчанию EffCSS работает в гибком режиме: стили принимают любые объекты. Чтобы включить строгую типизацию CSS (автодополнение и проверку на недопустимые значения), один раз определите EffCSS.Properties в своем проекте, расширив глобальное пространство имен.

Например, можно установить пакет csstype

Затем объедините с EffCSS

Теперь для каждого правила стиля доступно полное автодополнение TypeScript для CSS-свойств.

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

Чтобы создать стили с помощью EffCSS, вам просто нужно вызвать утилиты. К счастью, их очень мало, и по их названию вы можете понять, что они делают.

Среди всех утилит нужно выделить classNames и attributes. Они требуют указания контракта в виде типа Typescript, с помощью которого будут реализованы селекторы. Это позволит вам контролировать как создание стилей, так и их использование. Тип контракта - это объект с любым уровнем вложенности свойств:

Остальные утилиты выводят типы из своих аргументов. Давайте подробнее рассмотрим использование каждой из них.

classNames

className создает одно CSS правило с указанным содержимым и возвращает селектор класса в виде строки:

lazyClassName (или className.lazy) отличается от className следующими особенностями:

• может принимать в качестве аргумента как объект, так и функцию;
• возвращает функцию-резолвер, которая вычисляет селектор;
• генерирует CSS после первого использования резолвера.

classNames создает таблицу стилей и возвращает функцию для получения имен классов:

lazyClassNames (или classNames.lazy) отличается от classNames тем, что выполняет переданную функцию и создает таблицу стилей после первого вычисления селекторов:

attributes

attribute создает одно CSS правило с указанным содержимым и возвращает селектор атрибута в виде объекта:

lazyAttribute (или attribute.lazy) отличается от attribute следующими особенностями:

• может принимать в качестве аргумента как объект, так и функцию;
• возвращает функцию-резолвер, которая вычисляет селектор;
• генерирует CSS после первого использования резолвера.

attributes создает таблицу стилей и возвращает функцию для получения атрибутов:

lazyAttributes отличается от attributes тем, что выполняет переданную функцию и создает таблицу стилей после первого вычисления селекторов:

id

attribute создает одно CSS правило с указанным содержимым и возвращает селектор идентификатора в виде строки:

lazyId (или id.lazy) отличается от id следующими особенностями:

• может принимать в качестве аргумента как объект, так и функцию;
• возвращает функцию-резолвер, которая вычисляет селектор;
• генерирует CSS после первого использования резолвера.

customStyles

customStyles создает таблицу стилей без генерируемых селекторов:

lazyCustomStyles отличается от customStyles тем, что выполняет переданную функцию и создает таблицу стилей после первого вызова резултьтата:

variables

variable создает одно правило @property, variables создает сразу несколько:

Получить и установить начальное значение глобальной переменной можно с помощью соответствующих методов:

INFO

Методы set/get для локальных переменных являются заглушками, поскольку эти переменные создаются внутри отдельной таблицы стилей и еще не существуют на момент выполнения функции-генератора. Следовательно, указанные методы можно вызывать только для глобальных переменных.

animations

animation создает одно правило @keyframes, animations создает сразу несколько:

layers

layer создает одно правило @layer, layers создает сразу несколько:

containers

container создает одно правило @container, containers создает сразу несколько:

fonts

font создает одно правило @font-face, fonts создает сразу несколько:

theme

theme группирует переменные и их значения в варианты темы, чтобы упростить динамическое переключение стилей:

update

update обновляет начальное значение глобальной переменной/переменных:

По возможности используйте метод set для установки переменной, поскольку он более очевиден.

stylesheet

stylesheet возвращает созданную таблицу стилей:

Также есть утилиты, которые возвращают специальные таблицы стилей:

• layersStylesheet возвращает таблицу стилей глобальных слоев,
• variablesStylesheet возвращает таблицу стилей глобальных переменных,
• animationsStylesheet возвращает таблицу стилей глобальных анимаций,
• fontsStylesheet возвращает таблицу стилей глобальных шрифтов,
• sharedStylesheet возвращает таблицу стилей глобальных правил (созданных с помощью className и attribute).

configure

configure влияет на генерацию CSS, если вызывается до создания первой таблицы стилей:

serialize

serialize преобразует свой аргумент или все созданные таблицы стилей в HTML-строку:

serializeMeta сериализует метаданные своего аргумента или всех созданных таблиц стилей в HTML-строку:

Таким образом можно вычислить стили и метаданные на сервере и переиспользовать их на клиенте. Это особенно полезно для SSG/SSR.

subscribe

subscribe позволяет отслеживать события создания стилей с помощью EffCSS:

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

context

context позволяет создавать отдельную группу стилей, возвращая объект со всеми утилитами EffCSS (за исключением самого context):

Поскольку стили context можно независимо сериализовать и восстанавливать (гидратировать), эту возможность можно использовать для изоляции стилей между микрофронтендами.