This seems to be a common request here so I thought I would demonstrate two very simple methods which require very little modification to Sage. Recently, I’ve been looking for a quicker alternative to UnCSS , since it is slow and often flaky. I thought PurifyCSS would be the answer since it has a ni…

@knowler thanks for taking the time to put this together! I’m intrigued by the idea of automating the process of creating the sitemap array for UnCSS using wget. I’ve done some research and would love some feedback to see if I’m on the right track! To get a list of all the urls in a website was ab…

This looks awesome. I’ll have to take a look at it later, but first, one word of warning regarding crawling with wget is that you need to whitelist your IP so you don’t get blocked (edit: for remote servers of course).

That’s a good point! I also saw someone suggest adding --wait=1 to the wget command in order to not decrease your site’s performance while generating the sitemap.

@knowler thanks for sharing these methods! I use your UnCSS as a PostCSS plugin method. For the sitemap I use the WordPress JSON Sitemap Generator plugin I made. It generates a JSON sitemap on non-production environments and is available via: http://yourdomain.com?json_sitemap. The JSON sitemap in…

Hey all - would this be a viable option if you have 3,000+ articles and growing?

Using PurgeCSS is always a safe option if you have the paths and whitelist set correctly since it just scans for classes that are being used in your source PHP and JS. There is no need for a sitemap. Using UnCSS is the less safe option (but most accurate when it works). UnCSS uses a headless browse…

If you choose UnCSS, you will need to be more strategic in your approach, especially if the site in question has “3000+ articles and growing.” For instance, you could limit the sitemap to a number of representative posts. In my experience this is doable and can be accurate.

If anyone else is getting this error with Webpack 3 and purgeCSS: TypeError: Cannot read property 'compilation' of undefined Then you need to use purgeCSS version compatible with Webpack 3: yarn add purgecss-webpack-plugin@0.23.0 -D Another tip. cssnanoConfig inside postcss.config.js is set to…

Roots Discourse

Removing unused CSS with Purgecss/UnCSS

sage

jasonbaciulis March 10, 2018, 9:48am 9

@knowler @Henk thank you for this, works beautifully!