Skip to content

Interface: ModifierConvention

Defined in: packages/core/src/modifier.ts:26

How a modifier attaches to a component's base class.

  • chained — a separate class on the base element: .base.primary (bare/OOCSS), .base.-mod (rscss), .base.is-open (state). separator is the required class prefix ("" = any chained class, -, is-).
  • suffix — appended into the base class name itself: .button--primary (BEM/SUIT). separator is the delimiter between the base and the modifier body (--).
  • attribute — an attribute selector on the base element: .card[data-variant="ghost"] (CUBE). separator is the required attribute-name prefix (data-; "" = any attribute).

Properties

elementSeparator?

ts
optional elementSeparator?: string | string[];

Defined in: packages/core/src/modifier.ts:40

The delimiter that marks a BEM-style element inside the base class name (e.g. "__" in .block__element). When set (suffix structure only), a matching class is recorded as a part rather than a modifier. Its own modifiers (.block__element--mod) are captured as part of the element name for now.


propValue?

ts
optional propValue?: boolean;

Defined in: packages/core/src/modifier.ts:64

Split the modifier body into prop/value on ModifierConvention.propValueSeparator? Defaults to false. Ignored for attribute (which always derives prop from the attribute name and value from the attribute value).


propValueSeparator?

ts
optional propValueSeparator?: string;

Defined in: packages/core/src/modifier.ts:66

The separator for the prop/value split. Defaults to -.


pseudoElements?

ts
optional pseudoElements?: string[];

Defined in: packages/core/src/modifier.ts:58

Native pseudo-elements (without the ::) to document when they appear on a component's selectors, e.g. ["before", "after"]. Defaults to DEFAULT_PSEUDO_ELEMENTS — a curated set of standard pseudo-elements, excluding vendor/experimental ones. Shadow ::part() is handled separately.


separator

ts
separator: string | string[];

Defined in: packages/core/src/modifier.ts:33

The prefix/delimiter, interpreted per ModifierConvention.structure. May be a single string or several — any one of which marks a modifier. Separators are matched literally.


statePrefixes?

ts
optional statePrefixes?: string[];

Defined in: packages/core/src/modifier.ts:46

Class prefixes that mark a state rather than a modifier (e.g. ["is-", "has-"]). A class chained to the base whose name starts with one of these is recorded as a state, and is never treated as a modifier. Opt-in; no preset sets it by default.


statePseudoClasses?

ts
optional statePseudoClasses?: string[];

Defined in: packages/core/src/modifier.ts:52

Native pseudo-classes (without the :) to recognize as states when they appear on the base, e.g. ["disabled", "checked"]. Defaults to DEFAULT_STATE_PSEUDO_CLASSES — a curated set of form/UI states, deliberately excluding ubiquitous interaction pseudos (:hover, :focus).


structure

ts
structure: "chained" | "suffix" | "attribute";

Defined in: packages/core/src/modifier.ts:28

The structural form. An open union — further forms may be added without a breaking change.

Released under the MIT License