Shared options for CSS generation plugins (Gro and Vite).
Both gen_fuz_css (Gro generator) and vite_plugin_fuz_css share the same core options for extraction, generation, and bundled CSS. This module provides the shared types to ensure consistency.
By default, the generated CSS (virtual:fuz.css or ./fuz.css) includes
only the content your code uses from all three layers:
- Base styles (element defaults)
- Theme variables (CSS custom properties)
- Utility classes
undefined vs null ConventionConfiguration options that accept both undefined and null follow this pattern:
- undefined - Use framework defaults. The feature is enabled with standard behavior.
- null - Explicitly disable the feature. No output is generated for that layer.
This applies to BaseCssOption and VariablesOption.
Setting both to null enables "utility-only mode" where you manage
your own theme and base styles via direct imports (@fuzdev/fuz_css/style.css
and theme.css, which include all content).
8 declarations
css_plugin_options.ts view source
BaseCssOption Type for the base_css option used by CSS generators.
Supports four forms:
- undefined - Use default style.css (framework defaults)
- null - Disable base styles entirely (explicit opt-out)
- string - Custom CSS to replace defaults
- (default_css) => string - Callback to modify default CSS
See module documentation for the undefined vs null convention.
css_plugin_options.ts view source
CssCacheOptions Options for cache behavior.
cache_dirCache directory relative to project root.
stringdepsFilesystem deps for cache management. Defaults to production implementation. Override for testing.
css_plugin_options.ts view source
CssClassOptions Options for CSS class definitions and interpretation. Controls how classes are defined and how dynamic classes are generated.
class_definitionsAdditional class definitions to merge with defaults.
User definitions take precedence over defaults with the same name.
Required when include_default_classes is false.
Record<string, CssClassDefinition | undefined>include_default_classesWhether to include default class definitions (token and composite classes).
When false, class_definitions is required.
booleanclass_interpretersCustom interpreters for dynamic class generation. Replaces the builtin interpreters entirely if provided.
Array<CssClassDefinitionInterpreter>css_plugin_options.ts view source
CssDiagnosticsOptions Options for error and warning handling.
on_errorHow to handle CSS-literal errors during generation. - 'log': Log errors, skip invalid classes, continue - 'throw': Throw on first error, fail the build
'log' | 'throw'on_warningHow to handle warnings during generation. - 'log': Log warnings, continue - 'throw': Throw on first warning, fail the build - 'ignore': Suppress warnings entirely
'log' | 'throw' | 'ignore'css_plugin_options.ts view source
CssExtractionOptions Options for CSS class extraction from source files. Controls which files to scan and how to parse them.
filter_fileFilter function to determine which files to extract classes from. By default, extracts from .svelte, .html, .ts, .js, .tsx, .jsx files, excluding test files and .gen files.
acorn_pluginsAdditional acorn plugins for parsing.
Use acorn-jsx for React/Preact/Solid projects.
Array<AcornPlugin>css_plugin_options.ts view source
CssGeneratorBaseOptions Combined base options shared by both Gro and Vite plugins. These options work identically in both contexts.
css_plugin_options.ts view source
CssOutputOptions Options for CSS output generation (theme + base + utilities). Controls how the three CSS layers are combined.
base_cssBase styles (element defaults) configuration.
- undefined (default): Use default style.css
- null: Disable base styles entirely
- string: Custom CSS to replace defaults
- (default_css) => string: Callback to modify default CSS
variablesTheme variables configuration.
- undefined (default): Use default variables from fuz_css
- null: Disable theme entirely
- Array<StyleVariable>: Custom variable definitions (replaces defaults)
- (defaults) => Array<StyleVariable>: Callback to modify default variables
theme_specificitySpecificity multiplier for theme CSS selectors.
Defaults to 1 which generates :root, higher values generate more specific selectors (e.g., :root:root).
numberadditional_classesClasses to always include in the output, regardless of detection. Useful for dynamically generated class names that can't be statically extracted.
Iterable<string>additional_elementsAdditional HTML elements to always include base styles for.
Use 'all' to include all base styles regardless of detection.
Useful for elements generated at runtime via document.createElement().
Iterable<string> | 'all'additional_variablesAdditional CSS variables to always include in theme output.
Use 'all' to include all theme variables regardless of detection.
Useful for variables referenced dynamically.
Iterable<string> | 'all'exclude_classesClasses to exclude from the output, even if detected. Useful for filtering out false positives from extraction.
Iterable<string>exclude_elementsElements to exclude from base CSS output, even if detected. Useful for filtering out elements you don't want styles for.
Iterable<string>exclude_variablesCSS variables to exclude from theme output, even if referenced. Useful for filtering out variables you don't want in the theme.
Iterable<string>css_plugin_options.ts view source
VariablesOption Type for the variables option used by CSS generators.
Supports four forms:
- undefined - Use default variables (framework defaults)
- null - Disable theme generation entirely (explicit opt-out)
- Array<StyleVariable> - Custom variables array (replaces defaults)
- (defaults) => Array<StyleVariable> - Callback to modify defaults
See module documentation for the undefined vs null convention.