JSPM

  • Created
  • Published
  • Downloads 53587
  • Score
    100M100P100Q149938F
  • License MIT

Purgecss plugin for webpack - Remove unused css

Package Exports

  • purgecss-webpack-plugin

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (purgecss-webpack-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

purgecss-webpack-plugin

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

Webpack plugin to remove unused css.

Install

npm i purgecss-webpack-plugin -D

Usage

const path = require('path')
const glob = require('glob')
const ExtractTextPlugin = require('extract-text-webpack-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')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?sourceMap'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('[name].css?[hash]'),
    new PurgecssPlugin({
      paths: glob.sync(`${PATHS.src}/*`)
    })
  ]
}

Options

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

  • paths

With the webpack plugin, you can specified the content that should be analyized 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}/*`)
})
  • only

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

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

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:

License

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