api #

CSS framework and design system for semantic HTML

31 modules · 669 declarations

Modules
#

absolute_color_variables
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }[]

Absolute color variants for all hues and intensities. Non-adaptive: these don't change between light and dark color schemes.

AcornPlugin
#

ALL_MODIFIER_NAMES
#

alpha_variants
#

AlphaVariant
#

ANCESTOR_MODIFIERS
#

arrayClasses
#

BaseCssOption
#

css_plugin_options.ts view source

BaseCssOption

Type for the base_css option used by CSS generators.

Supports four forms: - undefined - Use default style.css (framework defaults) - null - Disable base styles entirely (explicit opt-out) - string - Custom CSS to replace defaults - (default_css) => string - Callback to modify default CSS

See module documentation for the undefined vs null convention.

BaseDiagnostic
#

diagnostics.ts view source

BaseDiagnostic

Base diagnostic with common fields.

level

type 'error' | 'warning'

message

type string

suggestion

type string | null

bg_00
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

bg_05
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

bg_10
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

bg_100
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

bg_20
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

bg_30
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

bg_40
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

bg_50
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

bg_60
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

bg_70
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

bg_80
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

bg_90
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

bg_95
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_color
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_color_00
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_color_05
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_color_10
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_color_100
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_color_20
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_color_30
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_color_40
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_color_50
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_color_60
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_color_70
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_color_80
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_color_90
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_color_95
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_radius_lg
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_radius_md
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_radius_sm
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_radius_variants
#

border_radius_xl
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_radius_xs
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_radius_xs2
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_radius_xs3
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_style
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_width
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_width_1
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_width_2
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_width_3
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_width_4
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_width_5
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_width_6
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_width_7
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_width_8
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_width_9
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

border_width_variants
#

BorderRadiusVariant
#

BorderWidthVariant
#

build_class_variable_index
#

class_variable_index.ts view source

(definitions: Record<string, CssClassDefinition | undefined>): CssClassVariableIndex

Builds an index of CSS variables used by each class definition.

definitions

CSS class definitions to index

type Record<string, CssClassDefinition | undefined>

returns

CssClassVariableIndex

CssClassVariableIndex with variable lookups

build_variable_graph
#

variable_graph.ts view source

(variables: { name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }[], content_hash: string): VariableDependencyGraph

Builds a dependency graph from an array of style variables.

variables

array of StyleVariable objects

type { name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }[]

content_hash

hash of the source for cache invalidation

type string

returns

VariableDependencyGraph

build_variable_graph_from_options
#

variable_graph.ts view source

(variables: VariablesOption): VariableDependencyGraph

Builds a variable dependency graph from a variables option. Handles all option forms: undefined (defaults), null (disabled), array, or callback.

variables

the variables option from generator config

type VariablesOption

returns

VariableDependencyGraph

VariableDependencyGraph built from the resolved variables

button_shadow
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

button_shadow_active
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

button_shadow_hover
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

CacheDeps
#

deps.ts view source

CacheDeps

Cache-related file system deps. Abstracted to enable test isolation from the actual filesystem.

Named CacheDeps (not FsDeps) because it only covers the specific deps needed for cache management, not general filesystem access.

read_text

Reads a text file. Returns null if file doesn't exist.

type (options: {path: string}) => Promise<string | null>

write_text_atomic

Writes a text file atomically (temp file + rename for crash safety). Creates parent directories if they don't exist.

type (options: { path: string; content: string; }) => Promise<Result<object, {message: string}>>

unlink

Removes a file. Succeeds silently if file doesn't exist.

type (options: {path: string}) => Promise<Result<object, {message: string}>>

CachedExtraction
#

css_cache.ts view source

CachedExtraction

Cached extraction result for a single file. Uses null instead of empty arrays to avoid allocation overhead.

v

Cache version - invalidates cache when bumped

type number

content_hash

SHA-256 hash of the source file contents

type string

classes

Classes as [name, locations] tuples, or null if none

type Array<[string, Array<SourceLocation>]> | null

explicit_classes

Classes from

type Array<string> | null

diagnostics

Extraction diagnostics, or null if none

type Array<ExtractionDiagnostic> | null

elements

HTML elements found in the file, or null if none

type Array<string> | null

explicit_elements

Elements from

type Array<string> | null

explicit_variables

Variables from

type Array<string> | null

check_calc_expression
#

css_literal.ts view source

(value: string): string | null

Checks if a value contains a possibly invalid calc expression.

value

the formatted CSS value

type string

returns

string | null

warning message if suspicious, null otherwise

ClassTemplateFn
#

collect_class_variables
#

class_variable_index.ts view source

(index: CssClassVariableIndex, class_names: Iterable<string>): Set<string>

Collects all variables used by a set of classes.

index

the class variable index

type CssClassVariableIndex

class_names

class names to collect variables from

type Iterable<string>

returns

Set<string>

set of all variable names used by the classes

collect_rule_variables
#

style_rule_parser.ts view source

(index: StyleRuleIndex, included_indices: Set<number>): Set<string>

Collects all CSS variables used by the included rules.

index

type StyleRuleIndex

included_indices

set of rule indices to include

type Set<number>

returns

Set<string>

set of variable names (without -- prefix)

color_a_00
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_a_05
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_a_10
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_a_100
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_a_20
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_a_30
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_a_40
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_a_50
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_a_60
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_a_70
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_a_80
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_a_90
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_a_95
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_b_00
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_b_05
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_b_10
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_b_100
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_b_20
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_b_30
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_b_40
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_b_50
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_b_60
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_b_70
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_b_80
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_b_90
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_b_95
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_c_00
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_c_05
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_c_10
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_c_100
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_c_20
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_c_30
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_c_40
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_c_50
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_c_60
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_c_70
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_c_80
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_c_90
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_c_95
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_d_00
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_d_05
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_d_10
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_d_100
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_d_20
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_d_30
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_d_40
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_d_50
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_d_60
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_d_70
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_d_80
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_d_90
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_d_95
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_e_00
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_e_05
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_e_10
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_e_100
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_e_20
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_e_30
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_e_40
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_e_50
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_e_60
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_e_70
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_e_80
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_e_90
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_e_95
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_f_00
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_f_05
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_f_10
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_f_100
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_f_20
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_f_30
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_f_40
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_f_50
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_f_60
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_f_70
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_f_80
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_f_90
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_f_95
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_g_00
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_g_05
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_g_10
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_g_100
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_g_20
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_g_30
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_g_40
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_g_50
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_g_60
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_g_70
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_g_80
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_g_90
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_g_95
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_h_00
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_h_05
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_h_10
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_h_100
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_h_20
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_h_30
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_h_40
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_h_50
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_h_60
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_h_70
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_h_80
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_h_90
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_h_95
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_i_00
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_i_05
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_i_10
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_i_100
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_i_20
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_i_30
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_i_40
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_i_50
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_i_60
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_i_70
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_i_80
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_i_90
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_i_95
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_j_00
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_j_05
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_j_10
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_j_100
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_j_20
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_j_30
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_j_40
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_j_50
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_j_60
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_j_70
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_j_80
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_j_90
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_j_95
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

color_scheme_variants
#

color_schemes
#

color_variants
#

ColorScheme
#

ColorSchemeVariant
#

ColorVariant
#

CoreReason
#

CoreStyleRule
#

create_generation_diagnostic
#

create_style_rule_index
#

CSS_CACHE_VERSION
#

css_cache.ts view source

6

CSS cache version. Bump when any of these change: - CachedExtraction schema - extract_css_classes_with_locations() logic or output - ExtractionDiagnostic or SourceLocation structure

v1: Initial version with classes and diagnostics v2: Use null instead of empty arrays, add explicit_classes, elements, css_variables v3: Add explicit_elements, explicit_variables for

css_class_composites
#

css_class_definitions
#

css_class_definitions.ts view source

Record<string, CssClassDefinition | undefined>

All built-in CSS class definitions (token classes + composites).

see also

  • ``generate_classes_css``

css_class_interpreters
#

css_class_interpreters.ts view source

CssClassDefinitionInterpreter[]

Collection of all builtin interpreters for dynamic CSS class generation. Order matters: modified_class_interpreter runs first to handle hover:box before css_literal_interpreter tries to interpret it as hover:box (property:value).

CSS_DIRECTIONS
#

css_literal_interpreter
#

css_class_interpreters.ts view source

