blocks

blocks is the object exported from every .ecss file. It contains one factory per declared @block.

Import

import { blocks } from './Button.ecss';

Calling a block

The factory accepts the block's parameters and returns an object with three fields:

const {
  class: className,
  cssVariables,
  dataAttributes,
} = blocks.Button({
  variant: 'primary',
  disabled: true,
});

The parameters correspond to the @param declarations in the .ecss file, with names in camelCase.

class

The block's CSS class — a string to add to the element.

cssVariables

An object of CSS variables to apply via the style attribute.

dataAttributes

An object of data attributes reflecting the passed parameters. Used to apply conditional styles from @if.

Elements

If a @block contains @element, they are available as nested factories:

blocks.Button({ variant: 'primary' }); // block factory
blocks.Button.Icon(); // factory for the Icon element
blocks.Button.Text(); // factory for the Text element

Element factories take no parameters.

Manual assembly

Direct access to the result fields is useful when building a wrapper by hand — for example, for a custom renderer or integration with a non-standard framework:

const element = document.createElement('button');
const {
  class: className,
  cssVariables,
  dataAttributes,
} = blocks.Button({
  variant: 'primary',
  disabled: true,
});

element.className = className;

Object.entries(cssVariables).forEach(([key, val]) => {
  element.style.setProperty(key, val);
});

Object.entries(dataAttributes).forEach(([key, val]) => {
  element.setAttribute(key, String(val));
});

See also

• @block — declaring blocks
• @element — nested elements