Nimble Porridge Muncher

    purgecss-webpack-plugin
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.3 • Public • Published

    purgecss-webpack-plugin

    npm license

    Webpack plugin to remove unused css.

    Install

    npm i purgecss-webpack-plugin -D

    Usage

    With mini-css-extract-plugin

    const path = require('path')
    const glob = require('glob')
    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    const PurgeCSSPlugin = require('purgecss-webpack-plugin')
    
    const PATHS = {
      src: path.join(__dirname, 'src')
    }
    
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
      },
      optimization: {
        splitChunks: {
          cacheGroups: {
            styles: {
              name: 'styles',
              test: /\.css$/,
              chunks: 'all',
              enforce: true
            }
          }
        }
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              "css-loader"
            ]
          }
        ]
      },
      plugins: [
        new MiniCssExtractPlugin({
          filename: "[name].css",
        }),
        new PurgeCSSPlugin({
          paths: glob.sync(`${PATHS.src}/**/*`,  { nodir: true }),
        }),
      ]
    }

    Multiple paths

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

    new PurgeCSSPlugin({
      paths: glob.sync([
        // ...
      ])
    }),

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

    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 specify 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.

    const PurgeCSSPlugin = require('purgecss-webpack-plugin')
    const glob = require('glob')
    const PATHS = {
      src: path.join(__dirname, 'src')
    }
    
    // In the webpack configuration
    new PurgeCSSPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
    })

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

    new PurgeCSSPlugin({
      paths: () => glob.sync(`${PATHS.src}/**/*`, { nodir: true })
    })
    • only

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

    new PurgeCSSPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
      only: ['bundle', 'vendor']
    })
    • safelist

    Similar as for the paths option, you also can define a function for this option:

    function collectSafelist() {
      return {
        standard: ['safelisted', /^safelisted-/],
        deep: [/^safelisted-deep-/],
        greedy: [/^safelisted-greedy/]
      }
    }
    
    // In the webpack configuration
    new PurgeCSSPlugin({
      safelist: collectSafelist
    })
    • rejected

    If true all removed selectors are added to the Stats Data as purged.

    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.

    License

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

    Install

    npm i purgecss-webpack-plugin

    Homepage

    purgecss.com

    DownloadsWeekly Downloads

    57,456

    Version

    4.1.3

    License

    MIT

    Unpacked Size

    12.6 kB

    Total Files

    7

    Last publish

    Collaborators

    • jsnanigans
    • ffloriel