CssClassDefinitionInterpreter

Interpreter for CSS-literal classes (e.g., display:flex, hover:opacity:80%). Generates full CSS rulesets including any modifier wrappers.

CssCacheOptions
#

css_plugin_options.ts view source

CssCacheOptions

Options for cache behavior.

cache_dir

Cache directory relative to project root.

type string

deps

Filesystem deps for cache management. Defaults to production implementation. Override for testing.

type CacheDeps

CssClassDefinition
#

CssClassDefinitionBase
#

CssClassDefinitionComposition
#

CssClassDefinitionDeclaration
#

CssClassDefinitionInterpreter
#

css_class_generation.ts view source

CssClassDefinitionInterpreter

Interpreter for dynamic CSS class generation based on pattern matching.

inheritance

pattern

type RegExp

interpret

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

CssClassDefinitionRuleset
#

CssClassDefinitionStatic
#

CssClasses
#

css_classes.ts view source

Collection of CSS classes extracted from source files. Tracks classes per-file for efficient incremental updates. Handles include/exclude filtering and explicit class tracking. Uses null instead of empty collections to avoid allocation overhead.

constructor

Creates a new CssClasses collection.

type new (additional_classes?: Set<string> | null, exclude_classes?: Set<string> | null): CssClasses

additional_classes

classes to always include (also treated as explicit for warnings)

type Set<string> | null
default null
exclude_classes

classes to exclude from output (also suppresses warnings)

type Set<string> | null
default null

add

Adds extraction results for a file. Replaces any previous classes and diagnostics for this file.

type (id: string, data: ExtractionData): void

id

file identifier

type string
data

extraction data fields to store for this file

type ExtractionData
returns void

delete

type (id: string): void

id
type string
returns void

get

Gets all unique class names as a Set (with exclude filter applied).

type (): Set<string>

returns Set<string>

get_with_locations

Gets all classes with their source locations (with exclude filter applied). Locations from additional_classes are null.

type (): Map<string, SourceLocation[] | null>

returns Map<string, SourceLocation[] | null>

get_all

Gets all classes and their locations in a single call. More efficient than calling get() and get_with_locations() separately when both are needed (avoids potential double recalculation).

Results have exclude filter applied and explicit_classes includes additional_classes.

type (): { all_classes: Set<string>; all_classes_with_locations: Map<string, SourceLocation[] | null>; explicit_classes: Set<string> | null; all_elements: Set<...>; explicit_elements: Set<...> | null; explicit_variables: Set<...> | null; }

returns { all_classes: Set<string>; all_classes_with_locations: Map<string, SourceLocation[] | null>; explicit_classes: Set<string> | null; all_elements: Set<...>; explicit_elements: Set<...> | null; explicit_variables: Set<...> | null; }

get_diagnostics

Gets all extraction diagnostics from all files.

type (): ExtractionDiagnostic[]

returns ExtractionDiagnostic[]

CssClassInterpreterContext
#

css_class_generation.ts view source

CssClassInterpreterContext

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 Array<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

CssClassOptions
#

css_plugin_options.ts view source

CssClassOptions

Options for CSS class definitions and interpretation. Controls how classes are defined and how dynamic classes are generated.

class_definitions

Additional class definitions to merge with defaults. User definitions take precedence over defaults with the same name. Required when include_default_classes is false.

type Record<string, CssClassDefinition | undefined>

include_default_classes

Whether to include default class definitions (token and composite classes). When false, class_definitions is required.

type boolean

class_interpreters

Custom interpreters for dynamic class generation. Replaces the builtin interpreters entirely if provided.

type Array<CssClassDefinitionInterpreter>

CssClassVariableIndex
#

class_variable_index.ts view source

CssClassVariableIndex

Index mapping class names to their CSS variable dependencies.

by_class

Map from class name to set of variable names (without -- prefix)

type Map<string, Set<string>>

CssDiagnosticsOptions
#

css_plugin_options.ts view source

CssDiagnosticsOptions

Options for error and warning handling.

on_error

How to handle CSS-literal errors during generation. - 'log': Log errors, skip invalid classes, continue - 'throw': Throw on first error, fail the build

type 'log' | 'throw'

on_warning

How to handle warnings during generation. - 'log': Log warnings, continue - 'throw': Throw on first warning, fail the build - 'ignore': Suppress warnings entirely

type 'log' | 'throw' | 'ignore'

CssDirection
#

CssExtractionOptions
#

css_plugin_options.ts view source

CssExtractionOptions

Options for CSS class extraction from source files. Controls which files to scan and how to parse them.

filter_file

Filter function to determine which files to extract classes from. By default, extracts from .svelte, .html, .ts, .js, .tsx, .jsx files, excluding test files and .gen files.

type FileFilter

acorn_plugins

Additional acorn plugins for parsing. Use acorn-jsx for React/Preact/Solid projects.

type Array<AcornPlugin>

CssGenerationError
#

diagnostics.ts view source

Error thrown when CSS generation encounters errors or warnings (depending on on_error and on_warning settings). Contains the full diagnostics array for programmatic access.

inheritance

extends:
  • Error

diagnostics

type Array<Diagnostic>

constructor

type new (diagnostics: Diagnostic[]): CssGenerationError

diagnostics
type Diagnostic[]

CssGeneratorBaseOptions
#

CssLiteralOutput
#

css_literal.ts view source

CssLiteralOutput

Information needed to generate CSS output for a CSS-literal class.

declaration

CSS declaration (property: value;)

type string

selector

Full CSS selector including pseudo-classes/elements

type string

media_wrapper

Media query wrapper if any

type string | null

ancestor_wrapper

Ancestor wrapper if any

type string | null

CssLiteralParseResult
#

css_literal.ts view source

CssLiteralParseResult

Result of parsing a CSS-literal class name.

Uses a discriminated union (Result type) because parsing a single class is binary: it either succeeds or fails entirely. This differs from ExtractionResult which uses embedded diagnostics because file extraction can partially succeed (some classes extracted, others have errors).

Uses | null for diagnostics to avoid allocating empty arrays. Callers should use a guard pattern: if (result.diagnostics) { ... }

CssOutputOptions
#

css_plugin_options.ts view source

CssOutputOptions

Options for CSS output generation (theme + base + utilities). Controls how the three CSS layers are combined.

base_css

Base styles (element defaults) configuration. - undefined (default): Use default style.css - null: Disable base styles entirely - string: Custom CSS to replace defaults - (default_css) => string: Callback to modify default CSS

type BaseCssOption

variables

Theme variables configuration. - undefined (default): Use default variables from fuz_css - null: Disable theme entirely - Array<StyleVariable>: Custom variable definitions (replaces defaults) - (defaults) => Array<StyleVariable>: Callback to modify default variables

type VariablesOption

theme_specificity

Specificity multiplier for theme CSS selectors. Defaults to 1 which generates :root, higher values generate more specific selectors (e.g., :root:root).

type number

additional_classes

Classes to always include in the output, regardless of detection. Useful for dynamically generated class names that can't be statically extracted.

type Iterable<string>

additional_elements

Additional HTML elements to always include base styles for. Use 'all' to include all base styles regardless of detection. Useful for elements generated at runtime via document.createElement().

type Iterable<string> | 'all'

additional_variables

Additional CSS variables to always include in theme output. Use 'all' to include all theme variables regardless of detection. Useful for variables referenced dynamically.

type Iterable<string> | 'all'

exclude_classes

Classes to exclude from the output, even if detected. Useful for filtering out false positives from extraction.

type Iterable<string>

exclude_elements

Elements to exclude from base CSS output, even if detected. Useful for filtering out elements you don't want styles for.

type Iterable<string>

exclude_variables

CSS variables to exclude from theme output, even if referenced. Useful for filtering out variables you don't want in the theme.

type Iterable<string>

CssResolutionOptions
#

css_bundled_resolution.ts view source

CssResolutionOptions

Options for CSS resolution.

style_rule_index

Index of style.css rules

type StyleRuleIndex

variable_graph

Dependency graph for theme variables

type VariableDependencyGraph

class_variable_index

Index mapping classes to variables

type CssClassVariableIndex

detected_elements

HTML elements detected in source files

type Set<string>

detected_classes

CSS classes detected in source files

type Set<string>

detected_css_variables

CSS variables directly referenced in source files

type Set<string>

utility_variables_used

CSS variables used by generated utility classes

type Set<string>

additional_elements

