Last active
January 16, 2025 20:26
-
-
Save kdzwinel/426a0f76f113643fa285 to your computer and use it in GitHub Desktop.
List all undefined CSS classes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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) | |
.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(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); | |
} | |
})(); |
This script is very useful! especially if upgrade the major version of CSS framework, e.g. Bootstrap 4 to Bootstrap 5, it highly chance some ClassName is change or deprecate, using this script can easy maintenance the html page. thanks you very much. :)
Although this is Q4-2021 in the earth, Chrome developer tool still not having the liking "show CSS class name not exist" function.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Update for 2021 (modern JS and browsers): It's no longer necessary to
fetch()
the style sheets. Instead, all modern browsers now supportdocument.styleSheets[*].cssRules[*].selectorText
, which can be used for reliable detection of defined CSS classes w/out the caveats in the original script. There is also the MutationObserver API, which can be used to dynamically watch for changes to the DOM.See the https://www.npmjs.com/package/checkcss module that I just published for details.