Extract used CSS from a page

Question

I need to extract the used CSS from a 19,000 line CSS file where 98.4% of it is unused (ouch). I know you can use Chrome Developer Tools to view the CSS Coverage, like so:

But it doesn't allow you to even jump to the green lines. Manually going through 19K lines just doesn't seem feasible.

Chrome Lighthouse doesn't seem to give you an option to see only the rules you need like Developer Tools used to, either.

I've tried Firefox's "CSS Usage" add-on (which a lot of sites recommend) but it requires FireBug, which itself isn't compatible in the current version of FireFox.

Can anyone think of a way to pull out just the CSS that's used somehow?

did you take a look at https://github.com/purifycss/purifycss already? — sn_92, Oct 20 '17 at 13:35
_"but it requires FireBug, which itself isn't compatible in the current version of FireFox"_ - well too bad all older versions of Firefox have been completely wiped from the net, if not even humanity's memory ... dammit, if only something like https://ftp.mozilla.org/pub/firefox/releases/ existed. — CBroe, Oct 20 '17 at 13:37
I asked same question -> https://stackoverflow.com/questions/44633247/how-to-save-the-results-analysed-by-the-chromes-coverage-tool :) hope you will have more luck! — Morpheus, Oct 20 '17 at 13:38
I ended up doing it by hand. It took 20 mins all told. Sometimes doing things manually can be quicker than you expect. I'll keep these answers in mind, though. — Chuck Le Butt, Oct 20 '17 at 13:52
From Chrome v73 you can export a `.json` file of the coverage https://developers.google.com/web/updates/2019/01/devtools#coverage The question is now how to parse that to extract the CSS lines — Gianfranco P., Mar 25 '19 at 09:11

score 9 · Answer 1 · answered Oct 20 '17 at 13:40

9

Hope this will help you

https://uncss-online.com/

just add html in left and css in right. Click ok btn then see magic

if there is any error in css then it will ask you to remove that error in that line number.

This is the easiest methode :)

answered Oct 20 '17 at 13:40

sunil kumar

291
1
12

1

This pulled out some weird stuff, but it also pulled out some good stuff. Definitely an improvement if you're stuck. – Chuck Le Butt Oct 20 '17 at 16:53
Or just use it as a console tool https://github.com/uncss/uncss – Serhii Polishchuk May 19 '22 at 11:03

Gianfranco P. · Answer 2 · 2022-01-05T16:53:16.853

After downloading the Coverage .json from Chrome (>= v73) [What's New In DevTools - Chrome 73].

You can extract the CSS with this node script:

$ node extractCSS.js ~/Desktop/Coverage-20190325T110812.json
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://d33wubrfki0l68.cloudfront.net/css/1bd6a34e1fcf409d29d1a960e6299893fca2e7b1/css/all.css
https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css
./final_css.css file saved

// extractCSS.js
const fs = require('fs');

let final_css_bytes = '';
let total_bytes = 0;
let used_bytes = 0;

const filename = process.argv[2];
const output = './final_css.css';

if (!filename) {
  console.error('Missing filename to get coverage information from');
  process.exit();
}

const file_coverage = fs.readFileSync(filename);

const css_coverage = JSON.parse(file_coverage);

for (const entry of css_coverage) {
  if (!entry.url.endsWith('.css')) continue;
  console.log(entry.url);
  final_css_bytes += '# ' + entry.url + '\n\n';
  total_bytes += entry.text.length;
  for (const range of entry.ranges) {
    used_bytes += range.end - range.start - 1;
    final_css_bytes += entry.text.slice(range.start, range.end) + '\n';
  }
  final_css_bytes += '\n\n';
}

fs.writeFile(output, final_css_bytes, error => {
  if (error) {
    console.log('Error creating file:', error);
    return;
  }
  console.log(output, 'file saved');
});

https://gist.github.com/gianpaj/a2f99e022e2c3f8abb9deecb47d572c4

Inspired by: https://blog.fullstacktraining.com/remove-unused-css-javascript-code-from-your-project/

This should be the top answer everywhere. My `node` complained about the comments at the beginning of the code, but apart from that it works perfectly! — Arkadiy Bolotov, Dec 19 '21 at 06:21

score 4 · Answer 3 · answered Oct 20 '17 at 13:41

4

I use PurifyCSS for some of my projects. Helps me to keep my CSS lightweight.

Dont' know about your project structure and workflow, but there are tons of tutorials out there:

https://webdesign.tutsplus.com/tutorials/remove-unnecessary-css-with-purifycss-and-grunt--cms-27726

https://survivejs.com/webpack/styling/eliminating-unused-css/

There are also some online solutions for getting rid of unused CSS, never tried though:

https://uncss-online.com/

answered Oct 20 '17 at 13:41

Daniel Sixl

2,488
2
16
29

Tip: It's always preferred to actually explain rather than just post external links, as those links will disappear sooner than you think! – Chuck Le Butt Oct 20 '17 at 16:48
Makes sense. I will keep this in mind. Thanks Chuck. – Daniel Sixl Oct 20 '17 at 16:53

Extract used CSS from a page

3 Answers3