# With PostCSS

## Installation

```
npm i -D @fullhuman/postcss-purgecss
```

## Usage

In `postcss.config.js`:

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

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

Using PostCSS API:

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

See \[PostCSS] docs for examples for your environment.

## Options

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](https://www.purgecss.com/configuration.html#options).

### `content` (**required**)

Type: `string | Object`

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.

### `extractors`

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](https://www.purgecss.com/extractors.html).

### `whitelist`

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.

### `whitelistPatterns`

Type: `Array<RegExp>`

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

### `keyframes`

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.

#### `fontFace`

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.

## Contributing

Please read [CONTRIBUTING.md](https://github.com/FullHuman/purgecss-docs/tree/d815d5b9ea824eda5d933e52bd0691df788314f9/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.

## Versioning

postcss-purgecss use [SemVer](http://semver.org/) for versioning.

## License

This project is licensed under the MIT License - see the [LICENSE](https://github.com/FullHuman/purgecss-docs/tree/d815d5b9ea824eda5d933e52bd0691df788314f9/LICENSE/README.md) file for details.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v1.purgecss.com/with-postcss.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.