Additional elements to always include, or 'all' to include all base styles

type Iterable<string> | 'all'

additional_variables

Additional variables to always include, or 'all' to include all theme variables

type Iterable<string> | 'all'

theme_specificity

Specificity multiplier for theme selector (default 1)

type number

include_stats

Whether to include resolution statistics in result

type boolean

warn_unmatched_elements

Warn when detected elements have no matching style rules (default false)

type boolean

exclude_elements

Elements to exclude from base CSS output, even if detected.

type Iterable<string>

exclude_variables

CSS variables to exclude from theme output, even if referenced.

type Iterable<string>

explicit_elements

Elements explicitly annotated via

type Set<string> | null

explicit_variables

Variables explicitly annotated via

type Set<string> | null

CssResolutionResult
#

css_bundled_resolution.ts view source

CssResolutionResult

Result from CSS resolution.

theme_css

CSS for theme variables (light and dark)

type string

base_css

CSS for base styles (from style.css)

type string

resolved_variables

All resolved variable names (including transitive deps)

type Set<string>

included_rule_indices

Indices of rules included from the style index

type Set<number>

included_elements

Element names that were matched

type Set<string>

diagnostics

Diagnostics from resolution

type Array<GenerationDiagnostic>

stats

Resolution statistics (only when include_stats is true)

type CssResolutionStats

CssResolutionStats
#

css_bundled_resolution.ts view source

CssResolutionStats

Statistics from CSS resolution (only included when include_stats is true).

element_count

Number of HTML elements included

type number

elements

List of HTML element names included

type Array<string>

included_rules

Number of rules included from style.css

type number

total_rules

Total number of rules in style.css

type number

variable_count

Number of CSS variables resolved (including transitive deps)

type number

darken_00
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

darken_05
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

darken_10
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

darken_100
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

darken_20
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

darken_30
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

darken_40
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

darken_50
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

darken_60
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

darken_70
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

darken_80
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

darken_90
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

darken_95
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

darken_lighten_variants
#

DarkenLightenVariant
#

default_cache_deps
#

DEFAULT_CACHE_DIR
#

DEFAULT_THEME
#

default_themes
#

default_variables
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }[]

These are implicitly the variables for the base theme. See also the empty variables array of the base theme above.

delete_cached_extraction
#

css_cache.ts view source

(deps: CacheDeps, cache_path: string): Promise<void>

Deletes a cached extraction file. Silently succeeds if the file doesn't exist.

deps

filesystem deps for dependency injection

type CacheDeps

cache_path

absolute path to the cache file

type string

returns

Promise<void>

demo_class
#

DEMO_CLASS
#

demo_class_list
#

demo_class_lists
#

demo_class_name
#

demo_class_names
#

demo_classes
#

demoClass
#

demoClasses
#

demoClassList
#

demoClassLists
#

demoClassName
#

demoClassNames
#

Diagnostic
#

disabled_opacity
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

distance_lg
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

distance_md
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

distance_sm
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

distance_variants
#

distance_xl
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

distance_xs
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

DistanceVariant
#

duration_1
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

duration_2
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

duration_3
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

duration_4
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

duration_5
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

duration_6
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

escape_css_selector
#

css_class_generation.ts view source

(name: string): string

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_and_validate_modifiers
#

css_literal.ts view source

(segments: string[], class_name: string): ModifierExtractionResult

Extracts and validates modifiers from the beginning of a segments array. Modifiers are consumed from the front until a non-modifier segment is found.

Used by both CSS-literal parsing and modified class interpretation.

segments

array of colon-separated segments

type string[]

class_name

original class name for error messages

type string

returns

ModifierExtractionResult

ModifierExtractionResult with modifiers and remaining segments, or error

extract_balanced_parens
#

modifiers.ts view source

(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 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)

extract_css_classes
#

css_class_extractor.ts view source

(source: string, options?: ExtractCssClassesOptions): Set<string> | null

Unified extraction function that auto-detects file type. Returns just the class names as a Set.

source

the file source code

type string

options

extraction options

type ExtractCssClassesOptions
default {}

returns

Set<string> | null

set of class names, or null if none found

extract_css_classes_with_locations
#

css_class_extractor.ts view source

(source: string, options?: ExtractCssClassesOptions): ExtractionResult

Unified extraction function that auto-detects file type. Returns full extraction result with locations and diagnostics.

source

the file source code

type string

options

extraction options

type ExtractCssClassesOptions
default {}

returns

ExtractionResult

full extraction result with classes, tracked variables, and diagnostics

extract_css_comment
#

css_ruleset_parser.ts view source

(css: string, rules: ParsedRule[]): string | null

Extracts the CSS comment from a ruleset (if any). Looks for comments before the first rule.

css

raw CSS string

type string

rules

parsed rules

type ParsedRule[]

returns

string | null

comment text without delimiters, or null if no comment

extract_css_variables
#

css_variable_utils.ts view source

(css: string): Set<string>

Extracts CSS variable names from a CSS string.

Parses var(--name) patterns and returns the variable names without the -- prefix. Handles fallback values by extracting only the primary variable reference.

css

CSS string potentially containing var(--*) references

type string

returns

Set<string>

set of variable names (without -- prefix)

examples

extract_css_variables('color: var(--text_color);') // → Set { 'text_color' } extract_css_variables('background: var(--bg_1, var(--bg_2));') // → Set { 'bg_1', 'bg_2' } extract_css_variables('padding: 1rem;') // → Set {}

extract_from_svelte
#

css_class_extractor.ts view source

(source: string, file?: string): ExtractionResult

Extracts CSS classes from a Svelte file using AST parsing.

source

the Svelte file source code

type string

file

file path for location tracking

type string
default '<unknown>'

returns

ExtractionResult

extraction result with classes, tracked variables, elements, and diagnostics

extract_from_ts
#

css_class_extractor.ts view source

(source: string, file?: string, acorn_plugins?: AcornPlugin[] | undefined): ExtractionResult

Extracts CSS classes from a TypeScript/JS file using AST parsing.

source

the TS/JS file source code

type string

file

file path for location tracking

type string
default '<unknown>'

acorn_plugins?

additional acorn plugins (e.g., acorn-jsx for React)

type AcornPlugin[] | undefined
optional

returns

ExtractionResult

extraction result with classes, tracked variables, elements, and diagnostics

extract_primary_property
#

css_class_generation.ts view source

(declaration: string): string | null

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

extract_segments
#

css_literal.ts view source

(class_name: string): string[]

Extracts colon-separated segments from a class name, handling parentheses. Parenthesized content (like function arguments) is kept intact.

class_name

type string

returns

string[]

examples

extract_segments('md:hover:display:flex') // → ['md', 'hover', 'display', 'flex'] extract_segments('nth-child(2n+1):color:red') // → ['nth-child(2n+1)', 'color', 'red'] extract_segments('width:calc(100%-20px)') // → ['width', 'calc(100%-20px)']

ExtractCssClassesOptions
#

css_class_extractor.ts view source

ExtractCssClassesOptions

Options for CSS class extraction.

filename

File path used to determine extraction method (Svelte vs TS) and for location tracking in diagnostics.

type string

acorn_plugins

Additional acorn plugins to use when parsing TS/JS files. Useful for adding JSX support via acorn-jsx for React projects.

type Array<AcornPlugin>

ExtractedModifiers
#

css_literal.ts view source

ExtractedModifiers

Extracted modifiers from a class name. Used by both CSS-literal parsing and modified class interpretation.

media

Media modifier (breakpoint or feature query)

type ModifierDefinition | null

ancestor

Ancestor modifier (dark/light)

type ModifierDefinition | null

states

State modifiers in alphabetical order (can have multiple)

type Array<ModifierDefinition>

pseudo_element

Pseudo-element modifier (before, after, etc.)

type ModifierDefinition | null

ExtractionData
#

css_class_extractor.ts view source

ExtractionData

Cacheable extraction data fields shared between extraction and caching layers. Uses null instead of empty collections to avoid allocation overhead.

classes

Map from class name to locations where it was used, or null if none. Keys = unique classes, values = locations for diagnostics/IDE integration.

type Map<string, Array<SourceLocation>> | null

explicit_classes

Classes explicitly annotated via @fuz-classes comments, or null if none. These produce errors if they can't be resolved during generation.

type Set<string> | null

diagnostics

Diagnostics from the extraction phase, or null if none

