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

configuration.mddocs/

Configuration

Configuration management, default options, and utility functions for PurgeCSS operations.

Capabilities

Default Options

Pre-configured default options providing baseline PurgeCSS behavior.

/**
 * Default PurgeCSS configuration options
 */
const defaultOptions: Options;

Default Configuration Values:

const defaultOptions: Options = {
  css: [],
  content: [],
  defaultExtractor: (content: string): ExtractorResult =>
    content.match(/[A-Za-z0-9_-]+/g) || [],
  extractors: [],
  fontFace: false,
  keyframes: false,
  rejected: false,
  rejectedCss: false,
  sourceMap: false,
  stdin: false,
  stdout: false,
  variables: false,
  safelist: {
    standard: [],
    deep: [],
    greedy: [],
    variables: [],
    keyframes: [],
  },
  blocklist: [],
  skippedContentGlobs: [],
  dynamicAttributes: [],
};

Configuration File Loading

Load PurgeCSS configuration from external files.

/**
 * Load the configuration file from the path
 * @param configFile - Path of the config file (defaults to 'purgecss.config.js')
 * @returns The options from the configuration file
 * @throws Error if the configuration file cannot be imported
 */
function setOptions(configFile?: string): Promise<Options>;

Usage Examples:

import { setOptions } from "purgecss";

// Load default config file (purgecss.config.js)
const options = await setOptions();

// Load custom config file
const customOptions = await setOptions('./my-purgecss.config.js');

// Use with PurgeCSS
const results = await new PurgeCSS().purge(options);

Example Configuration File (purgecss.config.js):

module.exports = {
  content: ['src/**/*.html', 'src/**/*.js', 'src/**/*.vue'],
  css: ['dist/**/*.css'],
  fontFace: true,
  keyframes: true,
  variables: true,
  safelist: {
    standard: ['btn', 'navbar'],
    deep: [/^theme-/],
    greedy: [/^data-/]
  },
  extractors: [
    {
      extractor: (content) => content.match(/[A-Za-z0-9_:-]+/g) || [],
      extensions: ['vue']
    }
  ]
};

Safelist Standardization

Utility function to normalize user-defined safelist configurations into consistent format.

/**
 * Format the user defined safelist into a standardized safelist object
 * @param userDefinedSafelist - User defined safelist (array or complex object)
 * @returns Formatted safelist object with all properties defined
 */
function standardizeSafelist(
  userDefinedSafelist?: UserDefinedSafelist
): Required<ComplexSafelist>;

Usage Examples:

import { standardizeSafelist } from "purgecss";

// Array format conversion
const standardized1 = standardizeSafelist(['btn', 'navbar']);
// Result: { standard: ['btn', 'navbar'], deep: [], greedy: [], variables: [], keyframes: [] }

// Complex object format
const standardized2 = standardizeSafelist({
  standard: ['btn'],
  deep: [/^theme-/]
});
// Result: { standard: ['btn'], deep: [/^theme-/], greedy: [], variables: [], keyframes: [] }

Extractor Merging

Utility function for combining multiple extractor results into a single set.

/**
 * 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;

Usage Example:

import { mergeExtractorSelectors, PurgeCSS } from "purgecss";

const purgeCSS = new PurgeCSS();

// Extract from different sources
const htmlSelectors = await purgeCSS.extractSelectorsFromFiles(
  ['src/**/*.html'], 
  htmlExtractors
);
const jsSelectors = await purgeCSS.extractSelectorsFromFiles(
  ['src/**/*.js'], 
  jsExtractors
);

// Merge all selectors
const allSelectors = mergeExtractorSelectors(htmlSelectors, jsSelectors);

// Use merged selectors for CSS purging
const results = await purgeCSS.getPurgedCSS(['styles/*.css'], allSelectors);

Configuration Constants

File and Annotation Constants

Built-in constants for configuration file names and CSS comment annotations.

/** Default configuration file name */
const CONFIG_FILENAME = "purgecss.config.js";

/** CSS comment annotations for PurgeCSS control */
const IGNORE_ANNOTATION_CURRENT = "purgecss ignore current";
const IGNORE_ANNOTATION_NEXT = "purgecss ignore";
const IGNORE_ANNOTATION_START = "purgecss start ignore";
const IGNORE_ANNOTATION_END = "purgecss end ignore";

/** Error message for configuration loading failures */
const ERROR_CONFIG_FILE_LOADING = "Error loading the config file";

CSS Ignore Annotations

PurgeCSS supports CSS comments for controlling selector processing:

/* purgecss ignore current */
.btn-special {
  /* This rule will be ignored by PurgeCSS */
}

/* purgecss ignore */
.next-rule {
  /* The next rule after this comment will be ignored */
}

/* purgecss start ignore */
.ignored-block-1 {
  /* All rules between start and end ignore will be preserved */
}
.ignored-block-2 {
  /* This is also preserved */
}
/* purgecss end ignore */

Advanced Configuration Patterns

Environment-Specific Configuration

// purgecss.production.config.js
module.exports = {
  content: ['dist/**/*.html', 'dist/**/*.js'],
  css: ['dist/**/*.css'],
  fontFace: true,
  keyframes: true,
  variables: true,
  rejected: false,
  rejectedCss: false
};

// purgecss.development.config.js  
module.exports = {
  content: ['src/**/*.html', 'src/**/*.js'],
  css: ['src/**/*.css'],
  fontFace: false,
  keyframes: false,
  variables: false,
  rejected: true,    // Log rejected selectors in development
  rejectedCss: true  // Include rejected CSS for debugging
};

Dynamic Configuration

import { setOptions, PurgeCSS } from "purgecss";

async function createDynamicConfig(environment: string) {
  const baseConfig = await setOptions('./base.config.js');
  
  if (environment === 'production') {
    return {
      ...baseConfig,
      fontFace: true,
      keyframes: true,
      variables: true,
      sourceMap: false
    };
  }
  
  return {
    ...baseConfig,
    rejected: true,
    rejectedCss: true,
    sourceMap: true
  };
}

const config = await createDynamicConfig(process.env.NODE_ENV);
const results = await new PurgeCSS().purge(config);

Skip Patterns Configuration

const options = {
  content: ['src/**/*'],
  css: ['dist/**/*.css'],
  skippedContentGlobs: [
    'src/vendor/**/*',      // Skip vendor files
    'src/**/*.min.js',      // Skip minified files
    'src/test/**/*',        // Skip test files
    'node_modules/**/*'     // Skip node_modules
  ]
};

This configuration prevents PurgeCSS from scanning certain files or directories that might contain irrelevant or problematic content for selector extraction.

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