Quick Start

This guide will walk you through a minimal example of using PurifyCSS to remove unused styles from a CSS string based on some simple HTML content.

1. Project Setup

First, make sure you have a Node.js project initialized. If not, create a new directory and run:

npm init -y

Next, install PurifyCSS:

npm install --save-dev purify-css

2. Create a Script

Create a file named purify.js and add the following code. We'll define some content (HTML) and some CSS, then use PurifyCSS to find only the used styles.

const purify = require('purify-css');

// Your content files, in this case, just a string of HTML
const content = '<button class="button-active"> Login </button><p class="text-muted">Please log in to continue.</p>';

// Your CSS files, in this case, just a string of CSS
const css = `
  .button-active {
    color: green;
  }

  .unused-class {
    display: block;
  }

  .text-muted {
    color: grey;
  }
`;

const purifiedCss = purify(content, css);

console.log('--- Original CSS ---\n', css);
console.log('--- Purified CSS ---\n', purifiedCss);

3. Run the Script

Execute the script from your terminal:

node purify.js

4. Check the Output

You will see the following output in your console:

--- Original CSS ---

  .button-active {
    color: green;
  }

  .unused-class {
    display: block;
  }

  .text-muted {
    color: grey;
  }

--- Purified CSS ---
 .button-active { color: green; } .text-muted { color: grey; }

As you can see, PurifyCSS correctly identified that .button-active and .text-muted were used in the content and kept those styles, while removing the .unused-class selector entirely.