Core Processing

/**
 * Creates a new WindiCSS processor instance
 * @param config - Optional configuration object
 */
constructor(config?: Config);

import Processor from "windicss";

// Basic processor
const processor = new Processor();

// Processor with custom configuration
const processor = new Processor({
  theme: {
    extend: {
      colors: {
        primary: "#3b82f6"
      }
    }
  },
  plugins: [
    // custom plugins
  ]
});

/**
 * Extracts CSS styles for a given class name
 * @param className - The utility class name to extract styles for
 * @param addComment - Whether to add comments to the generated styles
 * @param prefix - Optional prefix to remove from class name
 * @returns Style object(s) or undefined if class is not valid
 */
extract(className: string, addComment?: boolean, prefix?: string): Style | Style[] | undefined;

// Extract styles for a utility class
const styles = processor.extract("bg-blue-500");
if (styles) {
  console.log(styles.build()); // ".bg-blue-500 { background-color: #3b82f6; }"
}

// Extract styles with comments
const stylesWithComments = processor.extract("p-4", true);

// Extract with custom prefix handling
const prefixedStyles = processor.extract("tw-m-2", false, "tw-");

/**
 * Tests if a class name is a valid WindiCSS utility
 * @param className - The class name to test
 * @param prefix - Optional prefix to remove from class name
 * @returns True if the class is valid, false otherwise
 */
test(className: string, prefix?: string): boolean;

// Test standard utilities
console.log(processor.test("bg-red-500")); // true
console.log(processor.test("invalid-class")); // false

// Test with prefix
console.log(processor.test("tw-p-4", "tw-")); // true

/**
 * Processes class names into CSS styles with detailed results
 * @param classNames - Space-separated string of class names
 * @param ignoreProcessed - Whether to skip already processed classes
 * @param handleIgnored - Optional function to handle ignored classes
 * @returns Object with success/ignored arrays and generated StyleSheet
 */
interpret(
  classNames: string,
  ignoreProcessed?: boolean,
  handleIgnored?: (ignored: string) => Style | Style[] | undefined
): InterpretResult;

interface InterpretResult {
  success: string[];
  ignored: string[];
  styleSheet: StyleSheet;
}

// Basic interpretation
const result = processor.interpret("bg-blue-500 text-white p-4 hover:bg-blue-600");
console.log(result.success); // ["bg-blue-500", "text-white", "p-4", "hover:bg-blue-600"]
console.log(result.ignored); // []
console.log(result.styleSheet.build()); // Generated CSS

// Handle ignored classes
const resultWithHandler = processor.interpret(
  "bg-blue-500 custom-class p-4",
  false,
  (ignored) => {
    console.log(`Ignored class: ${ignored}`);
    return undefined; // or return custom styles
  }
);

// Skip processed classes for performance
const resultOptimized = processor.interpret("bg-red-500 text-black", true);

/**
 * Compiles multiple class names into a single CSS class
 * @param classNames - Space-separated string of class names
 * @param prefix - Prefix for generated class name (default: 'windi-')
 * @param showComment - Whether to add comments to generated styles
 * @param ignoreGenerated - Whether to skip if already generated
 * @param handleIgnored - Optional function to handle ignored classes
 * @param outputClassName - Custom output class name
 * @returns Object with results and generated class name
 */
compile(
  classNames: string,
  prefix?: string,
  showComment?: boolean,
  ignoreGenerated?: boolean,
  handleIgnored?: (ignored: string) => Style | Style[] | undefined,
  outputClassName?: string
): CompileResult;

interface CompileResult {
  success: string[];
  ignored: string[];
  className?: string;
  styleSheet: StyleSheet;
}

// Basic compilation
const result = processor.compile("bg-blue-500 text-white p-4 rounded-lg");
console.log(result.className); // "windi-abc123"
console.log(result.styleSheet.build()); // CSS with .windi-abc123 selector

// Custom prefix and class name
const customResult = processor.compile(
  "flex items-center justify-between",
  "my-prefix-",
  false,
  false,
  undefined,
  "navigation-bar"
);
console.log(customResult.className); // "navigation-bar"