type Array<ExtractionDiagnostic> | null

elements

HTML elements found in the file, or null if none. Used for including only the style.css rules needed.

type Set<string> | null

explicit_elements

Elements explicitly annotated via @fuz-elements comments, or null if none. These should produce errors if they have no matching style rules.

type Set<string> | null

explicit_variables

Variables explicitly annotated via @fuz-variables comments, or null if none. These produce errors if they can't be resolved to theme variables.

type Set<string> | null

ExtractionDiagnostic
#

ExtractionResult
#

css_class_extractor.ts view source

ExtractionResult

Extraction result with classes mapped to their source locations. Extends ExtractionData with tracked_vars which is internal to AST walking.

Uses embedded diagnostics (rather than a Result type) because file extraction can partially succeed: some classes may be extracted while others produce errors. This differs from CssLiteralParseResult which uses a discriminated union because single-class parsing is binary success/failure.

inheritance

tracked_vars

Variables that were used in class contexts, or null if none

type Set<string> | null

fg_00
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

fg_05
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

fg_10
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

fg_100
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

fg_20
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

fg_30
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

fg_40
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

fg_50
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

fg_60
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

fg_70
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

fg_80
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

fg_90
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

fg_95
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

FileFilter
#

filter_file_default
#

file_filter.ts view source

(path: string): boolean

Default file filter for CSS class extraction. Includes .svelte, .html, .ts, .js, .tsx, .jsx files. Excludes test files (.test.ts, .spec.ts) and generated files (.gen.ts). Excludes files in test directories (/test/, /tests/, /__tests__/, /__mocks__/).

path

type string

returns

boolean

find_compound_end
#

css_ruleset_parser.ts view source

(selector: string, class_pos: number): number

Finds the end position of the compound selector containing the class at class_pos. A compound selector is a sequence of simple selectors without combinators.

selector

the CSS selector string

type string

class_pos

position of the . in .class_name

type number

returns

number

position where state modifiers should be inserted (before any pseudo-element)

find_similar_variable
#

variable_graph.ts view source

(graph: VariableDependencyGraph, name: string): string | null

Finds the most similar variable in the graph to the given name. Returns null if no variable exceeds the similarity threshold.

graph

the variable dependency graph

type VariableDependencyGraph

name

the variable name to find similar matches for

type string

returns

string | null

the most similar variable name, or null if none are similar enough

font_family_mono
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

font_family_sans
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

font_family_serif
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

font_family_variants
#

font_size_lg
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

font_size_md
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

font_size_names
#

font_size_sm
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

font_size_variants
#

font_size_xl
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

font_size_xl2
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

font_size_xl3
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

font_size_xl4
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

font_size_xl5
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

font_size_xl6
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

font_size_xl7
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

font_size_xl8
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

font_size_xl9
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

font_size_xs
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

FontFamilyVariant
#

format_css_value
#

css_literal.ts view source

(value: string): string

Formats a CSS-literal value for CSS output. - Replaces ~ with space - Ensures space before !important

value

raw value from class name

type string

returns

string

formatted CSS value

format_diagnostic
#

format_dimension_value
#

css_class_generators.ts view source

(value: string): string

Format width/height values for CSS (handles 0, auto, percentages, pixels, content values, and CSS variables). Used by width and height properties.

value

type string

returns

string

format_spacing_value
#

css_class_generators.ts view source

(value: string): string

Format spacing values for CSS (handles 0, auto, percentages, pixels, and CSS variables). Used by margin, padding, gap, inset, top/right/bottom/left, etc.

value

type string

returns

string

format_variable_name
#

from_cached_extraction
#

css_cache.ts view source

(cached: CachedExtraction): ExtractionData

Converts a cached extraction back to the runtime format. Preserves null semantics (null = empty).

cached

cached extraction data

type CachedExtraction

returns

ExtractionData

fromComment
#

FUZ_CSS_BANNER
#

gen_fuz_css
#

generate_base_css
#

generate_border_radius_corners
#

css_class_generators.ts view source

(values: Iterable<string>, formatter?: ((value: string) => string) | undefined): Record<string, CssClassDefinition>

Generate border radius corner classes for all four corners. Creates classes for top-left, top-right, bottom-left, bottom-right corners.

values

the values to generate classes for

type Iterable<string>

formatter?

optional function to format values

type ((value: string) => string) | undefined
optional

returns

Record<string, CssClassDefinition>

generate_bundled_css
#

generate_classes
#

css_class_generators.ts view source

<T1 = string, T2 = string, T3 = string>(template: ClassTemplateFn<T1, T2, T3>, values: Iterable<T1>, secondary?: Iterable<T2> | undefined, tertiary?: Iterable<...> | undefined): Record<...>

Generates CSS class declarations from templates. Supports up to 3 dimensions of multiplicative combinations.

template

function that generates CSS from values, can return null to skip

type ClassTemplateFn<T1, T2, T3>

values

primary iterable of values

type Iterable<T1>

secondary?

optional second dimension (makes it multiplicative)

type Iterable<T2> | undefined
optional

tertiary?

optional third dimension for even more combinations

type Iterable<T3> | undefined
optional

returns

Record<string, CssClassDefinition>

examples

// Simple list generate_classes( v => ({ name: `position_${v}`, css: `position: ${v};` }), ['static', 'relative', 'absolute'] )
// Two dimensions (multiplicative) generate_classes( (dir, size) => ({ name: `m${dir}_${size}`, css: `margin-${dir}: ${size};` }), ['top', 'bottom'], ['0', '1px', '2px'] )

generate_classes_css
#

generate_css_literal_simple
#

css_literal.ts view source

(output: CssLiteralOutput): string

Generates simple CSS for a CSS-literal class (without grouping). Used by the interpreter for basic output.

output

the CSS-literal output info

type CssLiteralOutput

returns

string

CSS string for this class

generate_declaration
#

generate_directional_classes
#

css_class_generators.ts view source

(property: string, values: Iterable<string>, formatter?: ((v: string) => string) | undefined): Record<string, CssClassDefinition>

Generate directional classes for properties like margin and padding. Creates classes for all directions: base, top, right, bottom, left, x (horizontal), y (vertical).

property

the base CSS property name (e.g. 'margin', 'padding')

type string

values

the values to generate classes for

type Iterable<string>

formatter?

optional function to format values (defaults to identity)

type ((v: string) => string) | undefined
optional

returns

Record<string, CssClassDefinition>

generate_modified_ruleset
#

css_ruleset_parser.ts view source

(original_ruleset: string, original_class: string, new_class_escaped: string, state_css: string, pseudo_element_css: string, media_wrapper: string | null, ancestor_wrapper: string | null): ModifiedRulesetResult

Generates CSS for a modified ruleset with applied modifiers.

Conflict handling is per-selector within selector lists: - For .plain:hover, .plain:active with hover: modifier, only .plain:hover skips the :hover addition; .plain:active still gets :hover appended. - For multiple states like :hover:focus, each is checked individually; conflicting states are skipped while non-conflicting ones are still applied.

original_ruleset

the original CSS ruleset string

type string

original_class

the base class name

type string

new_class_escaped

the escaped new class name with modifiers

type string

state_css

state modifier CSS (e.g., ":hover" or ":hover:focus")

type string

pseudo_element_css

pseudo-element modifier CSS (e.g., "::before")

type string

media_wrapper

media query wrapper (e.g., "@media (width >= 48rem)")

type string | null

ancestor_wrapper

ancestor wrapper (e.g., ":root.dark")

type string | null

returns

ModifiedRulesetResult

result with generated CSS and information about skipped modifiers

generate_property_classes
#

css_class_generators.ts view source

(property: string, values: Iterable<string>, formatter?: ((value: string) => string) | undefined, prefix?: string): Record<string, CssClassDefinition>

Generate classes for a single CSS property with various values.

property

the CSS property name (e.g. 'font-size', 'gap')

type string

values

the values to generate classes for

type Iterable<string>

formatter?

optional function to format values (e.g. v => var(--space_${v}))

type ((value: string) => string) | undefined
optional

prefix

optional class name prefix (defaults to property with dashes replaced by underscores)

type string
default format_variable_name(property)

returns

Record<string, CssClassDefinition>

generate_selector
#

css_literal.ts view source

(escaped_class_name: string, parsed: ParsedCssLiteral): string

Generates the CSS selector for a parsed CSS-literal class. Includes state pseudo-classes and pseudo-element in the selector.

