PostCSS plugin for PurgeCSS

Usage no npm install needed!

<script type="module">
  import afzalsayed96PostcssPurgecss from 'https://cdn.skypack.dev/@afzalsayed96/postcss-purgecss';


PostCSS Purgecss

David (path) Dependabot npm npm GitHub

PostCSS plugin for PurgeCSS.


npm i -D @fullhuman/postcss-purgecss


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

See PostCSS docs for examples for your environment.


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

content (required or use contentFunction instead)

Type: Array<string>

You can specify content that should be analyzed by Purgecss with an array of filenames or globs. The files can be HTML, Pug, Blade, etc.

contentFunction (as alternative to content)

Type: (sourceInputFile: string) => Array<string>

The function receives the current source input file. With this you may provide a specific array of globs for each input. E.g. for an angular application only scan the components template counterpart for every component scss file:

  contentFunction: (sourceInputFileName: string) => {
    if (/component\.scss$/.test(sourceInputFileName))
      return [sourceInputFileName.replace(/scss$/, 'html')]
      return ['./src/**/*.html']


Type: Array<Object>

Purgecss can be adapted to suit your needs. If you notice a lot of unused CSS is not being removed, you might want to use a custom extractor. More information about extractors here.


Type: Array<string>

You can whitelist selectors to stop Purgecss from removing them from your CSS. This can be accomplished with the options whitelist and whitelistPatterns.


Type: Array<RegExp>

You can whitelist selectors based on a regular expression with whitelistPatterns.


Type: boolean Default value: false

If true, purged selectors will be captured and rendered as PostCSS messages. Use with a PostCSS reporter plugin like postcss-reporter to print the purged selectors to the console as they are processed.


Type: boolean Default value: false

If you are using a CSS animation library such as animate.css, you can remove unused keyframes by setting the keyframes option to true.


Type: boolean Default value: false

If there are any unused @font-face rules in your css, you can remove them by setting the fontFace option to true.


Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.


postcss-purgecss use SemVer for versioning.


This project is licensed under the MIT License - see the LICENSE file for details.