Skip to main content

PurgeCSS

PurgeCSS is a tool to remove unused CSS from your stylesheets. It analyzes your content and CSS files to determine which selectors are actually used, then removes the unused ones to reduce file size.

Usage​

PurgeCSS is a CSS processor that can be enabled from the style editor menu, or configured via the processors property of the configuration object.

When enabled, PurgeCSS analyzes the compiled HTML and JavaScript code in your project to identify used CSS selectors, then removes any unused styles from the CSS output.

PurgeCSS can be used alongside other processors. Multiple processors are applied in the order they appear in the style editor menu.

Demo​

show code
import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>PurgeCSS Demo</h1>\n  <p>Only the <strong>used</strong> styles are kept. Check the <strong>Compiled</strong> tab to see the purged output.</p>\n  <button>Primary Button</button>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": "/* used in HTML */\n.container {\n  font-family: sans-serif;\n  max-width: 600px;\n  margin: 2em auto;\n}\n\n/* used in JS */\n.btn-primary {\n  background: #4a90d9;\n  color: white;\n  border: none;\n  padding: 10px 20px;\n  border-radius: 4px;\n}\n\n/* not used */\n.btn-secondary {\n  background: #6c757d;\n  color: white;\n  border: none;\n  padding: 10px 20px;\n  border-radius: 4px;\n}\n.unused-class {\n  color: red;\n  font-size: 2em;\n}\n"
    },
    "script": {
      "language": "js",
      "content": "const btn = document.querySelector('button');\nbtn.classList.add('btn-primary');\n"
    },
    "processors": [
      "purgecss"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
createPlayground('#container', options);

Processor Info​

Name​

purgecss

Editor​

style

Processor​

PurgeCSS

Version​

@fullhuman/postcss-purgecss: v7.0.2

Custom Settings​

Custom settings added to the property purgecss are passed as options to PurgeCSS. Please check the documentation for full reference.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

Custom Settings
{
  "purgecss": {
    "safelist": ["unused-class"]
  }
}
Sponsors