CODEWITHSUNDEEP
htmlcsslighthouse
Chuck Le Butt
Chuck Le Butt

Reputation: 48758

Extract used CSS from a page

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:

enter image description here

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?

Upvotes: 13

Views: 7316

Answers (3)

Gianfranco P
Gianfranco P

Reputation: 10794

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/

Upvotes: 5

Daniel Sixl
Daniel Sixl

Reputation: 2499

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/

Upvotes: 4

sunil kumar
sunil kumar

Reputation: 301

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

Upvotes: 9

Related Questions