Including critical path CSS extraction in my build

Question

After reading up on critical path css, I was wondering how I could embed this into my builds. Are there any finished tools out there that does this already? The process needs to be automatable to avoid the inline CSS getting out of sync with other CSS.

If there is no such tool today, I can see how I could make one (say a grunt plugin), using this experimental script together with PhantomJS, but there is no point in re-inventing the wheel (if there is one already).

Answer 1

I had exactly the same idea - if you're still looking, I built exactly what we both wanted:

Critical Path CSS Generator. (I didn't end up using the tool you linked too since it misses psuedo selectors, media queries, non -webkit prefixed css rules etc).

More documentation is on the way, but basically just install PhantomJS first and then call the script like this:

phantomjs penthouse.js http://youSite.com/page1 yourSite.css > yourSite-criticalcss-page1.css
phantomjs penthouse.js http://youSite.com/page2 yourSite.css > yourSite-criticalcss-page2.css

You can pass in minified CSS as well as unminified - I don't modify the CSS except for removing unmatched selectors, rules (and I remove comments).