Content Extraction

/**
 * Function type for extracting selectors from content
 * @param content - Content string to analyze
 * @returns Extracted selectors as detailed object or string array
 */
type ExtractorFunction<T = string> = (content: T) => ExtractorResult;

type ExtractorResult = ExtractorResultDetailed | string[];

interface ExtractorResultDetailed {
  /** HTML/CSS attributes */
  attributes: {
    /** Attribute names (e.g., 'class', 'id', 'data-toggle') */
    names: string[];
    /** Attribute values */
    values: string[];
  };
  /** CSS class names */
  classes: string[];
  /** CSS ID selectors */
  ids: string[];
  /** HTML tag names */
  tags: string[];
  /** Selectors that couldn't be categorized */
  undetermined: string[];
}

interface Extractors {
  /** File extensions this extractor handles (e.g., ['.html', '.vue']) */
  extensions: string[];
  /** Extractor function for processing content */
  extractor: ExtractorFunction;
}

import { PurgeCSS, ExtractorFunction } from "purgecss";

// Custom extractor for Vue files
const vueExtractor: ExtractorFunction = (content: string) => {
  const classes = content.match(/class="([^"]+)"/g) || [];
  return classes.map(cls => cls.replace(/class="([^"]+)"/, '$1').split(' ')).flat();
};

// Configure extractor
const extractors = [{
  extensions: ['.vue'],
  extractor: vueExtractor
}];

const results = await new PurgeCSS().purge({
  content: ['src/**/*.vue'],
  css: ['styles/*.css'],
  extractors
});

/**
 * ExtractorResultSets constructor
 * @param er - Initial extractor result to populate the sets
 */
constructor(er: ExtractorResult);

/**
 * Merge another extractor result or result set into this one
 * @param that - ExtractorResult or ExtractorResultSets to merge
 * @returns This instance for method chaining
 */
merge(that: ExtractorResult | ExtractorResultSets): this;

/**
 * Check if a CSS class name exists in the extracted selectors
 * @param name - Class name to check
 * @returns True if class is found
 */
hasClass(name: string): boolean;

/**
 * Check if a CSS ID selector exists in the extracted selectors
 * @param id - ID selector to check
 * @returns True if ID is found
 */
hasId(id: string): boolean;

/**
 * Check if an HTML tag name exists in the extracted selectors
 * @param tag - Tag name to check
 * @returns True if tag is found
 */
hasTag(tag: string): boolean;

/**
 * Check if an attribute name exists in the extracted selectors
 * @param name - Attribute name to check
 * @returns True if attribute name is found
 */
hasAttrName(name: string): boolean;

/**
 * Check if an attribute value exists in the extracted selectors
 * @param value - Attribute value to check
 * @returns True if attribute value is found
 */
hasAttrValue(value: string): boolean;

/**
 * Check if any attribute values start with the given prefix
 * @param prefix - Prefix to match against attribute values
 * @returns True if matching prefix is found
 */
hasAttrPrefix(prefix: string): boolean;

/**
 * Check if any attribute values end with the given suffix
 * @param suffix - Suffix to match against attribute values
 * @returns True if matching suffix is found
 */
hasAttrSuffix(suffix: string): boolean;

/**
 * Check if any attribute values contain the given substring
 * @param substr - Substring to match (supports space-separated words)
 * @returns True if matching substring is found
 */
hasAttrSubstr(substr: string): boolean;

import { PurgeCSS, ExtractorResultSets } from "purgecss";

const purgeCSS = new PurgeCSS();

// Extract selectors from files
const selectors = await purgeCSS.extractSelectorsFromFiles(
  ['src/**/*.html', 'src/**/*.js'],
  [{ extensions: ['.html', '.js'], extractor: defaultExtractor }]
);

// Query the extracted selectors
if (selectors.hasClass('btn-primary')) {
  console.log('btn-primary class found in content');
}

if (selectors.hasAttrPrefix('data-')) {
  console.log('Data attributes found in content');
}

// Extract from raw content
const rawSelectors = await purgeCSS.extractSelectorsFromString([
  { raw: '<div class="hero-banner" id="main"></div>', extension: 'html' }
], extractors);

// Merge multiple result sets
const combinedSelectors = new ExtractorResultSets([])
  .merge(selectors)
  .merge(rawSelectors);

/**
 * Merge multiple extractor selectors into a single result set
 * @param extractors - Variable number of ExtractorResultDetailed or ExtractorResultSets
 * @returns Merged ExtractorResultSets containing all selectors
 */
function mergeExtractorSelectors(
  ...extractors: (ExtractorResultDetailed | ExtractorResultSets)[]
): ExtractorResultSets;

import { mergeExtractorSelectors } from "purgecss";

const htmlSelectors = await purgeCSS.extractSelectorsFromFiles(['*.html'], htmlExtractors);
const jsSelectors = await purgeCSS.extractSelectorsFromFiles(['*.js'], jsExtractors);

const combinedSelectors = mergeExtractorSelectors(htmlSelectors, jsSelectors);

const defaultExtractor = (content: string): ExtractorResult => 
  content.match(/[A-Za-z0-9_-]+/g) || [];