Settings

Style provider can be configured. Attributes control the generation of global CSS rules, 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 (since v3.12.0, hydration is handled automatically),
• mode - BEM selector generation mode (a - data-attributes, c - classes),
• min -minified BEM selectors generation (boolean attribute),
• theme - current theme which allows to use global vars from assotiated theme dictionary,
• size (added in v3.4.0) - overrides the global CSS base size variable,
• time (added in v3.4.0) - overrides the global CSS base time variable,
• angle (added in v3.5.0) - overrides the global CSS base angle 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 { useStyleProvider } from 'effcss';
import App from './App.tsx';

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

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