Interface: CssModifier
Defined in: packages/core/src/model.ts:19
A modifier variation on a component's base class. How modifiers are spelled is configurable (see ParseOptions.modifierConvention); the default is BEM (.button--primary).
Properties
affects?
optional affects?: object[];Defined in: packages/core/src/model.ts:75
Set via an authored inline @modifier -x — @affects <component>.<target> … marker: this modifier changes how a descendant record (typically a sub-component reached via @structure/@memberOf) renders — e.g. .table.-layout-stacked .table-cell::before {…}. target is a part, pseudo-element, or state name on component; the CSS rule causing the effect lives in that other record's own stylesheet, not this one, so there'd otherwise be nothing on this modifier pointing a reader there.
component
component: string;description?
optional description?: string;target
target: string;alias?
optional alias?: object;Defined in: packages/core/src/model.ts:54
Set when the modifier is an alias of another modifier. canonical names the canonical modifier; note carries optional authored guidance from an inline @alias tag.
canonical?
optional canonical?: string;note?
optional note?: string;deprecated?
optional deprecated?: object;Defined in: packages/core/src/model.ts:49
Set when the modifier is deprecated. canonical (from an AST alias marker) is the modifier class to use instead; note (from an authored inline deprecation tag on the @modifier line) is free-text replacement guidance for cases where the replacement isn't itself a modifier.
canonical?
optional canonical?: string;note?
optional note?: string;description?
optional description?: string;Defined in: packages/core/src/model.ts:37
Prose from a @modifier doc tag, when authored.
global?
optional global?: boolean;Defined in: packages/core/src/model.ts:67
Set via an authored inline @modifier -x — @global … marker: this modifier applies to any component/layout/rule/declaration (not just its parent record). When set, the modifier is matched globally during validation and consumption checks.
interaction?
optional interaction?: boolean;Defined in: packages/core/src/model.ts:61
Set via an authored inline @modifier -x — @interaction … marker: a class toggled by script (a JS interaction hook, e.g. -should-animate) that carries no CSS declarations of its own. Exempts the modifier from the "documented modifier isn't defined by any selector" check, since it's expected to have no CSS backing.
name
name: string;Defined in: packages/core/src/model.ts:25
The modifier as written, minus its outer punctuation — its exact spelling depends on the convention: button--primary (BEM, the default), -color-secondary (rscss), primary (bare/OOCSS), or data-variant="ghost" (CUBE attribute).
pattern?
optional pattern?: boolean;Defined in: packages/core/src/model.ts:35
Set when this is a * family (e.g. -icon-*) rather than a single modifier — authored as @modifier -icon-* and/or derived from a [class*="-icon-"] selector. Concrete usages (-icon-arrow) are matched against it as instances.
prop
prop: string;Defined in: packages/core/src/model.ts:27
The property segment — a grouping key derived from the modifier (e.g. color, variant, primary).
selector?
optional selector?: string;Defined in: packages/core/src/model.ts:43
The original CSS selector when the modifier was authored with a non-class form (attribute, ID, :host) or an alias — parallel to CssPart.selector. Absent for class and bare-name modifiers, which are the common AST-derived forms.
value?
optional value?: string;Defined in: packages/core/src/model.ts:29
The value segment, e.g. secondary or ghost; absent for boolean/flag modifiers.