css_literal.ts

CSS-literal syntax parser, validator, and interpreter.

Enables writing utility classes using actual CSS syntax:

- display:flex.display\:flex { display: flex; } - hover:opacity:80%.hover\:opacity\:80\%:hover { opacity: 80%; } - md:dark:hover:before:opacity:80% → nested CSS with media query, ancestor, state, pseudo-element

@see {@link https://github.com/fuzdev/fuz_css} for documentation

Declarations
#

24 declarations

view source

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

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 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) { ... }

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

Example 1

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

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

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

returns

string

CSS string for this class

generate_declaration
#

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

returns

string

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

returns

boolean

has_modifiers
#

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) { ... }

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

LiteralResolutionResult
#

load_css_properties
#

ModifierExtractionResult
#

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

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

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)

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

Depends on
#

Imported by
#