Set<string> All modifier names for quick lookup
modifiers.ts
Declarative modifier definitions for CSS-literal syntax.
Modifiers enable responsive, state-based, and contextual styling:
- Media modifiers: md:, print:, motion-safe:
- Ancestor modifiers: dark:, light:
- State modifiers: hover:, focus:, disabled:
- Pseudo-element modifiers: before:, after:
@see {@link https://github.com/fuzdev/fuz_css} for documentation
Declarations #
18 declarations
ALL_MODIFIER_NAMES #
ALL_MODIFIER_NAMES
ANCESTOR_MODIFIERS #
ANCESTOR_MODIFIERS
Map<string, ModifierDefinition> Map of ancestor modifier names to their CSS output
ARBITRARY_MAX_WIDTH_PATTERN #
ARBITRARY_MAX_WIDTH_PATTERN
RegExp Pattern for arbitrary max-width breakpoints: max-width(600px):
ARBITRARY_MIN_WIDTH_PATTERN #
ARBITRARY_MIN_WIDTH_PATTERN
RegExp Pattern for arbitrary min-width breakpoints: min-width(800px):
get_all_modifier_names #
get_all_modifier_names
(): string[] Gets all modifier names for error message suggestions.
returns
string[] get_modifier #
get_modifier
(segment: string): (ModifierDefinition & { is_arbitrary?: boolean | undefined; }) | null Gets the modifier definition for a segment. Handles both static modifiers and dynamic patterns (arbitrary breakpoints, parameterized states).
segment
type
stringreturns
(ModifierDefinition & { is_arbitrary?: boolean | undefined; }) | null The modifier definition or null if not a known modifier
MEDIA_MODIFIERS #
MEDIA_MODIFIERS
Map<string, ModifierDefinition> Map of media modifier names to their CSS output
ModifierDefinition #
ModifierDefinition
ModifierDefinition Definition for a single modifier.
name
The prefix used in class names (e.g., 'hover', 'md', 'dark')
type
stringtype
Type determines position in modifier order and CSS output behavior
type ModifierType
css
The CSS output - wrapper for media/ancestor, suffix for state/pseudo-element
type
stringorder
Optional ordering within type (for breakpoints, sorted by this value)
type
numberMODIFIERS #
MODIFIERS
ModifierDefinition[] All modifier definitions in a single declarative structure. Adding a new modifier requires only adding to this array.
ModifierType #
ModifierType
ModifierType Type of modifier determining its position in the class name and CSS output.
Order in class names: [media:][ancestor:][state...:][pseudo-element:]property:value
NTH_CHILD_PATTERN #
NTH_CHILD_PATTERN
RegExp Pattern for parameterized nth-child: nth-child(2n+1):
NTH_LAST_CHILD_PATTERN #
NTH_LAST_CHILD_PATTERN
RegExp Pattern for parameterized nth-last-child: nth-last-child(2n+1):
NTH_LAST_OF_TYPE_PATTERN #
NTH_LAST_OF_TYPE_PATTERN
RegExp Pattern for parameterized nth-last-of-type: nth-last-of-type(2n):
NTH_OF_TYPE_PATTERN #
NTH_OF_TYPE_PATTERN
RegExp Pattern for parameterized nth-of-type: nth-of-type(2n):
parse_arbitrary_breakpoint #
parse_arbitrary_breakpoint
(segment: string): string | null Parses an arbitrary breakpoint modifier.
segment
type
stringreturns
string | null The CSS media query or null if not an arbitrary breakpoint
parse_parameterized_state #
parse_parameterized_state
(segment: string): { name: string; css: string; type: "state"; } | null Parses a parameterized state modifier (nth-child, nth-last-child, nth-of-type, nth-last-of-type).
segment
type
stringreturns
{ name: string; css: string; type: "state"; } | null Object with name (including parameter) and CSS, or null if not parameterized
PSEUDO_ELEMENT_MODIFIERS #
PSEUDO_ELEMENT_MODIFIERS
Map<string, ModifierDefinition> Map of pseudo-element modifier names to their CSS output
STATE_MODIFIERS #
STATE_MODIFIERS
Map<string, ModifierDefinition> Map of state modifier names to their CSS output