PurgeCSS is a tool to remove unused CSS. It can be used as part of your development workflow. PurgeCSS comes with a JavaScript API, a CLI, and plugins for popular build tools.
Here are a couple of ways to use PurgeCSS:
CLI
You can install the CLI in two ways. By installing PurgeCSS globally or using npx.
Install globally
npm i -g purgecssRun PurgeCSS from the terminal:
purgecss --css <css> --content <content> [option]Use npx
npx allows you to run the CLI locally without installing the package globally.
Install PurgeCSS as a dev dependency:
npm i -D purgecssRun PurgeCSS from the terminal:
npx purgecss --css <css> --content <content> [option]JavaScript API
Install PurgeCSS as a dev dependency:
npm i -D purgecssES6 with import
import Purgecss from 'purgecss'const purgecss = new Purgecss({ content: ['**/*.html'], css: ['**/*.css']})const purgecssResult = purgecss.purge()ES5 with require
var Purgecss = require('purgecss')var purgecss = new Purgecss({ content: ['**/*.html'], css: ['**/*.css']})var purgecssResult = purgecss.purge()Webpack
Install the Webpack plugin as a dev dependency:
npm i -D purgecss-webpack-pluginUse the plugin in your Webpack config:
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}/*`) }) ]}PostCSS
Install the PostCSS plugin as a dev dependency:
npm i -D @fullhuman/postcss-purgecssUse the plugin in your PostCSS config:
const purgecss = require('@fullhuman/postcss-purgecss')module.exports = { plugins: [ purgecss({ content: ['./**/*.html'] }) ]}Gulp
Install the Gulp plugin as a dev dependency:
npm i -D gulp-purgecssUse the plugin in your Gulpfile:
const gulp = require('gulp')const purgecss = require('gulp-purgecss')gulp.task('purgecss', () => { return gulp .src('src/**/*.css') .pipe( purgecss({ content: ['src/**/*.html'] }) ) .pipe(gulp.dest('build/css'))})Grunt
Install the Grunt plugin as a dev dependency:
npm i -D grunt-purgecssUse the plugin in your Gruntfile:
module.exports = grunt => { grunt.initConfig({ purgecss: { options: { content: ['./src/**/*.html'] }, my_target: { files: { './dist/app.purged.css': './src/app.css' } } } }) grunt.loadNpmTasks('grunt-purgecss') grunt.registerTask('default', ['purgecss'])}Rollup
Install the Rollup plugin as a dev dependency:
npm i -D rollup-plugin-purgecssUse the plugin in your Rollup config:
import { rollup } from 'rollup'import purgecss from 'rollup-plugin-purgecss'rollup({ entry: 'main.js', plugins: [ purgecss({ content: ['index.html'] }) ]})
