postcss.md

title	lang	meta
PostCSS	en-US	name content description PurgeCSS is a tool for removing CSS that you're not actually using in your project. You can use it with postcss with a plugin. itemprop content description PurgeCSS is a tool for removing CSS that you're not actually using in your project. You can use it with postcss with a plugin. property content og:url https://purgecss.com/plugins/postcss property content og:site_name purgecss.com property content og:type website property content og:image https://i.imgur.com/UEiUiJ0.png property content og:locale en_US property content og:title Remove unused CSS - PurgeCSS property content og:description PurgeCSS is a tool for removing CSS that you're not actually using in your project. You can use it with postcss with a plugin.

PostCSS

::: warning If you are using PostCSS 7, install @fullhuman/postcss-purgecss 3.0.0: npm i -D @fullhuman/postcss-purgecss@3.0.0. From version 4.0, it is compatible with PostCSS >=8 only. :::

Installation

npm i -D @fullhuman/postcss-purgecss postcss

Usage

In postcss.config.js:

const purgecss = require('@fullhuman/postcss-purgecss')

module.exports = {
  plugins: [
    purgecss({
      content: ['./**/*.html']
    })
  ]
}

Using PostCSS API:

const purgecss = require('@fullhuman/postcss-purgecss')
postcss([
  purgecss({
    content: ['./src/**/*.html']
  })
])

See PostCSS documentation for examples for your environment.

Options

All of the options of PurgeCSS are available to use with the plugins. You will find below the type definition of the main options available. For the complete list, go to the PurgeCSS documentation website.

export interface UserDefinedOptions {
  content?: Array<string | RawContent>;
  contentFunction?: (sourceFile: string) => Array<string | RawContent>;
  defaultExtractor?: ExtractorFunction;
  extractors?: Array<Extractors>;
  fontFace?: boolean;
  keyframes?: boolean;
  output?: string;
  rejected?: boolean;
  stdin?: boolean;
  stdout?: boolean;
  variables?: boolean;
  safelist?: UserDefinedSafelist;
  blocklist?: StringRegExpArray;
}

interface RawContent {
  extension: string
  raw: string
}

interface RawCSS {
  raw: string
}

type StringRegExpArray = Array<RegExp | string>;