variable_graph.ts

Variable dependency graph for bundled CSS generation.

Builds a dependency graph from style variables to enable transitive resolution of CSS custom properties. When a variable is needed, all variables it depends on are also included.

view source

Declarations
#

10 declarations

apply_theme_variables
#

variable_graph.ts view source

(variables: { name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }[], theme: { name: string; variables: { name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }[]; summary?: string | undefined; scheme?: "dark" | ... 2 more ... | undefined; scheme_mirror?: { ...; }[] | undefined; } | null | undefined): { ...; }[] import {apply_theme_variables} from '@fuzdev/fuz_css/variable_graph.js';

Overlays a theme's variables onto a resolved variable set, last-wins by name.

This is how a theme is baked in at build time: the overlaid values flow through the dependency graph like any other, so the variables a theme references are pulled in transitively and the output stays tree-shaken. A stanced theme's scheme_mirror applies first, matching the renderer's order

  • and a stanced theme arriving without its mirror computed is resolved

through resolve_theme_stance here, so a hand-rolled theme bakes the same as the shipped exemplars (build time has no bundle-weight concern). A theme slot the stylesheet can't hold is dropped before it overlays, as render_theme_style drops it, so the value beneath it stays.

variables

the resolved default or custom variables

theme

the theme to overlay, or null/undefined for none

type Theme | null | undefined

returns

StyleVariable[]

the composed variables, or variables unchanged when there's no theme

build_variable_graph
#

variable_graph.ts view source

(variables: { name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }[]): VariableDependencyGraph import {build_variable_graph} from '@fuzdev/fuz_css/variable_graph.js';

Builds a dependency graph from an array of style variables.

The graph is what the bundled theme CSS renders from, verbatim, so it applies the containment checks render_theme_style does: a slot whose value could end its own declaration (or is blank), or a variable whose name isn't a plain identifier, is left out and reported as an uncontained_theme_value error rather than written into the stylesheet.

variables

array of StyleVariable objects

returns

VariableDependencyGraph

build_variable_graph_from_options
#

variable_graph.ts view source

(variables: VariablesOption, theme?: { name: string; variables: { name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; }[]; summary?: string | undefined; scheme?: "dark" | ... 2 more ... | undefined; scheme_mirror?: { ...; }[] | undefined; } | null | undefined): VariableDependencyGraph import {build_variable_graph_from_options} from '@fuzdev/fuz_css/variable_graph.js';

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

theme?

an optional theme to overlay onto the resolved variables

type Theme | null
optional

returns

VariableDependencyGraph

VariableDependencyGraph built from the resolved variables

find_similar_variable
#

variable_graph.ts view source

(graph: VariableDependencyGraph, name: string): string | null import {find_similar_variable} from '@fuzdev/fuz_css/variable_graph.js';

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

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

generate_theme_css
#

variable_graph.ts view source

(graph: VariableDependencyGraph, resolved_variables: Set<string>): { light_css: string; dark_css: string; } import {generate_theme_css} from '@fuzdev/fuz_css/variable_graph.js';

Generates theme CSS for the resolved variables.

graph

the variable dependency graph

resolved_variables

set of variable names to include

type Set<string>

returns

{ light_css: string; dark_css: string; }

object with light_css and dark_css strings

get_all_variable_names
#

variable_graph.ts view source

(graph: VariableDependencyGraph): Set<string> import {get_all_variable_names} from '@fuzdev/fuz_css/variable_graph.js';

Gets all variable names from the graph.

graph

the variable dependency graph

returns

Set<string>

set of all variable names in the graph

resolve_variables_transitive
#

variable_graph.ts view source

(graph: VariableDependencyGraph, initial_variables: Iterable<string>, excluded?: ReadonlySet<string> | undefined): ResolveVariablesResult import {resolve_variables_transitive} from '@fuzdev/fuz_css/variable_graph.js';

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.

An excluded variable is left out along with the dependencies only it pulls in - whatever defines it in its place defines those too.

graph

the variable dependency graph

initial_variables

initial set of variable names to resolve

type Iterable<string, any, any>

excluded?

variable names to leave out, and not resolve through

type ReadonlySet<string>
optional

returns

ResolveVariablesResult

ResolveVariablesResult with all transitive dependencies

ResolveVariablesResult
#

variable_graph.ts view source

ResolveVariablesResult import type {ResolveVariablesResult} from '@fuzdev/fuz_css/variable_graph.js';

Result from transitive variable resolution.

variables

All resolved variable names

type Set<string>

warnings

Warning messages for cycles

type string[]

missing

Variable names that were requested but not found in the graph

type Set<string>

excluded

Excluded variable names a resolved variable depends on

type Set<string>

StyleVariableInfo
#

variable_graph.ts view source

StyleVariableInfo import type {StyleVariableInfo} from '@fuzdev/fuz_css/variable_graph.js';

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

VariableDependencyGraph
#

variable_graph.ts view source

VariableDependencyGraph import type {VariableDependencyGraph} from '@fuzdev/fuz_css/variable_graph.js';

Dependency graph for style variables.

variables

Map from variable name to its info

type Map<string, StyleVariableInfo>

diagnostics

The uncontained_theme_value errors for the slots left out of the graph, which resolve_css forwards with every resolution.

type GenerationDiagnostic[]

Depends on
#

Imported by
#