Кастомизация

Style provider можно настроить. Атрибуты в основном управляют генерацией глобальных CSS-правил, в то время как параметры объекта задают начальное состояние провайдера.

Простые настройки (атрибуты)

Вы можете задать простые настройки в качестве атрибутов Style provider.

• prefix - префикс для названий приватных таблиц стилей,
• hydrate - логический атрибут гидратации, который позволяет провайдеру гидратировать функции StyleSheet maker таблиц стилей на стороне клиента (с версии v3.12.0 гидратация обрабатывается автоматически),
• mode - режим генерации БЭМ-селекторов (a - data-атрибуты, c - классы),
• min - режим генерации минифицированных БЭМ-селекторов (булев атрибут),
• theme - текущая тема, которая позволяет использовать глобальные переменные из соответствующего набора,
• size (добавлено в v3.4.0) - переопределяет глобальную CSS переменную базового размера,
• time (добавлено в v3.4.0) - переопределяет глобальную CSS переменную базового времени,
• angle (добавлено в v3.5.0) - переопределяет глобальную CSS переменную базового угла.

Комплексные настройки

Комплексные настройки должны быть переданы в функцию defineProvider или переданы свойству скрипта settings внутри script-тега Style provider.

• bp - точки останова для запросов с ограничениями ширины,
• vars - глобальные переменные для каждой темы,
• makers - начальные функции StyleSheet maker,
• off - выключенные функции StyleSheet maker,
• palette (добавлено в v3.4.0) - настройки цветовой палитры, позволяющие кастомизировать утилиту palette,
• coef (добавлено в v3.5.0) - глобальные настройки коэффициента, позволяющие кастомизировать утилиту coef.

Темизация - это просто

Просто передайте все ваши темы с требуемыми значениями переменных в параметр vars. Допустима любая вложенность.

define-provider.ts

import { defineProvider } from 'effcss';

// глобальные переменные, сгруппированные по темам
const vars = {
    // переменные по умолчанию
    '': {
        colors: {
            main: 'white',
            contrast: 'black'
        }
    },
    // переменные темной темы
    dark: {
        colors: {
            main: 'white',
            contrast: 'black'
        }
    },
};

// вы должны вызвать функцию до того, как скрипт провайдера будет проанализирован в DOM
defineProvider({ vars });

main.tsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { useStyleProvider } from 'effcss';
import App from './App.tsx';

const consumer = useStyleProvider();
// установите темную тему для применения заданных глобальных переменных
consumer.theme = 'dark';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
      <App css={consumer} />
  </StrictMode>,
);