Remove unused css selectors
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Configuration management, default options, and utility functions for PurgeCSS operations.
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: [],
};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']
}
]
};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: [] }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);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";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 */// 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
};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);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