UnCSS your CSS! Removing Unused CSS with PostCSS & Parcel

-- Last week I released a video discussing Bootstrap. In this video, I mentioned I used PurgeCSS to remove unwanted CSS, which resulted in a drastically smaller file size. Today, we're going to use a similar tool called UnCSS with the help of PostCSS to do just that.

PostCSS allows you to chain together a number of CSS tools.

You can use PostCSS in a number of environments, and for this one, we're going to use Parcel (You can also use Gulp, Grunt, Webpack, etc..).

Uncss comes with a plugin that allows it to work with PostCSS, which is what we'll use. Uncss simply compares your HTML against your CSS, and removes any unused CSS rulesets.

Project files:

Let's get started!

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[Sam-rdbo]

Is there a chance it can remove CSS that maybe getting used on other pages or only getting used if certain action happens?

Or perhaps CSS that gets applied as new elements are created.

I wonder how safe it is to use unCSS?

Thanks for the video, changing the theme, can I apply uncss with an Angular project?

[amarg]

Is it possible to remove unused Js from core files like jquery, jquery-ui and bootstrap.js? if yes how to do it? Wiil be great if we have new video on this. Thanks a lot.

[RockuMan]

On the paper, uncss is a great idea, but for real world production products is more of a hassle than a practical tool: a lot of styles can’t be understood by the various uncss plugins, such as pseudo elements, dynamically injected classes etc. As the project grows, keeping track of everything uncss should “ignore” can become time consuming.

[bjartur]

Does this also work if you are adding classes afterwards with JS?

[ramyalayan]

Can you please do this with Webpack and share it with us? I've been trying to do it with Webpack for 2 hours and still no luck :/

[morespinach]

How about if I have 7-8 page template types in my website. Wordpress. Using uikit framework. Can i point purgecss or postcss or uncss with that?

[_the_one_]

Hey Gary I am learning testing vue.js applications and did that but buying a book. Though there is not useful resources out there, I mean there are not quality videos to show you how to test vue.js applications and most of developers prefer to learn by wathing videos. Is it in your plans to create a play list "Testing vue applications with jest" ?

[Dopefish]

Hello, my homepage has an index.php file instead of .html, is this still possible?

[abhishreymittal]

I might use it in the future, but still, it is always a pleasure to watch your videos...
BTW when is the next NegativeSpace coming?

[davidetiosaojo]

Hey Gary, love your videos!! I've been following you channel for a while now and it has been awesome... But I'm having issues with this tutorial though; I can't quite install the "parcel-bundler" I keep getting an error when I run the "npm i parcel-bundler".. Any solutions??!

[sumanchatterjee]

sir if i have multiple pages, each page using different css properties from my common css file(like one page using 3-4 animations and other page didn't using them), then how should i do uncss of the css which are not common for each page ?

[hayleykornilenko]

Does this work across the entire site or just the page it is rendering for the Coverage feature?

[yassinesafraoui]

is sass using uncss, if not is there is any way to make it support it?

[danielbaychev]

For anyone having the restricted policy error, Run this: Set-ExecutionPolicy RemoteSigned

[RizaHariati]

I can't use it using React.js. I don't know where to put the file. The index.html is in the public folder. And the parcel just won't work.

[apafly]

I'm trying this from a Mac with this error and no wat to fix it: "Please specify a publicURL using --public-url, otherwise schema assets won't be collected"
I've tried --public-url '.' --public-url index.html --public-url ./ --public-url / but didn't work

[Александр-юпх]

Hello! Please tell me how to do the same only on the gulp? gulp + postssss + unkss

[TM-vgmt]

Can you suggest me, what best framework to make a dynamic web company profiles?

[kenny]

How do you save your own website's html file and css file??