Skip to content

Instantly share code, notes, and snippets.

@jj-meyer
Forked from vladdu/main.js
Created October 28, 2020 13:43
Show Gist options
  • Save jj-meyer/0bc6212c1189e15a65d75d44c6bd6e8d to your computer and use it in GitHub Desktop.
Save jj-meyer/0bc6212c1189e15a65d75d44c6bd6e8d to your computer and use it in GitHub Desktop.
List all undefined CSS classes
/*
This script attempts to identify all CSS classes mentioned in HTML but not defined in the stylesheets.
In order to use it, just run it in the DevTools console (or add it to DevTools Snippets and run it from there).
Note that this script requires browser to support `fetch` and some ES6 features (fat arrow, Promises, Array.from, Set). You can transpile it to ES5 here: https://babeljs.io/repl/ .
Known limitations:
- it won't be able to take into account some external stylesheets (if CORS isn't set up)
- it will produce false negatives for classes that are mentioned in the comments.
*/
(function () {
"use strict";
//get all unique CSS classes defined in the main document
let allClasses = Array.from(document.querySelectorAll('*'))
.map(n => Array.from(n.classList))
.reduce((all, a) => all ? all.concat(a) : a)
// remove tailwind prefixes
.map(n => n.indexOf(':')>0 ? n.substring(n.indexOf(':')+1) : n)
.reduce((all, i) => all.add(i), new Set());
//load contents of all CSS stylesheets applied to the document
let loadStyleSheets = Array.from(document.styleSheets)
.map(s => {
if (s.href) {
return fetch(s.href)
.then(r => r.text())
.catch(e => {
console.warn('Coudn\'t load ' + s.href + ' - skipping');
return "";
});
}
return s.ownerNode.innerText
});
Promise.all(loadStyleSheets).then(s => {
let text = s.reduce((all, s) => all + s);
//get a list of all CSS classes that are not mentioned in the stylesheets
let undefinedClasses = Array.from(allClasses)
.filter(c => {
var rgx = new RegExp(escapeRegExp('.' + c) + '[^_a-zA-Z0-9-]');
return !rgx.test(text);
});
if(undefinedClasses.length) {
console.log('List of ' + undefinedClasses.length + ' undefined CSS classes: ', undefinedClasses);
} else {
console.log('All CSS classes are defined!');
}
});
function escapeRegExp(str) {
return str.replace("/", "\\/").replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment