Show HN: Generate a concatenated file of all CSS used on a given website

Show HN: Generate a concatenated file of all CSS used on a given website(mikaei.github.io)

14 points by mikaelaast 2 years ago | 6 comments

mrieck 2 years ago |

It just intercepts any files of "text/css" mime types appends them all together while also including the content of <style> tags.

If anyone wants something more specific that gets a section's CSS and all associated styles, I built an extension for that called SnipCSS.

https://chrome.google.com/webstore/detail/snipcss/hbdnoadcma...

My extension doesn't download or parse CSS stylesheets to get styles, I use the Devtools protocol https://chromedevtools.github.io/devtools-protocol/tot/CSS/

brianzelip 2 years ago |

https://github.com/mikaei/mouthful/

geuis 2 years ago |

Can we get the link changed to the GitHub repo? There's no such link on the given page.

There's also no additional info such as if this works on SPA type websites, or if it's just doing naive curl scraping. How does it handle link depth determination?

Lots of questions, few answers.

bdcravens 2 years ago | |

Should work on "SPA" sites, though it uses PhantomJS, a "dead" project. It loads a page, listens for CSS mimetypes to build an array of URLs to pull down and concat.

https://github.com/MikaeI/mouthful/blob/master/mouthful.js

bdcravens 2 years ago |

Last commit was in 2019, and it uses PhantomJS to query a page, which shutdown development in 2018

https://github.com/ariya/phantomjs/issues/15344

xnx 2 years ago |

Could come in handy. Does Chrome Devtools have a way to do this?