@fullhuman/postcss-purgecss

What is @fullhuman/postcss-purgecss?

@fullhuman/postcss-purgecss is a PostCSS plugin that removes unused CSS. It helps to reduce the size of your CSS files by only including the styles that are actually used in your HTML files.

What are @fullhuman/postcss-purgecss's main functionalities?

Basic Usage

This code demonstrates the basic usage of @fullhuman/postcss-purgecss. It configures the plugin to scan HTML files in the './src' directory and remove any unused CSS from the CSS files in the same directory.

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./src/**/*.html'],
  css: ['./src/**/*.css']
});

module.exports = {
  plugins: [
    purgecss
  ]
};

Whitelist Specific Classes

This code demonstrates how to whitelist specific CSS classes that should not be removed, even if they are not found in the HTML files. The 'safelist' option is used to specify these classes.

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./src/**/*.html'],
  css: ['./src/**/*.css'],
  safelist: ['whitelisted-class']
});

module.exports = {
  plugins: [
    purgecss
  ]
};

Extracting Dynamic Classes

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./src/**/*.html'],
  css: ['./src/**/*.css'],
  defaultExtractor: content => content.match(/[\

Other packages similar to @fullhuman/postcss-purgecss

purgecss

purgecss is a standalone tool that can be used to remove unused CSS. It is similar to @fullhuman/postcss-purgecss but can be used outside of a PostCSS environment. It offers similar functionality but requires separate configuration.

uncss

uncss is another tool for removing unused CSS. It works by loading your HTML files and stylesheets, and then removing any CSS rules that are not used. It is similar to @fullhuman/postcss-purgecss but has a different approach to identifying unused CSS.

purify-css

purify-css is a tool that removes unused CSS by analyzing your HTML and JavaScript files. It is similar to @fullhuman/postcss-purgecss but also considers JavaScript files when determining which CSS rules are used.

README

PostCSS Purgecss

PostCSS plugin for PurgeCSS.

Usage

const purgecss = require('postcss-purgecss')
postcss([
  purgecss({
    content: ['./src/**/*.html']
  })
])

See PostCSS docs for examples for your environment.

Options

All of the options of purgecss are available to use with the plugins. You will find below the main options available. For the complete list, go to the purgecss documentation website.

content (required)

Type: string | Object

You can specify content that should be analyzed by Purgecss with an array of filenames or globs. The files can be HTML, Pug, Blade, etc.

extractors

Type: Array<Object>

Purgecss can be adapted to suit your needs. If you notice a lot of unused CSS is not being removed, you might want to use a custom extractor. More information about extractors here.

whitelist

Type: Array<string>

You can whitelist selectors to stop Purgecss from removing them from your CSS. This can be accomplished with the options whitelist and whitelistPatterns.

whitelistPatterns

Type: Array<RegExp>

You can whitelist selectors based on a regular expression with whitelistPatterns.

keyframes

Type: boolean Default value: false

If you are using a CSS animation library such as animate.css, you can remove unused keyframes by setting the keyframes option to true.

fontFace

Type: boolean Default value: false

If there are any unused @font-face rules in your css, you can remove them by setting the fontFace option to true.

Contributing

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

Versioning

postcss-purgecss use SemVer for versioning.

License

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

Changelog

1.0.0 (2018-05-22)

• Merge https://github.com/FullHuman/purgecss/pull/81, fixing https://github.com/FullHuman/purgecss/issues/80
• Change default extractor, does not return error for empty file anymore
• Remove legacy option
• Add rejected option https://github.com/FullHuman/purgecss/issues/55
• Add range ignore comment (purgecss start ignore and purgecss end ignore) https://github.com/FullHuman/purgecss/issues/66

Reverts

• Revert "adds keepChildren ability from whitelistPatterns Object[]" (c52c81b)
• Revert "fixes style code" (2213be6)