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
24 declarations
(value: string): string | null import {check_calc_expression} from '@fuzdev/fuz_css/css_literal.js'; Checks if a value contains a possibly invalid calc expression.
valuethe formatted CSS value
stringstring | null
warning message if suspicious, null otherwise
CssLiteralOutput import type {CssLiteralOutput} from '@fuzdev/fuz_css/css_literal.js'; Information needed to generate CSS output for a CSS-literal class.
declarationCSS declaration (property: value;)
type string
selectorFull CSS selector including pseudo-classes/elements
type string
media_wrapperMedia query wrapper if any
type string | null
ancestor_wrapperAncestor wrapper if any
type string | null
CssLiteralParseResult type { ok: true; parsed: ParsedCssLiteral; diagnostics: InterpreterDiagnostic[] | null; } | { ok: false; error: InterpreterDiagnostic; }
import type {CssLiteralParseResult} from '@fuzdev/fuz_css/css_literal.js'; 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) { ... }
(segments: string[], class_name: string): ModifierExtractionResult import {extract_and_validate_modifiers} from '@fuzdev/fuz_css/css_literal.js'; 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.
segmentsarray of colon-separated segments
string[]class_nameoriginal class name for error messages
stringModifierExtractionResult with modifiers and remaining segments, or error
(class_name: string): string[] import {extract_segments} from '@fuzdev/fuz_css/css_literal.js'; Extracts colon-separated segments from a class name, handling parentheses. Parenthesized content (like function arguments) is kept intact.
class_namestringstring[] 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)']ExtractedModifiers import type {ExtractedModifiers} from '@fuzdev/fuz_css/css_literal.js'; Extracted modifiers from a class name. Used by both CSS-literal parsing and modified class interpretation.
mediaMedia modifier (breakpoint or feature query)
type ModifierDefinition | null
ancestorAncestor modifier (dark/light)
type ModifierDefinition | null
statesState modifiers in alphabetical order (can have multiple)
type ModifierDefinition[]
pseudo_elementPseudo-element modifier (before, after, etc.)
type ModifierDefinition | null
(value: string): string import {format_css_value} from '@fuzdev/fuz_css/css_literal.js'; Formats a CSS-literal value for CSS output.
~ with space!importantvalueraw value from class name
stringstring formatted CSS value
(output: CssLiteralOutput): string import {generate_css_literal_simple} from '@fuzdev/fuz_css/css_literal.js'; Generates simple CSS for a CSS-literal class (without grouping). Used by the interpreter for basic output.
outputthe CSS-literal output info
string CSS string for this class
(parsed: ParsedCssLiteral): string import {generate_declaration} from '@fuzdev/fuz_css/css_literal.js'; Generates the CSS declaration for a parsed CSS-literal class.
parsedstring (escaped_class_name: string, parsed: ParsedCssLiteral): string import {generate_selector} from '@fuzdev/fuz_css/css_literal.js'; Generates the CSS selector for a parsed CSS-literal class. Includes state pseudo-classes and pseudo-element in the selector.
escaped_class_namestringparsedstring (modifiers: ExtractedModifiers): boolean import {has_extracted_modifiers} from '@fuzdev/fuz_css/css_literal.js'; Checks if extracted modifiers contain any modifier. Useful for tooling that needs to detect modified classes.
modifiersboolean (parsed: ParsedCssLiteral): boolean import {has_modifiers} from '@fuzdev/fuz_css/css_literal.js'; Checks if a parsed CSS literal has any modifiers.
parsedboolean (class_name: string, escaped_class_name: string, css_properties: Set<string> | null): InterpretCssLiteralResult import {interpret_css_literal} from '@fuzdev/fuz_css/css_literal.js'; 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_namethe class name to interpret
stringescaped_class_namethe CSS-escaped version of the class name
stringcss_propertiesSet of valid CSS properties from load_css_properties()
Pass null to skip property validation.
Set<string> | nullresult with output and warnings on success, or error on failure
InterpretCssLiteralResult type { ok: true; output: CssLiteralOutput; warnings: InterpreterDiagnostic[] | null; } | { ok: false; error: InterpreterDiagnostic; }
import type {InterpretCssLiteralResult} from '@fuzdev/fuz_css/css_literal.js'; 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) { ... }
(class_name: string): boolean import {is_possible_css_literal} from '@fuzdev/fuz_css/css_literal.js'; Checks if a class name could be a CSS-literal class. Quick check before attempting full parse.
class_namethe class name to check
stringboolean true if it could be CSS-literal syntax
(property: string, properties: Set<string> | null): boolean import {is_valid_css_property} from '@fuzdev/fuz_css/css_literal.js'; Checks if a property name is a valid CSS property. Custom properties (--*) always return true.
propertythe CSS property name to validate
stringpropertiesSet of valid CSS properties from load_css_properties()
Pass null to skip validation.
Set<string> | nullboolean true if valid CSS property or custom property
LiteralResolutionResult type { ok: true; declaration: string; warnings: InterpreterDiagnostic[] | null; } | { ok: false; error: InterpreterDiagnostic | null; }
import type {LiteralResolutionResult} from '@fuzdev/fuz_css/css_literal.js'; Result of attempting to resolve a CSS literal for composition.
(): Promise<Set<string>> import {load_css_properties} from '@fuzdev/fuz_css/css_literal.js'; Loads CSS properties from @webref/css.
Returns a fresh Set each time - callers should cache the result if needed.
Promise<Set<string>>
ModifierExtractionResult type { ok: true; modifiers: ExtractedModifiers; remaining: string[]; } | { ok: false; error: InterpreterDiagnostic; }
import type {ModifierExtractionResult} from '@fuzdev/fuz_css/css_literal.js'; Result of extracting modifiers from segments.
(class_name: string, css_properties: Set<string> | null): CssLiteralParseResult import {parse_css_literal} from '@fuzdev/fuz_css/css_literal.js'; Parses a CSS-literal class name into its components.
class_namethe class name to parse
stringcss_propertiesSet of valid CSS properties from load_css_properties()
Pass null to skip property validation.
Set<string> | nullCssLiteralParseResult with parsed data or error
ParsedCssLiteral import type {ParsedCssLiteral} from '@fuzdev/fuz_css/css_literal.js'; Parsed CSS-literal class with all components extracted.
class_nameOriginal class name
type string
mediaMedia modifier (breakpoint or feature query)
type ModifierDefinition | null
ancestorAncestor modifier (dark/light)
type ModifierDefinition | null
statesState modifiers in alphabetical order (can have multiple)
type ModifierDefinition[]
pseudo_elementPseudo-element modifier (before, after, etc.)
type ModifierDefinition | null
propertyCSS property name
type string
valueCSS value (with ~ replaced by spaces)
type string
(typo: string, properties: Set<string> | null): string | null import {suggest_css_property} from '@fuzdev/fuz_css/css_literal.js'; Suggests a correct property name for a typo using Levenshtein distance.
typothe mistyped property name
stringpropertiesSet of valid CSS properties from load_css_properties()
Pass null to skip suggestions.
Set<string> | nullstring | null
the suggested property or null if no close match (Levenshtein distance > 2)
(typo: string): string | null import {suggest_modifier} from '@fuzdev/fuz_css/css_literal.js'; Suggests a correct modifier name for a typo using Levenshtein distance.
typothe mistyped modifier name
stringstring | null
the suggested modifier or null if no close match (Levenshtein distance > 2)
(class_name: string, css_properties: Set<string> | null, context_class_name: string): LiteralResolutionResult import {try_resolve_literal} from '@fuzdev/fuz_css/css_literal.js'; 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_namethe class name to try resolving
stringcss_propertiesset of valid CSS properties, or null to skip validation
Set<string> | nullcontext_class_namethe class being defined (for error messages)
stringresolution result with declaration, or error, or null if not a literal