# purifycss-webpack-plugin

> PurifyCSS plugin for webpack

Latest version **2.0.3** (published 2016-02-12) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install purifycss-webpack-plugin
pnpm add purifycss-webpack-plugin
yarn add purifycss-webpack-plugin
bun add purifycss-webpack-plugin
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2016-02-12 |
| First published | 2016-01-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 762 |
| Author | Kenny Tran, Matthew Rourke, Phoebe Li, Kevin "Ingwie Phoenix" Ingwersen |
| Maintainers | ingwiephoenix |
| Keywords | webpack, uncss, plugin, purify |

## Links

- npm: https://www.npmjs.com/package/purifycss-webpack-plugin
- Repository: https://github.com/purifycss/purifycss-webpack-plugin
- Issues: https://github.com/purifycss/purifycss-webpack-plugin/issues
- npm.io page: https://npm.io/package/purifycss-webpack-plugin

## Dependencies (3)

- [glob](https://npm.io/package/glob.md) ^5.0.15
- [purify-css](https://npm.io/package/purify-css.md) ^1.1.1
- [webpack-sources](https://npm.io/package/webpack-sources.md) ^0.1.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 2.0.3 (latest) — 2016-02-12
- 2.0.2 — 2016-02-09
- 2.0.1 — 2016-01-13
- 2.0.0 — 2016-01-13

## README

# PurifyCSS WebPack Plugin

This is a plugin for WebPack that utilizes PurifyCSS to clean your CSS. Its dead simple, but it requires you to be prepared.

So, let's go and clean some style!

## IMPORTANT: 1.x to 2.x - new implementation.
This release introduces **breaking changes** from `1.x` to `2.x` - and a lot of them at that. The new implementation is now based on @IngwiePhoenix's [previous implementation](https://github.com/DragonsInn/bird3-purifycss-webpack-plugin). See the config options and configuration snippets below!

You can still use the older version by using the `PurifyCSS/Legacy` branch, or installing `purifycss-loader` - it still uses the old `1.x` releases, but is **deprecated**.

## Dependencies
- WebPack must be already installed, so that this plugin can use it's library parts.
- You **should** use the `extract-text-webpack-plugin` - although, you are not enforced to. Without any CSS file being emitted as an asset, this plugin will not do a thing except idle about inside the compiler. You can also use the `file` plugin to drop a special CSS file into your output folder, but I highly recommend the extract plugin.

## Use
First, get it:

    npm install --save purifycss-webpack-plugin

Let's assume you have a basic webpack configuration like so:

```javascript
var extractor = require("extract-text-webpack-plugin");
module.exports = {
    entry: "app.js",
    output: {
        // ...
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: extractor.loader("style","css") }
        ]
    },
    plugins: [
        new extractor("[name].css")
    ]
}
```

Now, all we add, is another plugin definition. Please note: Plugins seem to be executed in order, so make sure that this plugin comes _after_ the extract plugin, if you use it.

```javascript
var extractor = require("extract-text-webpack-plugin");
var purify = require("purifycss-webpack-plugin");
module.exports = {
    entry: "app.js",
    output: {
        // ...
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: extractor.loader("style","css") }
        ]
    },
    plugins: [
        new extractor("[name].css"),
        new purify({
            basePath: __dirname,
            paths: [
                "app/views/*.html",
                "app/layout/*.html"
            ]
        })
    ]
}
```

And, that's it! Your scripts and view files will be scanned for classes, and those that are unused will be stripped off your CSS - aka. "purified".

## Options
This plugin, unlike the original PurifyCSS plugin, provides special features, such as scanning the dependency files and all kinds of files. To configure such behaviours, I will show you the options.

| Property            | Description
|---------------------|------------
| `basePath`          | The path from which all the other paths will start. Required.
| `resolveExtensions` | An array of extensions that should be given to PurifyCSS when determining classes. (defaults to webpack `resolve.extensions` config)
| `paths`             | An array of globs that reveal all your files. See [glob](http://npmjs.org/glob)'s documentation to see what kind of paths you can pass in this array. Use this array to pass files that won't be known to WebPack.
| `purifyOptions`     | Pass these options to PurifyCSS. See [here](https://github.com/purifycss/purifycss#options-optional). Note: `output` is always `false`.

---
_Source: https://npm.io/package/purifycss-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._