How to Remove Unused CSS

How to Remove Unused CSS

by




All credit goes to Luca Spezzano for his dedication and awesome work by writing this article. Give him a few claps on his medium article here :).

I've been searching for quite some time now for a tool that allows me to clean my CSS for unused style.

There is a particular reason why I was looking for a tool like this. The reason is that nowadays almost every developer uses a lot of CSS frameworks and libraries to develop interfaces faster and easier – which makes it inevitable that the size of the CSS files increases a lot. 

But have you ever really thought how much of that CSS style that you import from those frameworks you actually use? Well, sometimes it's even less than 20%! So why does all this unused style need to be part of your code? No particular reason at all.

Purgecss

Here's where Purgecss comes to help.

It's a tool that helps you to remove unused CSS and it can be used as a part of your development workflow.

Here's how Purgecss works under the scene – it needs to know the following:

  1. The CSS file that you want to cleanout
  2. The files where it needs to inspect
  3. The destination path of the new file generated

So, from the initial CSS file (1) it will search in your HTML files (2), and from there create a new CSS file (3) with only the style you actually use.




Simple as that.

I'm pretty sure that if you give it a try, you'll be able to reduce the file down to 60%.

The build tools

The amazing thing about Purgecss is that you can implement it in your development workflow with a lot of popular build tools, like:

  • CLI
  • JavaScript API
  • Webpack
  • Gulp
  • Rollup

Additionally, you can also use it with the most modern JavaScript frameworks, such as

  • React
  • Vue
  • Next
  • Nuxt
How to use Purgecss

There's a whole article about how to set up a CSS build process using Gulp.

Below we will show how to implement Purgecss with Gulp and Nuxt.js, but you can read the official documentation here to know how to set it up in different ways.




Purgecss with Gulp

Initially, you need to install the package with npm or yarn.

npm i -D gulp-purgecss

or

yarn add gulp-purgecss

After that, in your gulpfile.js you need to import the package that you just added

const gulp = require('gulp'),
      purgecss = require('gulp-purgecss');

and after that, you need just to create your task like that:

gulp.task('purgecss', () => {
  return gulp
    .src('src/**/*.css')
    .pipe( 
      purgecss({
        content: ['src/**/*.html']
      })
    )
    .pipe(gulp.dest('build/'))
})

ps. if you are running your task in series or sequence remember to run this task after that you generate your HTML files. If you don't, the task will generate an error.




Purgecss with Nuxt.js

In the beginning, when I saw that Purgecss was working with HTML files I got upset because in the last months I’m developing different projects with Nuxt.js and for me, it’s very important to optimize my files. But studying the documentation I found out that you can execute Purgecss with the most modern JS frameworks such React, Vue, Next and Nuxt.

At first, you need to install the following packages to your project with npm or yarn

npm i --save-dev glob-all purgecss-webpack-plugin

or

yarn add glob-all purgecss-webpack-plugin

Now in your nuxt.config.js you need to import them (outside of the export default)

import PurgecssPlugin from 'purgecss-webpack-plugin'
import glob from 'glob-all'
import path from 'path'

Inside your export default you need to add this in your build configuration




build: {
  extractCSS: true,
  extend(config, { isDev, isClient }) {
    if (!isDev && isClient) {
      config.plugins.push(
        new PurgecssPlugin({
          paths: glob.sync([
            path.join(__dirname, './pages/**/*.vue'),
            path.join(__dirname, './layouts/**/*.vue'),
            path.join(__dirname, './components/**/*.vue')
          ]),
          whitelist: ['html', 'body']
        })
      )
    }
  }
}

And it’s done! This is all you need to do in order to know how to remove unused CSS.

If you know another better way, please feel free to contact us and let's talk about it!