css_class_extractor.ts

AST-based CSS class extraction for Svelte and TypeScript files.

Replaces regex-based extraction with proper parsing to handle:

  • class="display:flex" - string attributes
  • class={{ active, disabled: !enabled }} - object attributes (Svelte 5.16+)
  • class={[cond && 'box', 'display:flex']} - array attributes (Svelte 5.16+)
  • class:active={cond} - class directives
  • clsx('foo', { bar: true }) - class utility function calls
  • Variables with class-related names
  • // @fuz-classes class1 class2 - comment hints for dynamic classes
  • // @fuz-elements element1 element2 - comment hints for dynamic elements
  • // @fuz-variables var1 var2 - comment hints for dynamic CSS variables
view source

Declarations
#

10 declarations

AcornPlugin
#

css_class_extractor.ts view source

AcornPlugin import type {AcornPlugin} from '@fuzdev/fuz_css/css_class_extractor.js';

Acorn plugin type - a function that extends the Parser class.

(call)

type (BaseParser: typeof Parser): typeof Parser

BaseParser

type typeof Parser
returns typeof Parser

extract_css_classes
#

css_class_extractor.ts view source

(source: string, options?: ExtractCssClassesOptions): Set<string> | null import {extract_css_classes} from '@fuzdev/fuz_css/css_class_extractor.js';

Unified extraction function that auto-detects file type. Returns just the class names as a Set.

source

the file source code

type string

options

extraction options

type ExtractCssClassesOptions
default {}

returns

Set<string> | null

set of class names, or null if none found

extract_css_classes_with_locations
#

css_class_extractor.ts view source

(source: string, options?: ExtractCssClassesOptions): ExtractionResult import {extract_css_classes_with_locations} from '@fuzdev/fuz_css/css_class_extractor.js';

Unified extraction function that auto-detects file type. Returns full extraction result with locations and diagnostics.

source

the file source code

type string

options

extraction options

type ExtractCssClassesOptions
default {}

returns

ExtractionResult

full extraction result with classes, tracked variables, and diagnostics

extract_from_svelte
#

css_class_extractor.ts view source

(source: string, file?: string): ExtractionResult import {extract_from_svelte} from '@fuzdev/fuz_css/css_class_extractor.js';

Extracts CSS classes from a Svelte file using AST parsing.

source

the Svelte file source code

type string

file

file path for location tracking

type string
default '<unknown>'

returns

ExtractionResult

extraction result with classes, tracked variables, elements, and diagnostics

extract_from_ts
#

css_class_extractor.ts view source

(source: string, file?: string, acorn_plugins?: AcornPlugin[] | undefined): ExtractionResult import {extract_from_ts} from '@fuzdev/fuz_css/css_class_extractor.js';

Extracts CSS classes from a TypeScript/JS file using AST parsing.

source

the TS/JS file source code

type string

file

file path for location tracking

type string
default '<unknown>'

acorn_plugins?

additional acorn plugins (e.g., acorn-jsx for React)

type AcornPlugin[]
optional

returns

ExtractionResult

extraction result with classes, tracked variables, elements, and diagnostics

ExtractCssClassesOptions
#

css_class_extractor.ts view source

ExtractCssClassesOptions import type {ExtractCssClassesOptions} from '@fuzdev/fuz_css/css_class_extractor.js';

Options for CSS class extraction.

filename?

File path used to determine extraction method (Svelte vs TS) and for location tracking in diagnostics.

type string

acorn_plugins?

Additional acorn plugins to use when parsing TS/JS files. Useful for adding JSX support via acorn-jsx for React projects.

type AcornPlugin[]

import jsx from 'acorn-jsx'; extract_css_classes(source, { acorn_plugins: [jsx()] });

ExtractionData
#

css_class_extractor.ts view source

ExtractionData import type {ExtractionData} from '@fuzdev/fuz_css/css_class_extractor.js';

Cacheable extraction data fields shared between extraction and caching layers. Uses null instead of empty collections to avoid allocation overhead.

classes

Map from class name to locations where it was used, or null if none. Keys = unique classes, values = locations for diagnostics/IDE integration.

type Map<string, SourceLocation[]> | null

explicit_classes

Classes explicitly annotated via @fuz-classes comments, or null if none. These produce errors if they can't be resolved during generation - by a class definition or, when base styles are bundled, a base style rule.

type Set<string> | null

diagnostics

Diagnostics from the extraction phase, or null if none

type ExtractionDiagnostic[] | null

elements

HTML elements found in the file, or null if none. Used for including only the style.css rules needed.

type Set<string> | null

explicit_elements

Elements explicitly annotated via @fuz-elements comments, or null if none. These should produce errors if they have no matching style rules.

type Set<string> | null

explicit_variables

Variables explicitly annotated via @fuz-variables comments, or null if none. These produce errors if they can't be resolved to theme variables.

type Set<string> | null

ExtractionResult
#

css_class_extractor.ts view source

ExtractionResult import type {ExtractionResult} from '@fuzdev/fuz_css/css_class_extractor.js';

Extraction result with classes mapped to their source locations. Extends ExtractionData with tracked_vars which is internal to AST walking.

Uses embedded diagnostics (rather than a Result type) because file extraction can partially succeed: some classes may be extracted while others produce errors. This differs from CssLiteralParseResult which uses a discriminated union because single-class parsing is binary success/failure.

inheritance

extends: ExtractionData

tracked_vars

Variables that were used in class contexts, or null if none

type Set<string> | null

has_extraction_data
#

css_class_extractor.ts view source

(data: ExtractionData): boolean import {has_extraction_data} from '@fuzdev/fuz_css/css_class_extractor.js';

Returns true if the extraction data has any non-null fields.

data

type ExtractionData

returns

boolean

SourceIndex
#

css_class_extractor.ts view source

import {SourceIndex} from '@fuzdev/fuz_css/css_class_extractor.js';

Helper class for converting character offsets to line/column positions. Svelte template nodes (Comment, Text, ExpressionTag) only have char offsets, so this class enables efficient conversion.

Build: O(n) where n = source length Lookup: O(log m) where m = number of lines (binary search)

constructor

type new (source: string): SourceIndex

source

type string

get_location

Converts a character offset to a source location.

type (offset: number, file: string): SourceLocation

offset

0-based character offset in the source

type number

file

file path for the location

type string
returns SourceLocation

SourceLocation with 1-based line and column

Depends on
#

Imported by
#