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

view source

Declarations
#

17 declarations

ALL_MODIFIER_NAMES
#

modifiers.ts view source

internal

The lookup behind `get_all_modifier_names`.

Set<string>

type Set<string>

import {ALL_MODIFIER_NAMES} from '@fuzdev/fuz_css/modifiers.js';

All modifier names for quick lookup.

ANCESTOR_MODIFIERS
#

modifiers.ts view source

Map<string, ModifierDefinition>

type Map<string, ModifierDefinition>

import {ANCESTOR_MODIFIERS} from '@fuzdev/fuz_css/modifiers.js';

Map of ancestor modifier names to their CSS output

extract_balanced_parens
#

modifiers.ts view source

(segment: string, prefix: string): string | null import {extract_balanced_parens} from '@fuzdev/fuz_css/modifiers.js';

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 string

prefix

the prefix before the opening paren (e.g., "min-width")

type string

returns

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
#

modifiers.ts view source

(): string[] import {get_all_modifier_names} from '@fuzdev/fuz_css/modifiers.js';

Gets all modifier names for error message suggestions.

returns

string[]

get_modifier
#

modifiers.ts view source

(segment: string): (ModifierDefinition & { is_arbitrary?: boolean | undefined; }) | null import {get_modifier} from '@fuzdev/fuz_css/modifiers.js';

Gets the modifier definition for a segment. Handles both static modifiers and dynamic patterns (arbitrary breakpoints, parameterized states).

segment

type string

returns

(ModifierDefinition & { is_arbitrary?: boolean | undefined; }) | null

the modifier definition or null if not a known modifier

MEDIA_MODIFIERS
#

ModifierDefinition
#

modifiers.ts view source

ModifierDefinition import type {ModifierDefinition} from '@fuzdev/fuz_css/modifiers.js';

Definition for a single modifier.

name

The prefix used in class names (e.g., 'hover', 'md', 'dark')

type string

type

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 string

order?

Optional ordering within type (for breakpoints, sorted by this value)

type number

MODIFIERS
#

modifiers.ts view source

ModifierDefinition[]

type ModifierDefinition[]

import {MODIFIERS} from '@fuzdev/fuz_css/modifiers.js';

All modifier definitions in a single declarative structure. Adding a new modifier requires only adding to this array.

ModifierType
#

modifiers.ts view source

ModifierType

type "media" | "ancestor" | "state" | "pseudo-element"

import type {ModifierType} from '@fuzdev/fuz_css/modifiers.js';

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
#

modifiers.ts view source

internal

Read by `get_modifier`; exported for its tests.

RegExp import {NTH_CHILD_PATTERN} from '@fuzdev/fuz_css/modifiers.js';

Pattern for parameterized nth-child: nth-child(2n+1):

NTH_LAST_CHILD_PATTERN
#

modifiers.ts view source

internal

Read by `get_modifier`; exported for its tests.

RegExp import {NTH_LAST_CHILD_PATTERN} from '@fuzdev/fuz_css/modifiers.js';

Pattern for parameterized nth-last-child: nth-last-child(2n+1):

NTH_LAST_OF_TYPE_PATTERN
#

modifiers.ts view source

internal

Read by `get_modifier`; exported for its tests.

RegExp import {NTH_LAST_OF_TYPE_PATTERN} from '@fuzdev/fuz_css/modifiers.js';

Pattern for parameterized nth-last-of-type: nth-last-of-type(2n):

NTH_OF_TYPE_PATTERN
#

modifiers.ts view source

internal

Read by `get_modifier`; exported for its tests.

RegExp import {NTH_OF_TYPE_PATTERN} from '@fuzdev/fuz_css/modifiers.js';

Pattern for parameterized nth-of-type: nth-of-type(2n):

parse_arbitrary_breakpoint
#

modifiers.ts view source

(segment: string): string | null import {parse_arbitrary_breakpoint} from '@fuzdev/fuz_css/modifiers.js';

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 string

returns

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
#

modifiers.ts view source

(segment: string): { name: string; css: string; type: "state"; } | null import {parse_parameterized_state} from '@fuzdev/fuz_css/modifiers.js';

Parses a parameterized state modifier (nth-child, nth-last-child, nth-of-type, nth-last-of-type).

segment

type string

returns

{ name: string; css: string; type: "state"; } | null

object with name (including parameter) and CSS, or null if not parameterized

PSEUDO_ELEMENT_MODIFIERS
#

modifiers.ts view source

Map<string, ModifierDefinition>

type Map<string, ModifierDefinition>

import {PSEUDO_ELEMENT_MODIFIERS} from '@fuzdev/fuz_css/modifiers.js';

Map of pseudo-element modifier names to their CSS output

STATE_MODIFIERS
#

Imported by
#