Settings

Style Provider can be configured. Attributes control the generation of CSS selectors, while object parameters set the initial state of the provider.

Simple settings (attributes)

You can set simple setting as attributes of the Style provider HTMLScriptElement.

• prefix - private stylesheet name prefix,
• hydrate - boolean hydratation attribute which make provider to hydrate stylesheet makers on client side,
• mode - BEM selector generation mode (a - data-attributes, c - classes),
• theme - current theme which allows to use global vars from assotiated theme dictionary,
• size (added in v3.4.0) - overrides global root size CSS variable,
• time (added in v3.4.0) - overrides global root time CSS variable,
• angle (added in v3.5.0) - overrides global root angle CSS variable

Complex settings

Complex settings should be passed to defineProvider function or be assigned to the settings field inside the Style provider HTMLScriptElement.

• bp - breakpoints for width limit queries,
• vars - global vars for each theme,
• makers - initial stylesheet makers,
• off - switched off initial stylesheet makers,
• palette (added in v3.4.0) - color palette settings that allow to customize palette utility,
• coef (added in v3.5.0) - global coefficient settings that allow to customize coef utility

Theming is too easy

Just pass all your themes with the required variable values to the vars setting. Any nesting is acceptable.

define-provider.ts

import { defineProvider } from 'effcss';

// global vars grouped by theme
const vars = {
    // default variables
    '': {
        colors: {
            main: 'white',
            contrast: 'black'
        }
    },
    // dark theme variables
    dark: {
        colors: {
            main: 'white',
            contrast: 'black'
        }
    },
};

// you should run it before provider HTMLScriptElement connected to DOM
defineProvider({ vars });

main.tsx

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

const consumer = createConsumer();
// set dark theme to apply predefined global variables
consumer.theme = 'dark';

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