/**
 * Generates preflight/base styles for CSS reset
 * @param html - HTML content to analyze for used classes
 * @param includeBase - Whether to include base styles
 * @param includeGlobal - Whether to include global styles
 * @param includePlugins - Whether to include plugin-provided base styles
 * @param ignoreProcessed - Whether to skip if already processed
 * @returns StyleSheet with preflight styles
 */
preflight(
  html?: string,
  includeBase?: boolean,
  includeGlobal?: boolean,
  includePlugins?: boolean,
  ignoreProcessed?: boolean
): StyleSheet;

// Generate full preflight
const preflightStyles = processor.preflight();
console.log(preflightStyles.build());

// Generate preflight for specific HTML
const htmlContent = '<div class="container mx-auto p-4">Content</div>';
const contextualPreflight = processor.preflight(htmlContent, true, true, true);

// Generate only base styles
const baseOnly = processor.preflight(undefined, true, false, false);

/**
 * Processes attributify syntax from HTML attributes
 * @param attrs - Object with attribute names as keys and values as strings or arrays
 * @param ignoreProcessed - Whether to skip already processed attributes
 * @returns Object with success/ignored arrays and generated StyleSheet
 */
attributify(
  attrs: Record<string, string | string[]>,
  ignoreProcessed?: boolean
): AttributifyResult;

interface AttributifyResult {
  success: string[];
  ignored: string[];
  styleSheet: StyleSheet;
}

// Process attributify attributes
const attrs = {
  "bg": "blue-500",
  "text": "white",
  "p": "4",
  "hover:bg": "blue-600"
};

const result = processor.attributify(attrs);
console.log(result.success); // Attribute selectors that were processed
console.log(result.styleSheet.build()); // Generated CSS with attribute selectors

/**
 * Validates class names and returns detailed results
 * @param classNames - Space-separated string of class names to validate
 * @returns Object with arrays of successful and ignored validations with details
 */
validate(classNames: string): ValidationResult;

interface ValidationResult {
  success: Validata[];
  ignored: Validata[];
}

interface Validata {
  className: string;
  type: 'utility' | 'group' | 'alias';
  variants: string[];
  content: string | string[];
  raw: string;
  important: boolean;
  parent?: Element;
}

const validation = processor.validate("bg-blue-500 hover:text-white invalid-class");
console.log(validation.success); // Detailed info about valid classes
console.log(validation.ignored); // Detailed info about invalid classes

validation.success.forEach(item => {
  console.log(`Valid: ${item.className}, Type: ${item.type}, Variants: ${item.variants.join(':')}`);
});

/**
 * Gets configuration value by path
 * @param path - Dot-separated path to configuration value
 * @param defaultValue - Default value if path doesn't exist
 * @returns Configuration value or default
 */
config(path: string, defaultValue?: any): any;

/**
 * Gets theme value by path
 * @param path - Dot-separated path to theme value
 * @param defaultValue - Default value if path doesn't exist
 * @returns Theme value or default
 */
theme(path: string, defaultValue?: any): any;

/**
 * Loads new configuration into the processor
 * @param config - Configuration object to load
 * @returns Resolved configuration
 */
loadConfig(config?: Config): Config;

/**
 * Resolves configuration with presets
 * @param config - User configuration
 * @param presets - Preset configurations
 * @returns Resolved configuration
 */
resolveConfig(config: Config | undefined, presets: Config): Config;

// Access configuration values
const separator = processor.config('separator', ':');
const primaryColor = processor.theme('colors.primary', '#000000');

// Load new configuration
processor.loadConfig({
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      }
    }
  }
});

/**
 * Complete resolved configuration object
 */
get allConfig(): Config;

/**
 * Complete resolved theme object
 */
get allTheme(): Theme;

/**
 * Array of all available variant names
 */
get allVariant(): string[];

const config = processor.allConfig;
const theme = processor.allTheme;
const availableVariants = processor.allVariant;

console.log('Available variants:', availableVariants);

/**
 * Loads new configuration into the processor
 * @param config - Configuration object to load
 * @returns Loaded configuration
 */
loadConfig(config?: Config): Config;

/**
 * Resolves configuration with presets and inheritance
 * @param config - User configuration
 * @param presets - Base preset configuration
 * @returns Resolved configuration
 */
