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?

Answer 1

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/[email protected]/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/

Answer 2

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 :)