css_ruleset_parser.ts

CSS ruleset parser using Svelte's CSS parser.

Parses CSS rulesets to extract selectors and declarations with position information. Used for:

Phase 0a: Detecting single-selector rulesets that could be converted to declaration format
Phase 2: Modifying selectors for modifier support on composite classes

Declarations
#

13 declarations

find_compound_end
#

(selector: string, class_pos: number): number import {find_compound_end} from '@fuzdev/fuz_css/css_ruleset_parser.js';

Finds the end position of the compound selector containing the class at class_pos. A compound selector is a sequence of simple selectors without combinators.

`selector`

the CSS selector string

type string

`class_pos`

position of the . in .class_name

type number

returns

number

position where state modifiers should be inserted (before any pseudo-element)

generate_modified_ruleset
#

css_ruleset_parser.ts view source

(original_ruleset: string, original_class: string, new_class_escaped: string, state_css: string, pseudo_element_css: string, media_wrapper: string | null, ancestor_wrapper: string | null): ModifiedRulesetResult

import {generate_modified_ruleset} from '@fuzdev/fuz_css/css_ruleset_parser.js';

Generates CSS for a modified ruleset with applied modifiers.

Conflict handling is per-selector within selector lists:

For .plain:hover, .plain:active with hover: modifier, only .plain:hover skips the :hover addition; .plain:active still gets :hover appended.
For multiple states like :hover:focus, each is checked individually; conflicting states are skipped while non-conflicting ones are still applied.

`original_ruleset`

the original CSS ruleset string

type string

`original_class`

the base class name

type string

`new_class_escaped`

the escaped new class name with modifiers

type string

`state_css`

state modifier CSS (e.g., ":hover" or ":hover:focus")

type string

`pseudo_element_css`

pseudo-element modifier CSS (e.g., "::before")

type string

`media_wrapper`

media query wrapper (e.g., "@media (width >= 48rem)")

type string | null

`ancestor_wrapper`

ancestor wrapper (e.g., ":root.dark")

type string | null

returns

ModifiedRulesetResult

result with generated CSS and information about skipped modifiers

is_single_selector_ruleset
#

css_ruleset_parser.ts view source

(rules: ParsedRule[], escaped_class_name: string): boolean import {is_single_selector_ruleset} from '@fuzdev/fuz_css/css_ruleset_parser.js';

Checks if a ruleset has only a single simple selector (just the class name). Used to detect rulesets that could be converted to declaration format.

`rules`

parsed rules from the ruleset

type ParsedRule[]

`escaped_class_name`

the CSS-escaped class name (e.g., "box" or "hover\\:card")

type string

returns

boolean

true if there's exactly one rule with selector ".class_name"

ModifiedRulesetResult
#

css_ruleset_parser.ts view source

ModifiedRulesetResult import type {ModifiedRulesetResult} from '@fuzdev/fuz_css/css_ruleset_parser.js';

Result from generating a modified ruleset.

Uses | null for skipped_modifiers to avoid allocating empty arrays. Callers should use a guard pattern: if (result.skipped_modifiers) { ... }

`css`

The generated CSS

type string

`skipped_modifiers`

Information about modifiers that were skipped for certain rules, or null if none

type SkippedModifierInfo[] | null

ModifiedSelectorGroupResult
#

css_ruleset_parser.ts view source

ModifiedSelectorGroupResult import type {ModifiedSelectorGroupResult} from '@fuzdev/fuz_css/css_ruleset_parser.js';

Result from modifying a selector group with conflict detection.

Uses | null for skipped_modifiers to avoid allocating empty arrays. Callers should use a guard pattern: if (result.skipped_modifiers) { ... }

`selector`

The modified selector list as a string

type string

`skipped_modifiers`

Information about modifiers skipped for specific selectors, or null if none

type SkippedModifierInfo[] | null

modify_selector_group
#

css_ruleset_parser.ts view source

(selector_group: string, original_class: string, new_class_escaped: string, states_to_add: string[], pseudo_element_css: string): ModifiedSelectorGroupResult

import {modify_selector_group} from '@fuzdev/fuz_css/css_ruleset_parser.js';

Modifies a selector list (comma-separated selectors) to add modifiers. Handles conflicts per-selector: if one selector in a list has a conflict, only that selector skips the modifier; other selectors still get it.

`selector_group`

CSS selector list (may contain commas)

type string

`original_class`

the base class name

type string

`new_class_escaped`

the escaped new class name

type string

`states_to_add`