resolveConfig(config: Config | undefined, presets: Config): Config;

/**
 * Validates class names and returns detailed validation results
 * @param classNames - Space-separated class names to validate
 * @returns Validation results with success and error details
 */
validate(classNames: string): ValidationResult;

/**
 * Tests if a class name is valid
 * @param className - Single class name to test
 * @param prefix - Optional prefix to consider
 * @returns True if class name is valid
 */
test(className: string, prefix?: string): boolean;

/**
 * Checks if a core plugin is enabled
 * @param path - Plugin path to check
 * @returns True if plugin is enabled
 */
corePlugins(path: string): boolean;

/**
 * Gets variants for a specific utility
 * @param path - Utility path
 * @param defaultValue - Default variants if none found
 * @returns Array of variant names
 */
variants(path: string, defaultValue?: string[]): string[];

interface ValidationResult {
  success: Validata[];
  ignored: Validata[];
}

interface Validata {
  className: string;
  raw: string;
  start: number;
  end: number;
  variants: string[];
  content?: Element[] | string;
  func?: string;
  type: 'group' | 'func' | 'utility' | 'alias';
  important: boolean;
  parent?: Element;
}

/**
 * Removes configured prefix from class name
 * @param className - Class name to process
 * @returns Class name without prefix
 */
removePrefix(className: string): string;

/**
 * Marks a style as important based on configuration
 * @param style - Style object to mark
 * @param force - Force importance (boolean or selector string)
 * @returns Modified style object
 */
markAsImportant(style: Style, force?: boolean | string): Style;

/**
 * Wraps styles with variant conditions
 * @param variants - Array of variant names to apply
 * @param styles - Style or array of styles to wrap
 * @returns Array of wrapped styles
 */
wrapWithVariants(variants: string[], styles: Style | Style[]): Style[] | undefined;

/**
 * Escapes CSS selector characters
 * @param selector - Selector string to escape
 * @returns Escaped selector
 */
e(selector: string): string;

/**
 * Adds configured prefix to selector
 * @param selector - Selector to prefix
 * @returns Prefixed selector
 */
prefix(selector: string): string;

/**
 * Serializes current configuration to string
 * @returns Configuration as executable JavaScript string
 */
dumpConfig(): string;

/**
 * Plugin utilities instance for programmatic plugin development
 */
readonly pluginUtils: PluginUtils;

/**
 * Variant utilities instance for custom variant creation
 */
readonly variantUtils: VariantUtils;

interface PluginUtils {
  addDynamic(key: string, generator: UtilityGenerator, options?: PluginUtilOptions): UtilityGenerator;
  addUtilities(utilities: Record<string, any>, options?: PluginUtilOptions): Style[];
  addComponents(components: Record<string, any>, options?: PluginUtilOptions): Style[];
  addBase(baseStyles: Record<string, any>): Style[];
  addVariant(name: string, generator: VariantGenerator): Style | Style[];
  e(selector: string): string;
  prefix(selector: string): string;
  config(path: string, defaultValue?: any): any;
  theme(path: string, defaultValue?: any): any;
  variants(path: string, defaultValue?: string[]): string[];
}

interface VariantUtils {
  modifySelectors(modifier: (args: { className: string }) => string): Style;
  atRule(name: string): Style;
  pseudoClass(name: string): Style;
  pseudoElement(name: string): Style;
  parent(name: string): Style;
  child(name: string): Style;
}

// Advanced validation
const validation = processor.validate("hover:bg-blue-500 invalid-class md:text-lg");
console.log(validation.success); // Valid classes with metadata
console.log(validation.ignored); // Invalid classes with reasons

// Configuration management
const newConfig = processor.loadConfig({
  theme: { extend: { colors: { custom: '#123456' } } }
});

// Plugin utilities access
processor.pluginUtils.addUtilities({
  '.custom-utility': { color: 'red' }
});

// Variant wrapping
const baseStyle = new Style('.test', new Property('color', 'blue'));
const wrappedStyles = processor.wrapWithVariants(['hover', 'md'], baseStyle);

// Configuration serialization
const configString = processor.dumpConfig();
console.log(configString); // JavaScript configuration export