CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-purgecss

Remove unused css selectors

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

core-purging.mddocs/

Core CSS Purging

The main PurgeCSS class provides comprehensive CSS optimization functionality with selector extraction, matching, and removal operations.

Capabilities

PurgeCSS Class

Main class for CSS purging operations providing the primary API interface.

/**
 * Class used to instantiate PurgeCSS and can then be used to purge CSS files.
 */
class PurgeCSS {
  options: Options;
  selectorsRemoved: Set<string>;
  removedNodes: postcss.Node[];
  variablesStructure: VariablesStructure;
}

Primary Purge Method

Main method to remove unused CSS from stylesheets based on content analysis.

/**
 * Remove unused CSS
 * @param userOptions - PurgeCSS options or path to the configuration file
 * @returns Promise resolving to array of purged CSS results
 */
purge(userOptions?: UserDefinedOptions | string): Promise<ResultPurge[]>;

Usage Examples:

import { PurgeCSS } from "purgecss";

// Using options object
const purgeCSSResults = await new PurgeCSS().purge({
  content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
  css: ['css/app.css']
});

// Using configuration file
const purgeCSSResults = await new PurgeCSS().purge('./purgecss.config.js');

// Using custom configuration file path
const purgeCSSResults = await new PurgeCSS().purge('./custom-purgecss.config.js');

File-Based Selector Extraction

Extract selectors from content files using glob patterns or file paths.

/**
 * Extract the selectors present in the files using a PurgeCSS extractor
 * @param files - Array of files path or glob pattern
 * @param extractors - Array of extractors
 * @returns Promise resolving to extracted selector sets
 */
extractSelectorsFromFiles(files: string[], extractors: Extractors[]): Promise<ExtractorResultSets>;

String-Based Selector Extraction

Extract selectors from raw content strings with specified file extensions.

/**
 * Extract the selectors present in the passed string using a PurgeCSS extractor
 * @param content - Array of content with raw strings and extensions
 * @param extractors - Array of extractors
 * @returns Promise resolving to extracted selector sets
 */
extractSelectorsFromString(content: RawContent[], extractors: Extractors[]): Promise<ExtractorResultSets>;

CSS Processing

Get purged CSS from CSS sources using extracted selectors.

/**
 * Get the purged version of the css based on the files
 * @param cssOptions - css options, files or raw strings
 * @param selectors - set of extracted css selectors
 * @returns Promise resolving to array of purged CSS results
 */
getPurgedCSS(cssOptions: Array<string | RawCSS>, selectors: ExtractorResultSets): Promise<ResultPurge[]>;

AST Walking

Walk through CSS Abstract Syntax Tree and remove unused CSS rules.

/**
 * Walk through the CSS AST and remove unused CSS
 * @param root - root node of the postcss AST
 * @param selectors - selectors used in content files
 */
walkThroughCSS(root: PostCSSRoot, selectors: ExtractorResultSets): void;

Specialized Removal Methods

Remove specific types of unused CSS constructs.

/**
 * Remove unused CSS variables
 */
removeUnusedCSSVariables(): void;

/**
 * Remove unused font-faces
 */
removeUnusedFontFaces(): void;

/**
 * Remove unused keyframes
 */
removeUnusedKeyframes(): void;

Configuration Options

UserDefinedOptions Interface

Main options interface for configuring PurgeCSS behavior.

interface UserDefinedOptions {
  /** Array of content files/globs or raw content objects to analyze */
  content: Array<string | RawContent>;
  /** Array of CSS files/globs or raw CSS objects to purge */
  css: Array<string | RawCSS>;
  /** Default extractor function for content without specific extractor */
  defaultExtractor?: ExtractorFunction;
  /** Custom extractors for specific file types */
  extractors?: Array<Extractors>;
  /** Enable unused @font-face removal */
  fontFace?: boolean;
  /** Enable unused @keyframes removal */
  keyframes?: boolean;
  /** Output directory for purged CSS files */
  output?: string;
  /** Include rejected selectors in results */
  rejected?: boolean;
  /** Include rejected CSS content in results */
  rejectedCss?: boolean;
  /** Source map generation options */
  sourceMap?: boolean | (postcss.SourceMapOptions & { to?: string });
  /** Read CSS from stdin */
  stdin?: boolean;
  /** Output CSS to stdout */
  stdout?: boolean;
  /** Enable unused CSS variables removal */
  variables?: boolean;
  /** Safelist configuration for protected selectors */
  safelist?: UserDefinedSafelist;
  /** Blocklist configuration for forced removal */
  blocklist?: StringRegExpArray;
  /** Glob patterns to skip during content scanning */
  skippedContentGlobs?: Array<string>;
  /** Custom CSS attribute selectors to preserve */
  dynamicAttributes?: string[];
}

Options Interface

Internal options interface with all properties defined (used internally by PurgeCSS).

interface Options {
  content: Array<string | RawContent>;
  css: Array<string | RawCSS>;
  defaultExtractor: ExtractorFunction;
  extractors: Array<Extractors>;
  fontFace: boolean;
  keyframes: boolean;
  output?: string;
  rejected: boolean;
  rejectedCss: boolean;
  sourceMap: boolean | (postcss.SourceMapOptions & { to?: string });
  stdin: boolean;
  stdout: boolean;
  variables: boolean;
  safelist: Required<ComplexSafelist>;
  blocklist: StringRegExpArray;
  skippedContentGlobs: Array<string>;
  dynamicAttributes: string[];
}

Result Types

ResultPurge Interface

Result object returned by purge operations containing processed CSS and metadata.

interface ResultPurge {
  /** Purged CSS content */
  css: string;
  /** Source map (empty if sourceMap inline option not set to false) */
  sourceMap?: string;
  /** Rejected CSS content (if rejectedCss option enabled) */
  rejectedCss?: string;
  /** Original file path (for file-based CSS) */
  file?: string;
  /** Array of rejected selectors (if rejected option enabled) */
  rejected?: string[];
}

Content Input Types

interface RawContent<T = string> {
  /** File extension for content type detection */
  extension: string;
  /** Raw content string */
  raw: T;
}

interface RawCSS {
  /** Raw CSS content string */
  raw: string;
  /** Optional name for the CSS content */
  name?: string;
}

PostCSS Integration

type PostCSSRoot = postcss.Root;

Install with Tessl CLI

npx tessl i tessl/npm-purgecss

docs

configuration.md

content-extraction.md

core-purging.md

css-variables.md

index.md

safelist-configuration.md

tile.json