Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

purgecss-webpack-plugin

Package Overview
Dependencies
Maintainers
2
Versions
62
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

purgecss-webpack-plugin

PurgeCSS plugin for webpack - Remove unused css

  • 3.1.3-alpha.0
  • next
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
45K
decreased by-22.6%
Maintainers
2
Weekly downloads
 
Created
Source

purgecss-webpack-plugin

Build Status CircleCi dependencies Status devDependencies Status Codacy Badge Codacy Badge styled with prettier npm license Greenkeeper badge

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

Keywords

FAQs

Package last updated on 15 Dec 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc