Parser System

/**
 * Creates an HTML parser instance
 * @param html - Optional HTML content to parse
 */
constructor(html?: string);

/**
 * Parses HTML attributes from the content
 * @returns Array of attribute objects with metadata
 */
parseAttrs(): Attr[];

/**
 * Parses class attributes from HTML content, supports template literals
 * @returns Array of class name objects with position information
 */
parseClasses(): ClassName[];

/**
 * Extracts all HTML tag names from the content
 * @returns Array of unique tag names
 */
parseTags(): string[];

import { HTMLParser } from "windicss/utils/parser";

// Parse HTML for classes
const html = '<div class="bg-blue-500 text-white p-4">Content</div>';
const parser = new HTMLParser(html);

const classes = parser.parseClasses();
// Returns: [{ result: "bg-blue-500 text-white p-4", start: 12, end: 36 }]

const attributes = parser.parseAttrs();
// Returns all attributes with position tracking

const tags = parser.parseTags();
// Returns: ["div"]

/**
 * Creates a CSS parser instance
 * @param css - Optional CSS content to parse
 * @param processor - Optional WindiCSS processor for advanced features
 */
constructor(css?: string, processor?: Processor);

/**
 * Parses CSS content into structured StyleSheet
 * @param css - CSS string to parse (defaults to instance CSS)
 * @param parent - Parent selector or at-rule for nested parsing
 * @param parentType - Type of parent context
 * @returns StyleSheet containing parsed styles
 */
parse(css?: string, parent?: string, parentType?: 'atRule' | 'selector'): StyleSheet;

import { CSSParser } from "windicss/utils/parser";
import Processor from "windicss";

// Parse CSS with WindiCSS features
const css = `
  .custom {
    @apply bg-blue-500 text-white;
    color: theme('colors.red.500');
  }
`;

const processor = new Processor();
const parser = new CSSParser(css, processor);
const styleSheet = parser.parse();

// Parse nested CSS
const nestedCSS = `
  .parent {
    .child { color: red; }
  }
`;
const nestedStyles = parser.parse(nestedCSS);

/**
 * Creates a class parser instance
 * @param classNames - Space-separated class names string to parse
 * @param separator - Variant separator character (default: ':')
 * @param variants - Array of valid variant names
 */
constructor(classNames?: string, separator?: string, variants?: string[]);

/**
 * Parses class names into structured elements
 * @param removeDuplicated - Whether to remove duplicate class names
 * @returns Array of parsed element objects
 */
parse(removeDuplicated?: boolean): Element[];

import { ClassParser } from "windicss/utils/parser";

// Parse utility classes with variants
const classNames = "hover:bg-blue-500 md:text-lg !important:p-4";
const variants = ["hover", "md", "important"];
const parser = new ClassParser(classNames, ":", variants);

const elements = parser.parse();
// Returns structured Element objects with variants and metadata

// Parse grouped classes
const groupedClasses = "hover:(bg-blue-500 text-white) md:p-4";
const groupParser = new ClassParser(groupedClasses);
const groupedElements = groupParser.parse();

interface Attr {
  raw: string;              // Raw attribute string
  key: string;              // Attribute name
  value: string | string[]; // Attribute value(s)
  start: number;            // Start position in source
  end: number;              // End position in source
}

interface ClassName {
  result: string;  // Extracted class string content
  start: number;   // Start position in source
  end: number;     // End position in source
}

interface Element {
  raw: string;                         // Original raw class string
  start: number;                       // Start position in source
  end: number;                         // End position in source
  variants: string[];                  // Applied variants (e.g., ['hover', 'md'])
  content?: Element[] | string;        // Parsed content (nested for groups)
  func?: string;                       // Function name if applicable
  type: 'group' | 'func' | 'utility' | 'alias';  // Element type
  important: boolean;                  // Whether !important is applied
}

interface ParsedElement {
  tag: string;
  attributes: Attr[];
  children: ParsedElement[];
}

interface ParsedCSS {
  styles: Style[];
  variables: Record<string, unknown>;
}

import Processor from "windicss";

const processor = new Processor();

// HTMLParser integration - extract classes from HTML
const htmlClasses = processor.extract(htmlContent);

// ClassParser integration - used internally by processor methods
const result = processor.interpret("hover:bg-blue-500 md:text-lg");
// Uses ClassParser internally to parse class names

// CSSParser integration - process CSS with WindiCSS features
const styles = processor.preflight(htmlContent);
// Uses various parsers to extract and process content

import { ClassParser } from "windicss/utils/parser";

// Define custom variants
const customVariants = ["hover", "focus", "active", "custom"];
const parser = new ClassParser("custom:bg-red-500", ":", customVariants);
const elements = parser.parse();

import { CSSParser } from "windicss/utils/parser";
import Processor from "windicss";

const css = `
  .btn {
    @apply px-4 py-2 rounded;
    @variants hover, focus {
      @apply bg-blue-600;
    }
  }
`;

const processor = new Processor();
const parser = new CSSParser(css, processor);
const processed = parser.parse();

import { HTMLParser } from "windicss/utils/parser";

const html = `
  <div class="bg-blue-500" w:bg="red-500" data-theme="dark">
    <span className={clsx('text-white', isActive && 'font-bold')}>
      Content
    </span>
  </div>
`;

const parser = new HTMLParser(html);
const attrs = parser.parseAttrs();
// Extracts all attributes including WindiCSS attributify syntax