Have used tools like this before, and invariably end up accidentally stripping styles from an <insert JS UI lib> component with a dynamically assigned className or something equally silly.<p>It's such a hard problem to solve and the Stylesheet Snowball is one of the most frustrating pieces of technical debt a large site can pick up.<p>It makes me wonder if scoped CSS modules, despite fundamentally breaking CSS with their hyper specific hybrid BEM-class-ids might be the best preemptive solution even when you're not scaling up to massive SPAs.<p>Edit. Meant CSS modules, wrote CSS components. I am not a clever man.
I've been hoping someone would write a similar tool, but using a browser, so that I could run a webapp, click around (using a checklist, to cover all of the views) and get a resulting list of used CSS rules from the browser.<p>That would have the advantage of supporting complex webapps written in any language/environment.
I wonder what the performance increase would be of loading one big CSS file on the first page load and serving from local cache from then on, vs loading a smaller but different CSS file for each page you visit.<p>My impression is that number of requests is a more critical optimization than file size (at least when serving CSS sized files)
AFAIK, this could also be written as a transform in AssetGraph [<a href="https://github.com/assetgraph/assetgraph" rel="nofollow">https://github.com/assetgraph/assetgraph</a>], which does all of the loading, parsing and traversing for you. At least the given description reads like the internals of the population/loader-system in AssetGraph.<p>As an added benefit, you'll get de-duplication, minification, inlining (with fallbacks) and, with a little work, image-spriting thrown in almost for free.<p>If you want to play around easily, take a look at <a href="https://github.com/assetgraph/assetgraph-builder" rel="nofollow">https://github.com/assetgraph/assetgraph-builder</a>
I've done something similar nearly two years ago[1]. The problem is rather difficult, especially with all the JavaScript frameworks in existence right now. I've tried to build a state machine for handling those frameworks but never got around to finishing it. There's basically and endless amount of combinations one can do, thus you probably want to limit depth or something. You also have to be able to detect ::after and similar kind of selectors, which isn't always straightforward with querySelector and needs quite a bit of cleaning. I ran into a few other (edge) cases, which I cannot remember right now.<p>Nonetheless, it is a challenging and fun problem to solve.<p>[1]: <a href="https://github.com/Kevin-A/css-detector" rel="nofollow">https://github.com/Kevin-A/css-detector</a>
Clutch timing! Been working on several projects amassing a multi-purpose stylesheet (currently ~600 lines) having already conceded that a tool which accomplishes exactly this would be needed.<p>Edit: seems overkill, the theoretical solution I had in mind would just take a few arguments;<p>ie:<p>trimCss mybloated.css mypage.html > mytrimmed.css
I've been wanting to tie this up with Casper automation in order to get coverage on dynamically generated content. The hard part is just ensuring the content path is adequate. We do something similar with PhantomCSS already, but it's definitely a tighter scope.
I made a similar tool, although it doesn't load the page in a browser to remove unused styles.<p><a href="https://www.npmjs.com/package/uselesscss" rel="nofollow">https://www.npmjs.com/package/uselesscss</a>
How easy would it be to get this to work with something that spiders a site, so it generates a CSS file dynamically for a whole site instead of manually feeding it URLs?
Am I missing something? UnCSS has been for about 3 years now. <a href="http://bit.ly/uncss" rel="nofollow">http://bit.ly/uncss</a> by addyosmani