I created and maintain Helium. https://github.com/geuis/helium-css
The problem with the PurifyCSS approach, like so many before it, is that you cannot really do this accurately from the server. It has to be done in the browser.
Helium is a dev tool. It takes a list of sample urls from the developer because its presumed the engineer will be able to make the best choice as to pages that represent all the aspects of their site.
It will work in any web page regardless of framework, because ultimately its all just web pages.
Helium will find the actual style sheets loaded into each page, then at the end of the scan give you an accurate and realistic report of the css selectors that were not found anywhere in your site.
There are some minor limitations, such as the inability to test for user-interactions with pseudo selectors like :active, :focus, :hover, etc.
Like most CSS tooling, this is a treatment for a symptom of an underlying disease: the inherently global nature of CSS[1].
Rather than "blob" all your CSS together, and then "de-blob" it, why not build your CSS dynamically based on what components your app is using?
[1] I strongly encourage you to watch this talk: https://vimeo.com/116209150
This looks awesome. If it did a second run to look up where the CSS comes from in my SASS and remove the SASS instead, that would be magical. :D
Nice. But from the description, it apparently doesn't work if you construct class names by string manipulation (like "item_" + (selected ? "selected" : "")). Maybe you shouldn't do that anyway, though.
This is nice. Just in case, you might also like to look at the likes of https://github.com/giakki/uncss
I _think_ it shouldn't be too much code. For my rails project, I wrote a simple shell script[1] to get all unused css classes and remove it my hand in final step, to make sure i will not remove css classes that actually used (e.g pre-define and use in future, overriding of third party css class)
The script basically does:
1. Use REGEX match all css classes, `cat` into one place
2. Read the class line by line and search in html,js files to see if this css is used (even support #addClass from js)
2.1 it also supports several class adding styles e.g. class="abc", class: "abc", :class=> 'abc' or even "xxx" class in this: class="abc xxx ijk"
2.2 People even do this in js: $modal.append($('<div class="modal-close-icon"></div>')); and the REGEX can also detect this lol.
[1] https://gist.github.com/50kudos/3028fac585eda85aea9a
You can adapt my REGEX, and custom your directory where those css files are in.
Simply copy the code and save into your filename.sh, and can run safely because my script don't write any file of your project.
I use a similar tool on my personal site (www.peterbe.com) It also inlines all CSS but only does so with the selectors that are actually ever used.
Go to http://www.peterbe.com/plog/mincss and click to view source. 120Kb of bootstrap excess baby!
This setup is ideal IMO. Keep your existing files, like bootstrap, intact in case you ever DO use them but integrate this into your deploy process to do compression and minification prior to getting out to your server.
Workflow wise, this is a huge win.
Apparently it also has a gulp plugin: https://github.com/purifycss/gulp-purifycss
(just in case you were also wondering) =)
This could be really useful when I do a major refactor later this year. Thanks.
How do you do this for JavaScript? In Java I used a mixture of static analysis[1] and code coverage[2] with great success. For JavaScript there seem to be many (dead) coverage tools but nothing comparable to UCDetector.
What is the actual performance advantage gained in contrast to a simple minifier?
Given today's CPU speeds, I think the only thing you can save with this tool is bandwidth on mobile and even with this, the effort is not always worth the resulting speed gains as mobile networks get faster and faster.
The dynamic class allocation here looks really robust and amazing. Huge concern in similar libraries.
>Able to also detect dynamically-loaded CSS classes in your javascript.
Awesome! I worked with a tool like this that did not have dynamically loaded classes in mind.
For people not sure on how to use this, I personally use tools like these when working with a CSS framework.
An alternative to this is symdiff http://symdiff.github.io/ (Disclaimer: I'm the author).
The auto-remove part you would have to code yourself though.
Wrote a quick tutorial http://grunt-tasks.com/grunt-purifycss/ on how to use it with grunt and grunt-usemin
Cool. I will try later. I'm using UnCSS[0] with Gulp. What is the different with UnCSS?
Mobile developers dream tool!
Would this work with https://github.com/jaysonsantos/jinja-assets-compressor?
This is awesome and makes so much sense, great work team.
This is a very handy tool. I have a question, would it be able to take wildcard and recursive argument for filepath of HTML, JS? Thanks.
AWESOME!! this is just what i was looking for!!
When it says it works on single-page apps, does that mean ONLY single page apps?
This is amazing.
Cool. Nice work!
super awesome.
So basically it's a tool to remove the mess that we've created? Maybe we shouldn't have done so in the first place.
I've been looking into this kind of tool for a while, but none of them are quite right for my purpose. I don't want a tool that spits out just-the-CSS-that-is-used, I want a tool that shows me blocks of CSS that it thinks are NOT used - ideally after I've loaded a number of different pages in a browser.
My use-case is for analyzing a large, existing website that has many years of accumulating CSS, and getting a feel for which blocks of code can be safely eliminated.
I'm pretty sure what I'm after needs a full-blown DOM to work effectively - either with something like PhantomJS or even running as a Chrome Extension. So far I haven't seen anything that fits the bill.