escaped_class_name

type string

parsed

type ParsedCssLiteral

returns

string

generate_shadow_classes
#

css_class_generators.ts view source

(sizes: Iterable<string>, alpha_mapping: Record<string, string>): Record<string, CssClassDefinition>

Generate shadow classes for various shadow types and sizes. Creates classes for regular, top, bottom, inset, inset-top, and inset-bottom shadows. Each shadow uses color-mix with alpha values for transparency.

sizes

the shadow size variants (xs, sm, md, lg, xl)

type Iterable<string>

alpha_mapping

mapping of sizes to alpha numbers (1-5)

type Record<string, string>

returns

Record<string, CssClassDefinition>

generate_theme_css
#

variable_graph.ts view source

(graph: VariableDependencyGraph, resolved_variables: Set<string>, specificity?: number): { light_css: string; dark_css: string; }

Generates theme CSS for the resolved variables.

graph

the variable dependency graph

type VariableDependencyGraph

resolved_variables

set of variable names to include

type Set<string>

specificity

number of times to repeat the selector (default 1)

type number
default 1

returns

{ light_css: string; dark_css: string; }

object with light_css and dark_css strings

GenerateBundledCssOptions
#

css_bundled_resolution.ts view source

GenerateBundledCssOptions

Options for bundled CSS output generation.

include_theme

Include theme variables section.

type boolean

include_base

Include base styles section.

type boolean

include_utilities

Include utility classes section.

type boolean

GenerateClassesCssOptions
#

css_class_generation.ts view source

GenerateClassesCssOptions

class_names

type Iterable<string>

class_definitions

type Record<string, CssClassDefinition | undefined>

interpreters

type Array<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, Array<SourceLocation> | null>

explicit_classes

