Scribd
Upload
270 views

Remove Unused CSS With PurgeCSS

PurgeCSS is a tool that removes unused CSS by comparing strings. It works by analyzing content files like Vue components to detect which classes are actually used, and removes any unused CSS from the output. The document provides an example of using PurgeCSS with a Nuxt/Vue project to optimize the generated CSS, reducing the file size from 485KB to just 16KB. It also explains how to configure PurgeCSS as a PostCSS plugin, including whitelisting certain classes, tags, and patterns to prevent their removal.

Uploaded by

Jhonathan Antonio
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
270 views

Remove Unused CSS With PurgeCSS

PurgeCSS is a tool that removes unused CSS by comparing strings. It works by analyzing content files like Vue components to detect which classes are actually used, and removes any unused CSS from the output. The document provides an example of using PurgeCSS with a Nuxt/Vue project to optimize the generated CSS, reducing the file size from 485KB to just 16KB. It also explains how to configure PurgeCSS as a PostCSS plugin, including whitelisting certain classes, tags, and patterns to prevent their removal.

Uploaded by

Jhonathan Antonio
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Remove unused CSS with PurgeCSS

We can tackle web performance in different ways, and one of

them is removing all JS and CSS we don’t use in our apps.

In the case of CSS, it’s even more important when we use


frameworks such as Bootstrap, Bulma or Tailwind, as well as

when we’re facing large or legacy applications.

PurgeCSS is a tool that removes unused CSS by applying

string comparison. That has some advantages, but also some

caveats, so please keep attention to the white-listing part

later.

As an example, VueDose’s website is built on Nuxt (static

generated) using Tailwind, and it uses PurgeCSS to optimize

the generated CSS.

If I disable PurgeCSS, you can see that the tailwind css is 485

KB:
While if I activate it, it goes down to 16 KB:

PurgeCSS configuration can be different in each project. It

can be set as a webpack plugin or a postcss plugin.

In the case of VueDose, I’m using it as a postcss plugin. So I


have a postcss.config.js file with this content:
const purgecss = require("@fullhuman/postcss-
purgecss");

const plugins = [...];

if (process.env.NODE_ENV === "production") {


plugins.push(
purgecss({
content: [
"./layouts/**/*.vue",
"./components/**/*.vue",
"./pages/**/*.vue"
],
whitelist: ["html", "body"],
whitelistPatternsChildren: [/^token/, /^pre/,
/^code/],
})
);
}

module.exports = { plugins };

Basically, all you need is to tell where to look for the matching
classes using the content property.

Also, you’d like to whitelist some classes or tags to don’t be

removed. You’ll need to do that at least in html and body, as

well as any dynamic classes.

In my case, I use prismjs in order to highlight the code blocks,

and it adds several token classes, as well as styles in

the pre and code tags. In order to exclude them, I need to

use the whitelistPatternsChildren property.


Tailwind, additionally, needs a custom extractor in order to

work properly with PurgeCSS. All in all, the


whole postcss.config.js file for VueDose has the

following content:

const join = require("path").join;


const tailwindJS = join(__dirname, "tailwind.js");
const purgecss = require("@fullhuman/postcss-
purgecss");

class TailwindExtractor {
static extract(content) {
return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
}
}

const plugins = [require("tailwindcss")(tailwindJS),


require("autoprefixer")];

if (process.env.NODE_ENV === "production") {


plugins.push(
purgecss({
content: [
"./layouts/**/*.vue",
"./components/**/*.vue",
"./pages/**/*.vue"
],
whitelist: ["html", "body"],
whitelistPatternsChildren: [/^token/, /^pre/,
/^code/],
extractors: [
{
extractor: TailwindExtractor,
extensions: ["html", "vue"]
}
]
})
);
}

module.exports = {
plugins
};

That’s it for today!

Remember you can read this tip online (with copy/pasteable

code).

It’d be helpful if you also share VueDose with your

colleagues, so they also know about these tips!

See you next week.

You might also like