individual state modifiers (e.g., [":hover", ":focus"])

type string[]

`pseudo_element_css`

pseudo-element modifier CSS to insert (e.g., "::before")

type string

returns

ModifiedSelectorGroupResult

result with modified selector list and information about skipped modifiers

modify_single_selector
#

css_ruleset_parser.ts view source

(selector: string, original_class: string, new_class_escaped: string, state_css: string, pseudo_element_css: string): string

import {modify_single_selector} from '@fuzdev/fuz_css/css_ruleset_parser.js';

Modifies a single CSS selector to add modifiers.

`selector`

a single CSS selector (not a selector list)

type string

`original_class`

the base class name (e.g., "menuitem")

type string

`new_class_escaped`

the escaped new class name (e.g., "hover\\:menuitem")

type string

`state_css`

state modifier CSS to insert (e.g., ":hover")

type string

`pseudo_element_css`

pseudo-element modifier CSS to insert (e.g., "::before")

type string

returns

string

modified selector

examples

modify_single_selector('.menuitem', 'menuitem', 'hover\\:menuitem', ':hover', '')
// → '.hover\\:menuitem:hover'

modify_single_selector('.menuitem .icon', 'menuitem', 'hover\\:menuitem', ':hover', '')
// → '.hover\\:menuitem:hover .icon'

modify_single_selector('.menuitem.selected', 'menuitem', 'hover\\:menuitem', ':hover', '')
// → '.hover\\:menuitem.selected:hover'

parse_ruleset
#

css_ruleset_parser.ts view source

(css: string): ParsedRuleset import {parse_ruleset} from '@fuzdev/fuz_css/css_ruleset_parser.js';

Parses a CSS ruleset string using Svelte's CSS parser.

`css`

raw CSS string (e.g., ".box { display: flex; }")

type string

returns

ParsedRuleset

ParsedRuleset with structured rule data and positions

ParsedRule
#

css_ruleset_parser.ts view source

ParsedRule import type {ParsedRule} from '@fuzdev/fuz_css/css_ruleset_parser.js';

A parsed CSS rule with its components and positions.

`selector`

Full selector string (e.g., ".box", ".selectable:hover")

type string

`selector_start`

Start position of selector in original CSS (0-indexed)

type number

`selector_end`

End position of selector in original CSS

type number

`declarations`

The declarations block (without braces)

type string

`rule_start`

Start position of the entire rule

type number

`rule_end`

End position of the entire rule

type number

ParsedRuleset
#

css_ruleset_parser.ts view source

ParsedRuleset import type {ParsedRuleset} from '@fuzdev/fuz_css/css_ruleset_parser.js';

Result of parsing a CSS ruleset.

`rules`

All rules in the ruleset

type ParsedRule[]

ruleset_contains_class
#

css_ruleset_parser.ts view source

(rules: ParsedRule[], escaped_class_name: string): boolean import {ruleset_contains_class} from '@fuzdev/fuz_css/css_ruleset_parser.js';

Checks if any selector in the ruleset contains the expected class name. Used to validate that ruleset definitions match their key.

`rules`

parsed rules from the ruleset

type ParsedRule[]

`escaped_class_name`

the CSS-escaped class name (e.g., "clickable" or "hover\\:card")

type string

returns

boolean

true if at least one selector contains ".class_name"

SkippedModifierInfo
#

css_ruleset_parser.ts view source

SkippedModifierInfo import type {SkippedModifierInfo} from '@fuzdev/fuz_css/css_ruleset_parser.js';

Information about a modifier that was skipped for a selector during ruleset modification. The selector is still included in output, just without the conflicting modifier applied.

`selector`

The specific selector where the modifier was skipped (not the full selector list)

type string

`reason`

Reason the modifier was skipped

type "pseudo_element_conflict" | "state_conflict"

`conflicting_modifier`

The conflicting modifier that was not applied (e.g., "::before" or ":hover")

type string

split_selector_list
#

css_ruleset_parser.ts view source

(selector_group: string): string[] import {split_selector_list} from '@fuzdev/fuz_css/css_ruleset_parser.js';

Splits a selector list by commas, respecting parentheses, brackets, and quoted strings.

`selector_group`

type string

returns

string[]

examples

split_selector_list('.a, .b') // → ['.a', '.b']
split_selector_list('.a:not(.b), .c') // → ['.a:not(.b)', '.c']
split_selector_list('.a[data-x="a,b"], .c') // → ['.a[data-x="a,b"]', '.c']