css_class_generators.ts

Declarations
#

12 declarations

view source

ClassTemplateFn
#

CSS_DIRECTIONS
#

CssDirection
#

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
#

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

GeneratedClassResult
#

Imported by
#