Show HN: Generate a concatenated file of all CSS used on a given website (opens in new tab)

(mikaei.github.io)

14 pointsmikaelaast2y ago6 comments

6 comments

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/

brianzelip2y ago

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

geuis2y 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.

bdcravens2y 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

bdcravens2y 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

xnx2y ago

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

j / k navigate · click thread line to collapse

6 comments

mrieck2y 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/

brianzelip2y ago

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

geuis2y 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.

bdcravens2y 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

bdcravens2y 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

xnx2y ago

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

j / k navigate · click thread line to collapse