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 #
17 declarations
ALL_MODIFIER_NAMES #
ALL_MODIFIER_NAMES
ANCESTOR_MODIFIERS #
ANCESTOR_MODIFIERS
Map<string, ModifierDefinition> Map of ancestor modifier names to their CSS output
extract_balanced_parens #
extract_balanced_parens
(segment: string, prefix: string): string | null Extracts content from balanced parentheses after a prefix. Supports nested parens for calc(), clamp(), min(), max(), etc.
segment
the full segment to parse (e.g., "min-width(calc(100vw - 200px))")
type
stringprefix
the prefix before the opening paren (e.g., "min-width")
type
stringreturns
string | null the content inside the balanced parens, or null if no match/unbalanced
examples
extract_balanced_parens("min-width(800px)", "min-width") // "800px"
extract_balanced_parens("min-width(calc(100vw - 20px))", "min-width") // "calc(100vw - 20px)"
extract_balanced_parens("min-width(calc(100vw)", "min-width") // null (unbalanced)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. Supports nested parentheses for calc(), clamp(), min(), max(), var(). Requires value to start with a digit or known CSS function to catch obvious mistakes.
segment
type
stringreturns
string | null the CSS media query or null if not an arbitrary breakpoint
examples
parse_arbitrary_breakpoint("min-width(800px)") // "@media (width >= 800px)"
parse_arbitrary_breakpoint("min-width(calc(100vw - 200px))") // "@media (width >= calc(100vw - 200px))"
parse_arbitrary_breakpoint("min-width(px)") // null (invalid - no digit or function)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