This repository is a fork of the original purgecss-webpack-plugin by Ffloriel

The only change we made was that we removed ignore of the stylesheets (css, sass files and similar) by this plugin.

purgecss-webpack-plugin

Webpack plugin to remove unused css.

Install

1npm i purgecss-webpack-plugin -D

Usage

With mini-css-extract-plugin

1const path = require('path')
2const glob = require('glob')
3const MiniCssExtractPlugin = require('mini-css-extract-plugin')
4const PurgecssPlugin = require('purgecss-webpack-plugin')
5
6const PATHS = {
7  src: path.join(__dirname, 'src')
8}
9
10module.exports = {
11  entry: './src/index.js',
12  output: {
13    filename: 'bundle.js',
14    path: path.join(__dirname, 'dist')
15  },
16  optimization: {
17    splitChunks: {
18      cacheGroups: {
19        styles: {
20          name: 'styles',
21          test: /\.css$/,
22          chunks: 'all',
23          enforce: true
24        }
25      }
26    }
27  },
28  module: {
29    rules: [
30      {
31        test: /\.css$/,
32        use: [
33          MiniCssExtractPlugin.loader,
34          "css-loader"
35        ]
36      }
37    ]
38  },
39  plugins: [
40    new MiniCssExtractPlugin({
41      filename: "[name].css",
42    }),
43    new PurgecssPlugin({
44      paths: glob.sync(`${PATHS.src}/**/*`,  { nodir: true }),
45    }),
46  ]
47}

Multiple paths

If you need multiple paths use the npm package glob-all instead of glob, then you can use this syntax:

1new PurgecssPlugin({
2  paths: glob.sync([
3    // ...
4  ])
5}),

to filter out directories see the glob-all documentation here.

Webpack 3 (with extract-text-webpack-plugin)

1const path = require('path')
2const glob = require('glob')
3const ExtractTextPlugin = require('extract-text-webpack-plugin')
4const PurgecssPlugin = require('purgecss-webpack-plugin')
5
6const PATHS = {
7  src: path.join(__dirname, 'src')
8}
9
10module.exports = {
11  entry: './src/index.js',
12  output: {
13    filename: 'bundle.js',
14    path: path.join(__dirname, 'dist')
15  },
16  module: {
17    rules: [
18      {
19        test: /\.css$/,
20        use: ExtractTextPlugin.extract({
21          fallback: 'style-loader',
22          use: 'css-loader?sourceMap'
23        })
24      }
25    ]
26  },
27  plugins: [
28    new ExtractTextPlugin('[name].css?[hash]'),
29    new PurgecssPlugin({
30      paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
31    })
32  ]
33}

Options

The options available in purgecss Configuration are also available in the webpack plugin with the exception of css and content.

• paths

With the webpack plugin, you can specified the content that should be analyzed by purgecss with an array of filename. It can be html, pug, blade, ... files. You can use a module like glob or glob-all to easily get a list of files.

1const PurgecssPlugin = require('purgecss-webpack-plugin')
2const glob = require('glob')
3const PATHS = {
4  src: path.join(__dirname, 'src')
5}
6
7// In the webpack configuration
8new PurgecssPlugin({
9  paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
10})

If you want to regenerate the paths list on every compilation (e.g. with --watch), then you can also pass a function:

1new PurgecssPlugin({
2  paths: () => glob.sync(`${PATHS.src}/**/*`, { nodir: true })
3})

• only

You can specify entrypoints to the purgecss-webpack-plugin with the option only:

1new PurgecssPlugin({
2  paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
3  only: ['bundle', 'vendor']
4})

• whitelist and whitelistPatterns

Similar as for the paths option, you also can define functions for the these options:

1function collectWhitelist() {
2    // do something to collect the whitelist
3    return ['whitelisted'];
4}
5function collectWhitelistPatterns() {
6    // do something to collect the whitelist
7    return [/^whitelisted-/];
8}
9
10// In the webpack configuration
11new PurgecssPlugin({
12  whitelist: collectWhitelist,
13  whitelistPatterns: collectWhitelistPatterns
14})

Contributing

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

Versioning

We use SemVer for versioning.

Acknowledgment

Purgecss was originally thought as the v2 of purifycss. And because of it, it is greatly inspired by it. The plugins such as purgecss-webpack-plugin are based on the purifycss plugin. Below is the list of the purifycss repositories:

• purifycss
• gulp-purifycss
• purifycss-webpack

License

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