9 declarations
css_class_generators.ts view source
ClassTemplateFn<T1, T2, T3> type ((v1: T1) => GeneratedClassResult) | ((v1: T1, v2: T2) => GeneratedClassResult) | ((v1: T1, v2: T2, v3: T3) => GeneratedClassResult)
import type {ClassTemplateFn} from '@fuzdev/fuz_css/css_class_generators.js'; ClassTemplateFn<T1 = string, T2 = string, T3 = string>T1stringT2stringT3stringcss_class_generators.ts view source
(value: string): string import {format_spacing_value} from '@fuzdev/fuz_css/css_class_generators.js'; Format spacing values for CSS (handles 0, auto, percentages, pixels, and CSS variables). Used by margin, padding, gap, inset, top/right/bottom/left, etc.
valuestringstring css_class_generators.ts view source
(str: string): string import {format_variable_name} from '@fuzdev/fuz_css/css_class_generators.js'; strstringstring css_class_generators.ts view source
(values: Iterable<string>, formatter?: ((value: string) => string) | undefined): Record<string, CssClassDefinition> import {generate_border_radius_corners} from '@fuzdev/fuz_css/css_class_generators.js'; Generate border radius corner classes for all four corners. Creates classes for top-left, top-right, bottom-left, bottom-right corners.
valuesthe values to generate classes for
Iterable<string, any, any>formatter?optional function to format values
(value: string) => stringRecord<string, CssClassDefinition>
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<...> import {generate_classes} from '@fuzdev/fuz_css/css_class_generators.js'; Generates CSS class declarations from templates. Supports up to 3 dimensions of multiplicative combinations.
templatefunction that generates CSS from values, can return null to skip
valuesprimary iterable of values
Iterable<T1, any, any>secondary?optional second dimension (makes it multiplicative)
Iterable<T2, any, any>tertiary?optional third dimension for even more combinations
Iterable<T3, any, any>Record<string, CssClassDefinition>
generate_classes<T1 = string, T2 = string, T3 = string>T1stringT2stringT3string// 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']
)css_class_generators.ts view source
(property: string, values: Iterable<string>, formatter?: ((v: string) => string) | undefined): Record<string, CssClassDefinition> import {generate_directional_classes} from '@fuzdev/fuz_css/css_class_generators.js'; Generate directional classes for properties like margin and padding. Creates classes for all directions: base, top, right, bottom, left, x (horizontal), y (vertical).
propertythe base CSS property name (e.g. 'margin', 'padding')
stringvaluesthe values to generate classes for
Iterable<string, any, any>formatter?optional function to format values (defaults to identity)
(v: string) => stringRecord<string, CssClassDefinition>
css_class_generators.ts view source
(property: string, values: Iterable<string>, formatter?: ((value: string) => string) | undefined, prefix?: string): Record<string, CssClassDefinition> import {generate_property_classes} from '@fuzdev/fuz_css/css_class_generators.js'; Generate classes for a single CSS property with various values.
propertythe CSS property name (e.g. 'font-size', 'gap')
stringvaluesthe values to generate classes for
Iterable<string, any, any>formatter?optional function to format values (e.g. v => var(--space_${v}))
(value: string) => stringprefixoptional class name prefix (defaults to property with dashes replaced by underscores)
stringformat_variable_name(property)Record<string, CssClassDefinition>
css_class_generators.ts view source
(sizes: Iterable<string>, alpha_mapping: Record<string, string>): Record<string, CssClassDefinition> import {generate_shadow_classes} from '@fuzdev/fuz_css/css_class_generators.js'; 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.
sizesthe shadow size variants (xs, sm, md, lg, xl)
Iterable<string, any, any>alpha_mappingmapping of sizes to alpha numbers (1-5)
Record<string, string>Record<string, CssClassDefinition>
css_class_generators.ts view source
GeneratedClassResult type { name: string; css: string; } | null
import type {GeneratedClassResult} from '@fuzdev/fuz_css/css_class_generators.js';