Classes that were explicitly annotated (via

type Set<string> | null

GenerateClassesCssResult
#

css_class_generation.ts view source

GenerateClassesCssResult

Result from CSS class generation.

css

type string

diagnostics

type Array<GenerationDiagnostic>

variables_used

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

type Set<string>

GeneratedClassResult
#

GenerationDiagnostic
#

diagnostics.ts view source

GenerationDiagnostic

Diagnostic from the generation phase.

phase

type 'generation'

level

type 'error' | 'warning'

message

type string

suggestion

type string | null

identifier

The class name, element name, or variable name this diagnostic refers to

type string

locations

Source locations where this class was used, or null if from additional_classes

type Array<SourceLocation> | null

GenFuzCssOptions
#

gen_fuz_css.ts view source

GenFuzCssOptions

Options for the Gro CSS generator. Extends the shared base options with Gro-specific settings.

inheritance

include_stats

Whether to include file and resolution statistics in the output.

type boolean

project_root

Project root directory. Source paths must be under this directory.

type string

concurrency

Max concurrent file processing (cache read + extract). Bottlenecked by CPU-bound AST parsing.

type number

cache_io_concurrency

Max concurrent cache writes and deletes (I/O-bound).

type number

get_all_modifier_names
#

get_all_variable_names
#

get_cache_path
#

css_cache.ts view source

(source_path: string, cache_dir: string, project_root: string): string

Computes the cache file path for a source file. Cache structure mirrors source tree: src/lib/Foo.svelte → .fuz/cache/css/src/lib/Foo.svelte.json

source_path

absolute path to the source file

type string

cache_dir

absolute path to the cache directory

type string

project_root

normalized project root (must end with /)

type string

returns

string

get_class_variables
#

class_variable_index.ts view source

(index: CssClassVariableIndex, class_name: string): Set<string> | null

Gets variables used by a specific class.

index

the class variable index

type CssClassVariableIndex

class_name

name of the class to lookup

type string

returns

Set<string> | null

set of variable names (without -- prefix), or null if class not found

get_classes_using_variable
#

class_variable_index.ts view source

(index: CssClassVariableIndex, variable_name: string): string[]

Gets all class names that use a specific variable.

index

the class variable index

type CssClassVariableIndex

variable_name

variable name to search for (without -- prefix)

type string

returns

string[]

array of class names that use this variable

get_file_cache_path
#

css_cache.ts view source

(file_id: string, cache_dir: string, project_root: string): string

Computes cache path for a file, handling both internal and external paths. Internal files use relative paths mirroring source tree. External files (outside project root) use hashed absolute paths in _external/.

file_id

absolute path to the source file

type string

cache_dir

absolute path to the cache directory

type string

project_root

normalized project root (must end with /)

type string

returns

string

get_matching_rules
#

style_rule_parser.ts view source

(index: StyleRuleIndex, detected_elements: Set<string>, detected_classes: Set<string>): Set<number>

Gets rules that should be included based on detected elements and classes.

index

the StyleRuleIndex to query

type StyleRuleIndex

detected_elements

set of HTML element names found in source

type Set<string>

detected_classes

set of CSS class names found in source

type Set<string>

returns

Set<number>

set of rule indices to include

get_modifier
#

modifiers.ts view source

(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 string

returns

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

the modifier definition or null if not a known modifier

has_css_variables
#

css_variable_utils.ts view source

(css: string): boolean

Checks if a CSS string contains any CSS variable references.

More efficient than extract_css_variables when you only need to know if variables exist, not what they are.

css

CSS string to check

type string

returns

boolean

true if the string contains var(--*) patterns

has_extracted_modifiers
#

css_literal.ts view source

(modifiers: ExtractedModifiers): boolean

Checks if extracted modifiers contain any modifier. Useful for tooling that needs to detect modified classes.

modifiers

type ExtractedModifiers

returns

boolean

has_extraction_data
#

has_modifiers
#

has_variable
#

variable_graph.ts view source

(graph: VariableDependencyGraph, name: string): boolean

Checks if a variable exists in the graph.

graph

the variable dependency graph

type VariableDependencyGraph

name

variable name to check (without -- prefix)

type string

returns

boolean

true if the variable exists in the graph

hue_a
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

hue_b
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

hue_c
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

hue_d
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

hue_e
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

hue_f
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

hue_g
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

hue_h
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

hue_i
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

hue_j
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

icon_size_lg
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

icon_size_md
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

icon_size_sm
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

icon_size_variants
#

icon_size_xl
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

icon_size_xl2
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

icon_size_xl3
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

icon_size_xs
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

icon_sizes
#

variable_data.ts view source

{ icon_size_xs: string; icon_size_sm: string; icon_size_md: string; icon_size_lg: string; icon_size_xl: string; icon_size_xl2: string; icon_size_xl3: string; }

IconSizeVariant
#

input_fill
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

input_height
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

input_height_inner
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

input_height_sm
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

input_padding_x
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

input_padding_y
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

input_width_min
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

intensity_variants
#

IntensityVariant
#

interpret_css_literal
#

css_literal.ts view source

(class_name: string, escaped_class_name: string, css_properties: Set<string> | null): InterpretCssLiteralResult

Interprets a CSS-literal class and returns CSS generation info.

Callers should first check is_possible_css_literal() to filter non-CSS-literal classes.

class_name

the class name to interpret

type string

escaped_class_name

the CSS-escaped version of the class name

type string

css_properties

set of valid CSS properties from load_css_properties(). Pass null to skip property validation.

type Set<string> | null

returns

InterpretCssLiteralResult

result with output and warnings on success, or error on failure

InterpretCssLiteralResult
#

css_literal.ts view source

InterpretCssLiteralResult

Result of interpreting a CSS-literal class.

Uses | null for warnings to avoid allocating empty arrays. Callers should use a guard pattern: if (result.warnings) { ... }

InterpreterDiagnostic
#

diagnostics.ts view source

InterpreterDiagnostic

Diagnostic from CSS class interpretation. Used internally by interpreters; converted to GenerationDiagnostic with locations.

level

type 'error' | 'warning'

message

type string

identifier

The class name, element name, or variable name this diagnostic refers to

type string

suggestion

type string | null

is_possible_css_literal
#

css_literal.ts view source

(class_name: string): boolean

Checks if a class name could be a CSS-literal class. Quick check before attempting full parse.

class_name

the class name to check

type string

returns

boolean

true if it could be CSS-literal syntax

is_single_selector_ruleset
#

css_ruleset_parser.ts view source

(rules: ParsedRule[], escaped_class_name: string): boolean

Checks if a ruleset has only a single simple selector (just the class name). Used to detect rulesets that could be converted to declaration format.

rules

parsed rules from the ruleset

type ParsedRule[]

escaped_class_name

the CSS-escaped class name (e.g., "box" or "hover\\:card")

type string

returns

boolean

true if there's exactly one rule with selector ".class_name"

is_valid_css_property
#

css_literal.ts view source

(property: string, properties: Set<string> | null): boolean

Checks if a property name is a valid CSS property. Custom properties (--*) always return true.

property

the CSS property name to validate

type string

properties

set of valid CSS properties from load_css_properties(). Pass null to skip validation.

type Set<string> | null

returns

boolean

true if valid CSS property or custom property

lighten_00
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

lighten_05
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

lighten_10
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

lighten_100
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

lighten_20
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

lighten_30
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

lighten_40
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

lighten_50
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

lighten_60
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

lighten_70
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

lighten_80
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

lighten_90
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

lighten_95
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

line_height_lg
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

line_height_md
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

line_height_names
#

line_height_sm
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

line_height_variants
#

line_height_xl
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

line_height_xs
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

LineHeightVariant
#

link_color
#

link_color_selected
#

LiteralResolutionResult
#

load_cached_extraction
#

css_cache.ts view source

(deps: CacheDeps, cache_path: string): Promise<CachedExtraction | null>

Loads a cached extraction result from disk. Returns null if the cache is missing, corrupted, or has a version mismatch. This makes the cache self-healing: any error triggers re-extraction.

deps

filesystem deps for dependency injection

type CacheDeps

cache_path

absolute path to the cache file

type string

returns

Promise<CachedExtraction | null>

load_css_properties
#

css_literal.ts view source

(): Promise<Set<string>>

Loads CSS properties from @webref/css. Returns a fresh Set each time - callers should cache the result if needed.

returns

Promise<Set<string>>

load_default_style_css
#

style_rule_parser.ts view source

(deps: CacheDeps, style_css_path?: string | undefined): Promise<string>

Loads the raw default style.css content.

deps

filesystem deps for dependency injection

type CacheDeps

style_css_path?

path to style.css (defaults to package's style.css)

type string | undefined
optional

returns

Promise<string>

promise resolving to the CSS string

load_style_rule_index
#

style_rule_parser.ts view source

(deps: CacheDeps, style_css_path?: string | undefined): Promise<StyleRuleIndex>

Loads and parses the default style.css file.

deps

filesystem deps for dependency injection

type CacheDeps

style_css_path?

path to style.css (defaults to package's style.css)

type string | undefined
optional

returns

Promise<StyleRuleIndex>

promise resolving to StyleRuleIndex

logicalClass
#

MEDIA_MODIFIERS
#

merge_class_definitions
#

css_class_definitions.ts view source

(user_definitions: Record<string, CssClassDefinition | undefined> | undefined, include_defaults: boolean): Record<string, CssClassDefinition | undefined>

Merges user class definitions with the built-in defaults. User definitions take precedence over defaults with the same name.

user_definitions

user-provided class definitions to merge

type Record<string, CssClassDefinition | undefined> | undefined

include_defaults

whether to include built-in definitions

type boolean

returns

Record<string, CssClassDefinition | undefined>

merged class definitions

throws

  • Error - if `include_defaults` is false and no user definitions provided

modified_class_interpreter
#

css_class_interpreters.ts view source

CssClassDefinitionInterpreter

Interpreter for modified token/composite classes (e.g., hover:p_md, md:box, dark:hover:panel). Applies modifiers to existing declaration-based or ruleset-based classes.

This interpreter must run BEFORE css_literal_interpreter to handle cases like hover:box where box is a known class (not a CSS property).

ModifiedRulesetResult
#

css_ruleset_parser.ts view source

ModifiedRulesetResult

Result from generating a modified ruleset.

Uses | null for skipped_modifiers to avoid allocating empty arrays. Callers should use a guard pattern: if (result.skipped_modifiers) { ... }

css

The generated CSS

type string

skipped_modifiers

Information about modifiers that were skipped for certain rules, or null if none

type Array<SkippedModifierInfo> | null

ModifiedSelectorGroupResult
#

css_ruleset_parser.ts view source

ModifiedSelectorGroupResult

Result from modifying a selector group with conflict detection.

Uses | null for skipped_modifiers to avoid allocating empty arrays. Callers should use a guard pattern: if (result.skipped_modifiers) { ... }

selector

The modified selector list as a string

type string

skipped_modifiers

Information about modifiers skipped for specific selectors, or null if none

type Array<SkippedModifierInfo> | null

ModifierDefinition
#

modifiers.ts view source

ModifierDefinition

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

ModifierExtractionResult
#

MODIFIERS
#

modifiers.ts view source

ModifierDefinition[]

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 of modifier determining its position in the class name and CSS output.

Order in class names: [media:][ancestor:][state...:][pseudo-element:]property:value

modify_selector_group
#

css_ruleset_parser.ts view source

(selector_group: string, original_class: string, new_class_escaped: string, states_to_add: string[], pseudo_element_css: string): ModifiedSelectorGroupResult

Modifies a selector list (comma-separated selectors) to add modifiers. Handles conflicts per-selector: if one selector in a list has a conflict, only that selector skips the modifier; other selectors still get it.

selector_group

CSS selector list (may contain commas)

type string

original_class

the base class name

type string

new_class_escaped

the escaped new class name

type string

states_to_add

individual state modifiers (e.g., [":hover", ":focus"])

type string[]

pseudo_element_css

pseudo-element modifier CSS to insert (e.g., "::before")

type string

returns

ModifiedSelectorGroupResult

result with modified selector list and information about skipped modifiers

modify_single_selector
#

css_ruleset_parser.ts view source

(selector: string, original_class: string, new_class_escaped: string, state_css: string, pseudo_element_css: string): string

Modifies a single CSS selector to add modifiers.

selector

a single CSS selector (not a selector list)

type string

original_class

the base class name (e.g., "menu_item")

type string

new_class_escaped

the escaped new class name (e.g., "hover\\:menu_item")

type string

state_css

state modifier CSS to insert (e.g., ":hover")

type string

pseudo_element_css

pseudo-element modifier CSS to insert (e.g., "::before")

type string

returns

string

modified selector

examples

modify_single_selector('.menu_item', 'menu_item', 'hover\\:menu_item', ':hover', '') // → '.hover\\:menu_item:hover' modify_single_selector('.menu_item .icon', 'menu_item', 'hover\\:menu_item', ':hover', '') // → '.hover\\:menu_item:hover .icon' modify_single_selector('.menu_item.selected', 'menu_item', 'hover\\:menu_item', ':hover', '') // → '.hover\\:menu_item.selected:hover'

NonCoreStyleRule
#

NTH_CHILD_PATTERN
#

NTH_LAST_CHILD_PATTERN
#

NTH_LAST_OF_TYPE_PATTERN
#

NTH_OF_TYPE_PATTERN
#

numeric_scale_variants
#

numeric_scale_with_extremes
#

NumericScaleVariant
#

variable_data.ts view source

"00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100"

The standard numeric scale used across multiple variable families. Provides 13 steps from 00 (surface/subtle) to 100 (contrast/bold).

NumericScaleWithExtremesVariant
#

variable_data.ts view source

"00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100" | "min" | "max"

Numeric scale with min/max extremes for scales that need untinted endpoints. Used by text and shade scales where min/max represent pure black/white values.

objectClasses
#

outline_color
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

outline_style
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

outline_width
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

outline_width_active
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

outline_width_focus
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

outline_width_variants
#

OutlineWidthVariant
#

parse_arbitrary_breakpoint
#

modifiers.ts view source

(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 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_css_literal
#

css_literal.ts view source

(class_name: string, css_properties: Set<string> | null): CssLiteralParseResult

Parses a CSS-literal class name into its components.

class_name

the class name to parse

type string

css_properties

set of valid CSS properties from load_css_properties(). Pass null to skip property validation.

type Set<string> | null

returns

CssLiteralParseResult

CssLiteralParseResult with parsed data or error

parse_parameterized_state
#

modifiers.ts view source

(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 string

returns

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

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

parse_ruleset
#

css_ruleset_parser.ts view source

(css: string): ParsedRuleset

Parses a CSS ruleset string using Svelte's CSS parser.

css

raw CSS string (e.g., ".box { display: flex; }")

type string

returns

ParsedRuleset

ParsedRuleset with structured rule data and positions

parse_style_css
#

style_rule_parser.ts view source

(css: string, content_hash: string): StyleRuleIndex

Parses a CSS stylesheet into a StyleRuleIndex.

css

raw CSS string (e.g., contents of style.css)

type string

content_hash

hash of the CSS for cache invalidation

type string

returns

StyleRuleIndex

StyleRuleIndex with rules and lookup maps

ParsedCssLiteral
#

css_literal.ts view source

ParsedCssLiteral

Parsed CSS-literal class with all components extracted.

class_name

Original class name

type string

media

Media modifier (breakpoint or feature query)

type ModifierDefinition | null

ancestor

Ancestor modifier (dark/light)

type ModifierDefinition | null

states

State modifiers in alphabetical order (can have multiple)

type Array<ModifierDefinition>

pseudo_element

Pseudo-element modifier (before, after, etc.)

type ModifierDefinition | null

property

CSS property name

type string

value

CSS value (with ~ replaced by spaces)

type string

ParsedRule
#

css_ruleset_parser.ts view source

ParsedRule

A parsed CSS rule with its components and positions.

selector

Full selector string (e.g., ".box", ".selectable:hover")

type string

selector_start

Start position of selector in original CSS (0-indexed)

type number

selector_end

End position of selector in original CSS

type number

declarations

The declarations block (without braces)

type string

rule_start

Start position of the entire rule

type number

rule_end

End position of the entire rule

type number

ParsedRuleset
#

PSEUDO_ELEMENT_MODIFIERS
#

render_theme_style
#

render_theme_variable
#

theme.ts view source

(variable: { name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }, dark?: boolean, comments?: boolean): string

variable

type { name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

dark

type boolean
default false

comments

type boolean
default true

returns

string

RenderThemeStyleOptions
#

theme.ts view source

RenderThemeStyleOptions

comments

type boolean

id

type string | null

empty_default_theme

type boolean

specificity

Repeats the theme selector to handle unpredictable head content insertion order. Accepts any integer >= 1, defaults to 2.

type number

resolve_base_css_option
#

style_rule_parser.ts view source

(base_css: BaseCssOption, deps: CacheDeps): Promise<StyleRuleIndex | null>

Resolves a base_css option to a StyleRuleIndex. Handles all option forms: undefined (defaults), null (disabled), string, or callback.

base_css

the base_css option from generator config

type BaseCssOption

deps

filesystem deps for loading default CSS

type CacheDeps

returns

Promise<StyleRuleIndex | null>

promise resolving to StyleRuleIndex, or null if disabled

resolve_class_definition
#

css_class_resolution.ts view source

(def: CssClassDefinitionStatic, class_name: string, definitions: Record<string, CssClassDefinition | undefined>, css_properties?: Set<...> | null): ResolveComposesResult

Resolves a class definition's declaration, handling composes composition.

If the definition has a composes property, resolves those classes recursively and combines with any explicit declaration. If no composes, returns the explicit declaration directly.

def

the class definition to resolve

type CssClassDefinitionStatic

class_name

the name of the class being resolved (for error messages)

type string

definitions

record of all known class definitions

type Record<string, CssClassDefinition | undefined>

css_properties

set of valid CSS properties for literal validation, or null to skip

type Set<string> | null
default null

returns

ResolveComposesResult

combined declaration or an error

resolve_composes
#

css_class_resolution.ts view source

(class_names: string[], definitions: Record<string, CssClassDefinition | undefined>, resolution_stack: Set<string>, visited: Set<string>, original_class_name: string, css_properties?: Set<...> | null): ResolveComposesResult

Resolves an array of class names to their combined CSS declarations.

Recursively resolves nested composes arrays and combines all declarations. Validates that referenced classes exist and are resolvable (not rulesets or interpreters). Supports unmodified CSS literals (e.g., text-align:center) in the composes array.

Deduplication behavior: - Diamond dependencies (class reached via different composition branches) are silently skipped - Redundant listings (class already included by an earlier sibling in this array) emit a warning

class_names

array of class names to resolve

type string[]

definitions

record of all known class definitions

type Record<string, CssClassDefinition | undefined>

resolution_stack

set of class names currently being resolved (for cycle detection)

type Set<string>

visited

set of all class names already resolved (for deduplication)

type Set<string>

original_class_name

the class name being defined (for error messages)

type string

css_properties

set of valid CSS properties for literal validation, or null to skip

type Set<string> | null
default null

returns

ResolveComposesResult

combined declarations or an error

resolve_css
#

css_bundled_resolution.ts view source

(options: CssResolutionOptions): CssResolutionResult

Resolves which CSS to include based on detected usage.

Algorithm: 1. Collect rules: core rules + element-matching + class-matching 2. Collect variables: from rules, class defs, utility generation, detected vars, additional_variables 3. Resolve transitive variable dependencies 4. Generate output: theme_css (light+dark), base_css (source order)

options

resolution options including indexes, detected usage, and config

type CssResolutionOptions

returns

CssResolutionResult

resolution result with theme CSS, base CSS, and diagnostics

resolve_variables_option
#

variable_graph.ts view source

(variables: VariablesOption): { name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }[]

Resolves a variables option to a concrete array of style variables.

variables

the variables option (undefined, null, array, or callback)

type VariablesOption

returns

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }[]

resolved array of style variables, or empty array if null

resolve_variables_transitive
#

variable_graph.ts view source

(graph: VariableDependencyGraph, initial_variables: Iterable<string>): ResolveVariablesResult

Resolves variables transitively using DFS with cycle detection. When a variable is requested, all variables it depends on are included. Both light and dark dependencies are always resolved together.

graph

the variable dependency graph

type VariableDependencyGraph

initial_variables

initial set of variable names to resolve

type Iterable<string>

returns

ResolveVariablesResult

ResolveVariablesResult with all transitive dependencies

ResolveComposesResult
#

ResolveVariablesResult
#

variable_graph.ts view source

ResolveVariablesResult

Result from transitive variable resolution.

variables

All resolved variable names

type Set<string>

warnings

Warning messages for cycles

type Array<string>

missing

Variable names that were requested but not found in the graph

type Set<string>

ruleset_contains_class
#

css_ruleset_parser.ts view source

(rules: ParsedRule[], escaped_class_name: string): boolean

Checks if any selector in the ruleset contains the expected class name. Used to validate that ruleset definitions match their key.

rules

parsed rules from the ruleset

type ParsedRule[]

escaped_class_name

the CSS-escaped class name (e.g., "clickable" or "hover\\:card")

type string

returns

boolean

true if at least one selector contains ".class_name"

save_cached_extraction
#

css_cache.ts view source

(deps: CacheDeps, cache_path: string, content_hash: string, extraction: ExtractionData): Promise<void>

Saves an extraction result to the cache. Uses atomic write (temp file + rename) for crash safety. Normalizes empty collections to null to avoid allocation overhead on load.

deps

filesystem deps for dependency injection

type CacheDeps

cache_path

absolute path to the cache file

type string

content_hash

SHA-256 hash of the source file contents

type string

extraction

extraction data to cache

type ExtractionData

returns

Promise<void>

shade_00
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_00_dark
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_00_light
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_05
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_05_dark
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_05_light
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_10
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_10_dark
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_10_light
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_100
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_100_dark
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_100_light
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_20
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_20_dark
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_20_light
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_30
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_30_dark
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_30_light
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_40
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_40_dark
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_40_light
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_50
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_50_dark
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_50_light
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_60
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_60_dark
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_60_light
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_70
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_70_dark
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_70_light
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_80
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_80_dark
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_80_light
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_90
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_90_dark
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_90_light
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_95
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_95_dark
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_95_light
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_max
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_min
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shade_scale_variants
#

shade_variants
#

ShadeScaleVariant
#

variable_data.ts view source

"00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100" | "min" | "max"

Full shade scale including min/max extremes for untinted surfaces.

ShadeVariant
#

shadow_alpha_00
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_alpha_05
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_alpha_10
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_alpha_100
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_alpha_20
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_alpha_30
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_alpha_40
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_alpha_50
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_alpha_60
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_alpha_70
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_alpha_80
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_alpha_90
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_alpha_95
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_alpha_variants
#

shadow_bottom_lg
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_bottom_md
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_bottom_sm
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_bottom_xl
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_bottom_xs
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_color_glow
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_color_highlight
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_color_shroud
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_color_umbra
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_inset_bottom_lg
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_inset_bottom_md
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_inset_bottom_sm
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_inset_bottom_xl
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_inset_bottom_xs
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_inset_lg
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_inset_md
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_inset_sm
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_inset_top_lg
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_inset_top_md
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_inset_top_sm
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_inset_top_xl
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_inset_top_xs
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_inset_xl
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_inset_xs
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_lg
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_md
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_semantic_values
#

shadow_size_variants
#

shadow_sm
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_top_lg
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_top_md
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_top_sm
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_top_xl
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_top_xs
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_variant_prefixes
#

variable_data.ts view source

readonly ["shadow_", "shadow_top_", "shadow_bottom_", "shadow_inset_", "shadow_inset_top_", "shadow_inset_bottom_"]

shadow_xl
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

shadow_xs
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

ShadowAlphaVariant
#

ShadowSemanticValue
#

ShadowSizeVariant
#

SizeVariant
#

SkippedModifierInfo
#

css_ruleset_parser.ts view source

SkippedModifierInfo

Information about a modifier that was skipped for a selector during ruleset modification. The selector is still included in output, just without the conflicting modifier applied.

selector

The specific selector where the modifier was skipped (not the full selector list)

type string

reason

Reason the modifier was skipped

type 'pseudo_element_conflict' | 'state_conflict'

conflicting_modifier

The conflicting modifier that was not applied (e.g., "::before" or ":hover")

type string

SourceIndex
#

css_class_extractor.ts view source

Helper class for converting character offsets to line/column positions. Svelte template nodes (Comment, Text, ExpressionTag) only have char offsets, so this class enables efficient conversion.

Build: O(n) where n = source length Lookup: O(log m) where m = number of lines (binary search)

line_starts

type Array<number>

private

constructor

type new (source: string): SourceIndex

source
type string

get_location

Converts a character offset to a source location.

type (offset: number, file: string): SourceLocation

offset

0-based character offset in the source

type number
file

file path for the location

type string
returns SourceLocation

SourceLocation with 1-based line and column

SourceLocation
#

diagnostics.ts view source

SourceLocation

Source location for IDE/LSP integration.

file

type string

line

1-based line number

type number

column

1-based column number

type number

space_lg
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_md
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_sm
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_variants
#

variable_data.ts view source

readonly ["xs5", "xs4", "xs3", "xs2", "xs", "sm", "md", "lg", "xl", "xl2", "xl3", "xl4", "xl5", "xl6", "xl7", "xl8", "xl9", "xl10", "xl11", "xl12", "xl13", "xl14", "xl15"]

space_xl
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_xl10
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_xl11
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_xl12
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_xl13
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_xl14
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_xl15
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_xl2
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_xl3
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_xl4
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_xl5
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_xl6
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_xl7
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_xl8
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_xl9
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_xs
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_xs2
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_xs3
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_xs4
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

space_xs5
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

SpaceVariant
#

variable_data.ts view source

"xs" | "sm" | "md" | "lg" | "xl" | "xl2" | "xl3" | "xl4" | "xl5" | "xl6" | "xl7" | "xl8" | "xl9" | "xs5" | "xs4" | "xs3" | "xs2" | "xl10" | "xl11" | "xl12" | "xl13" | "xl14" | "xl15"

split_selector_list
#

css_ruleset_parser.ts view source

(selector_group: string): string[]

Splits a selector list by commas, respecting parentheses, brackets, and quoted strings.

selector_group

type string

returns

string[]

examples

split_selector_list('.a, .b') // → ['.a', '.b'] split_selector_list('.a:not(.b), .c') // → ['.a:not(.b)', '.c'] split_selector_list('.a[data-x="a,b"], .c') // → ['.a[data-x="a,b"]', '.c']

STATE_MODIFIERS
#

STYLE_VARIABLE_NAME_MATCHER
#

StyleRule
#

StyleRuleBase
#

style_rule_parser.ts view source

StyleRuleBase

Base fields shared by all style rules.

css

The full CSS text for this rule (including selector and declarations)

type string

elements

HTML element names this rule targets (e.g., 'button', 'input')

type Set<string>

classes

CSS class names this rule targets (e.g., 'unstyled', 'selected')

type Set<string>

variables_used

CSS variables referenced in declarations

type Set<string>

order

Original order in style.css (for preserving cascade)

type number

StyleRuleIndex
#

style_rule_parser.ts view source

StyleRuleIndex

Index of parsed style rules for efficient lookup.

rules

All rules in original order

type Array<StyleRule>

by_element

Rules indexed by element name

type Map<string, Array<number>>

by_class

Rules indexed by class name

type Map<string, Array<number>>

content_hash

Content hash for cache invalidation

type string

StyleVariable
#

variable.ts view source

ZodObject<{ name: ZodString; light: ZodOptional<ZodString>; dark: ZodOptional<ZodString>; summary: ZodOptional<ZodString>; }, $strip>

Zod schema for validating StyleVariable objects. Use safeParse for validation; the StyleVariable type is defined separately to preserve the Flavored brand on name.

StyleVariableInfo
#

variable_graph.ts view source

StyleVariableInfo

Information about a single style variable and its dependencies.

name

Variable name (without -- prefix)

type string

light_deps

Variables referenced in the light value

type Set<string>

dark_deps

Variables referenced in the dark value

type Set<string>

light_css

The CSS value for light mode, or undefined if not defined

type string | undefined

dark_css

The CSS value for dark mode, or undefined if not defined

type string | undefined

StyleVariableName
#

suggest_css_property
#

css_literal.ts view source

(typo: string, properties: Set<string> | null): string | null

Suggests a correct property name for a typo using Levenshtein distance.

typo

the mistyped property name

type string

properties

set of valid CSS properties from load_css_properties(). Pass null to skip suggestions.

type Set<string> | null

returns

string | null

the suggested property or null if no close match (Levenshtein distance > 2)

suggest_modifier
#

css_literal.ts view source

(typo: string): string | null

Suggests a correct modifier name for a typo using Levenshtein distance.

typo

the mistyped modifier name

type string

returns

string | null

the suggested modifier or null if no close match (Levenshtein distance > 2)

ternaryClass
#

text_00
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_05
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_10
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_100
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_20
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_30
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_40
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_50
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_60
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_70
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_80
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_90
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_95
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_color
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_decoration
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_decoration_hover
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_decoration_selected
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_disabled
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_max
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_min
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

text_scale_variants
#

text_variants
#

TextScaleVariant
#

variable_data.ts view source

"00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100" | "min" | "max"

Full text scale including min/max extremes for knockout text.

TextVariant
#

Theme
#

tint_hue
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

tint_saturation
#

variables.ts view source

{ name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }

try_resolve_literal
#

css_literal.ts view source

(class_name: string, css_properties: Set<string> | null, context_class_name: string): LiteralResolutionResult

Attempts to resolve a class name as an unmodified CSS literal for composition.

Used by resolve_composes to support literals in composes arrays. Returns the declaration if successful, null if not a literal, or an error if it's a literal with issues (modifiers, invalid property, etc.).

class_name

the class name to try resolving

type string

css_properties

set of valid CSS properties, or null to skip validation

type Set<string> | null

context_class_name

the class being defined (for error messages)

type string

returns

LiteralResolutionResult

resolution result with declaration, or error, or null if not a literal

VariableDependencyGraph
#

variable_graph.ts view source

VariableDependencyGraph

Dependency graph for style variables.

variables

Map from variable name to its info

type Map<string, StyleVariableInfo>

content_hash

Content hash for cache invalidation

type string

VariablesOption
#

css_plugin_options.ts view source

VariablesOption

Type for the variables option used by CSS generators.

Supports four forms: - undefined - Use default variables (framework defaults) - null - Disable theme generation entirely (explicit opt-out) - Array<StyleVariable> - Custom variables array (replaces defaults) - (defaults) => Array<StyleVariable> - Callback to modify defaults

See module documentation for the undefined vs null convention.

vite_plugin_fuz_css
#

vite_plugin_fuz_css.ts view source

(options?: VitePluginFuzCssOptions): Plugin$1<any>

Creates the fuz_css Vite plugin.

Extracts CSS classes from source files during Vite's transform phase and generates optimized CSS via the virtual:fuz.css virtual module.

options

type VitePluginFuzCssOptions
default {}

returns

Plugin$1<any>

VitePluginFuzCssOptions
#

Z_INDEX_MAX
#