css_class_generation.ts

CSS class generation utilities.

Produces CSS output from class definitions, handles interpretation of dynamic classes, and provides collection management for extracted classes.

view source

Declarations
#

13 declarations

CssClassDefinition
#

CssClassDefinitionBase
#

CssClassDefinitionComposition
#

css_class_generation.ts view source

CssClassDefinitionComposition import type {CssClassDefinitionComposition} from '@fuzdev/fuz_css/css_class_generation.js';

Pure utility composition (composes only).

inheritance

extends: CssClassDefinitionBase

composes

type string[]

declaration?

type undefined

ruleset?

type undefined

CssClassDefinitionDeclaration
#

css_class_generation.ts view source

CssClassDefinitionDeclaration import type {CssClassDefinitionDeclaration} from '@fuzdev/fuz_css/css_class_generation.js';

Custom CSS declaration (optionally seeded with composes).

inheritance

extends: CssClassDefinitionBase

declaration

type string

composes?

type string[]

ruleset?

type undefined

CssClassDefinitionInterpreter
#

css_class_generation.ts view source

CssClassDefinitionInterpreter import type {CssClassDefinitionInterpreter} from '@fuzdev/fuz_css/css_class_generation.js';

Interpreter for dynamic CSS class generation based on pattern matching.

inheritance

extends: CssClassDefinitionBase

pattern

type RegExp

interpret

type (matched: RegExpMatchArray, ctx: CssClassInterpreterContext): string | null

matched

type RegExpMatchArray

ctx

type CssClassInterpreterContext
returns string | null

CssClassDefinitionRuleset
#

css_class_generation.ts view source

CssClassDefinitionRuleset import type {CssClassDefinitionRuleset} from '@fuzdev/fuz_css/css_class_generation.js';

Full ruleset with selectors.

inheritance

extends: CssClassDefinitionBase

ruleset

type string

classes?

type undefined

declaration?

type undefined

CssClassDefinitionStatic
#

CssClassInterpreterContext
#

css_class_generation.ts view source

CssClassInterpreterContext import type {CssClassInterpreterContext} from '@fuzdev/fuz_css/css_class_generation.js';

Context passed to CSS class interpreters. Provides access to logging, diagnostics collection, and the class registry.

log?

Optional logger for warnings/errors

type Logger

diagnostics

Diagnostics array to collect warnings and errors

type InterpreterDiagnostic[]

class_definitions

All known CSS class definitions (token + composite classes)

type Record<string, CssClassDefinition | undefined>

css_properties

Valid CSS properties for literal validation, or null to skip validation

type Set<string> | null

escape_css_selector
#

css_class_generation.ts view source

(name: string): string import {escape_css_selector} from '@fuzdev/fuz_css/css_class_generation.js';

Escapes special characters in a CSS class name for use in a selector. CSS selectors require escaping of characters like :, %, (, ), etc.

name

type string

returns

string

examples

escape_css_selector('display:flex') // 'display\\:flex' escape_css_selector('opacity:80%') // 'opacity\\:80\\%' escape_css_selector('nth-child(2n)') // 'nth-child\\(2n\\)'

extract_primary_property
#

css_class_generation.ts view source

(declaration: string): string | null import {extract_primary_property} from '@fuzdev/fuz_css/css_class_generation.js';

Extracts the CSS property name from a single-property declaration string. Returns null for multi-property declarations (composites with multiple semicolons).

declaration

type string

returns

string | null

examples

extract_primary_property('border-radius: var(--border_radius_sm);') // 'border-radius' extract_primary_property('display: flex; align-items: center;') // null

generate_classes_css
#

GenerateClassesCssOptions
#

css_class_generation.ts view source

GenerateClassesCssOptions import type {GenerateClassesCssOptions} from '@fuzdev/fuz_css/css_class_generation.js';

class_names

type Iterable<string, any, any>

class_definitions

type Record<string, CssClassDefinition | undefined>

interpreters

type CssClassDefinitionInterpreter[]

css_properties

Valid CSS properties for literal validation, or null to skip validation

type Set<string> | null

log?

type Logger

class_locations?

type Map<string, SourceLocation[] | null>

explicit_classes?

Classes that were explicitly annotated (via @fuz-classes or additional_classes). An explicit class that no definition or interpreter resolves is an error, unless is_base_style_class claims it.

type Set<string> | null

is_base_style_class?

Whether the bundled base styles target a class, so an explicit class with no utility definition still resolves - its base rules ship instead. Null when no base styles are bundled (utility-only mode or base_css: null), where such a class errors.

type ((class_name: string) => boolean) | null

GenerateClassesCssResult
#

css_class_generation.ts view source

GenerateClassesCssResult import type {GenerateClassesCssResult} from '@fuzdev/fuz_css/css_class_generation.js';

Result from CSS class generation.

css

type string

diagnostics

type GenerationDiagnostic[]

variables_used

CSS variables used by the generated classes (without -- prefix)

type Set<string>

Depends on
#

Imported by
#