Skip to content

Instantly share code, notes, and snippets.

@honsa
Created February 15, 2018 12:37
Show Gist options
  • Save honsa/6912c94c0266c2c85042f68c8ab528f0 to your computer and use it in GitHub Desktop.
Save honsa/6912c94c0266c2c85042f68c8ab528f0 to your computer and use it in GitHub Desktop.
javascript:(function() {!function(t,e){"object"==typeof exports&&"string"!=typeof exports.nodeName?module.exports=e():t.FauxPas=e()}(this,function(){var t="faux-pas",e=function(t,e,o){this.level=t,this.message=e,this.element=o,this.output=this.toString()};e.prototype.isError=function(){return"error"===this.level},e.prototype.isWarning=function(){return"warn"===this.level},e.prototype.printElement=function(){if(!this.element)return"";for(var t=this.element.cloneNode(!0),e=t.childNodes,o=e.length-1;o>=0;o--)t.removeChild(e[o]);return t.outerHTML.replace(/ style\=\"[^\"]*\"/,"")},e.prototype.toString=function(){var e=this.printElement();return t+" "+this.level+": "+this.message+(e?" "+e:"")},e.prototype.console=function(){this.element?console[this.level](this.message,this.element):console[this.level](this.message)};var o=function(){this.title=t+" Results",this.lines=[],this.errorCount=0,this.warningCount=0,this.declaredCount=0,this.usedCount=0};o.prototype.log=function(t,o){this.lines.push(new e("log",t,o))},o.prototype.warn=function(t,o){this.lines.push(new e("warn",t,o)),this.warningCount++},o.prototype.silentWarn=function(t,o){this.lines.push(new e("warn",t,o))},o.prototype.error=function(t,o){this.lines.push(new e("error",t,o)),this.errorCount++},o.prototype.getLines=function(){return this.lines},o.prototype.printConsole=function(){console.group(this.title),this.getLines().forEach(function(t){t.console()}),console.groupEnd()},o.prototype.print=function(){return this.lines.map(function(t){return t.toString()})},o.prototype.getErrorCount=function(){return this.errorCount},o.prototype.getWarningCount=function(){return this.warningCount},o.prototype.getPluralLabel=function(t,e,o){return 1!==t?o||e+"s":e},o.prototype.setDeclaredCount=function(t){this.declaredCount=t},o.prototype.setUsedCount=function(t){this.usedCount=t};var n=function(t,e,o,i){this.family=n.normalizeFamily(t),this.weight=this.normalizeWeight(e)||"400",this.style=o||"normal",this.report=i};n.normalizeFamily=function(t){return t.replace(/[\'\"]/g,"").toLowerCase()},n.prototype.normalizeWeight=function(t){return"lighter"!==t&&"bolder"!==t||this.report.silentWarn("lighter and bolder weights are not supported."),""+({normal:"400",bold:"700"}[t]||t)},n.prototype.toString=function(){return this.family+"||"+this.weight+"||"+this.style};var i=function(){this.allowDuplicates=!1,this.familyDuplicatesHash={},this.duplicatesHash={},this.fonts=[]};i.prototype.length=function(){return this.fonts.length},i.prototype.add=function(t){!this.allowDuplicates&&this.has(t)||(this.familyDuplicatesHash[t.family]=!0,this.duplicatesHash[t]=!0,this.fonts.push(t))},i.prototype.has=function(t){return t in this.duplicatesHash},i.prototype.hasFamily=function(t){return(t=n.normalizeFamily(t))in this.familyDuplicatesHash},i.prototype.get=function(t){if(!t)return this.fonts;var e=[];return this.fonts.forEach(function(o){o.family===t&&e.push(o)}),e},i.prototype.getStats=function(t){var e=[];return this.get(t).forEach(function(t){var o={},n=parseInt(t.weight,10),i=n>=600;o.style=t.style,o.weight=n,o.bolder=i,e.push(o)}),e},i.prototype._hasStat=function(t,e){var o=!1;return t.forEach(function(t){e(t)&&(o=!0)}),o},i.prototype.statsHasRegular=function(t){return this._hasStat(t,function(t){return!t.bolder&&"normal"===t.style})},i.prototype.statsHasItalic=function(t){return this._hasStat(t,function(t){return!t.bolder&&"italic"===t.style})},i.prototype.statsHasBold=function(t){return this._hasStat(t,function(t){return t.bolder&&"normal"===t.style})},i.prototype.statsHasBoldItalic=function(t){return this._hasStat(t,function(t){return t.bolder&&"italic"===t.style})};var s=function(e,n){if(this.win=this.getWindowObject(e),this.doc=this.win.document,!("fonts"in this.win.document))throw Error(t+" requires the CSS Font Loading API, which your browser does not support.");n=n||{},this.showMismatches=void 0===n.mismatches||n.mismatches,this.highlightElements=void 0===n.highlights||n.highlights,this.consoleOutput=void 0===n.console||n.console,this.report=new o,this.usedFontsElements={},this.usedFontSet=new i,this.declaredFontSet=new i};return s.prototype.getWindowObject=function(t){return"defaultView"in t?t.defaultView:"ownerDocument"in t&&t.ownerDocument?t.ownerDocument.defaultView:t instanceof Window?t:void 0},s.prototype.addUsedFontElement=function(t,e){var o=!1;Array.prototype.slice.call(e.childNodes).forEach(function(t){3===t.nodeType&&(o=!0)}),t in this.usedFontsElements||(this.usedFontsElements[t]=[]),o&&this.usedFontsElements[t].push(e)},s.prototype._getStyle=function(t,e){return this.win.getComputedStyle(t,null).getPropertyValue(e)},s.prototype._getStyles=function(t,e){var o=this.win.getComputedStyle(t,null),n={};return e.forEach(function(t){n[t]=o.getPropertyValue(t)}),n},s.prototype.generate=function(){this.generateDeclaredList(),this.generateUsedList();var t=this.declaredFontSet.length(),e=this.usedFontSet.length();this.report.log(t+" "+this.report.getPluralLabel(t,"web font")+" declared and "+e+" "+this.report.getPluralLabel(e,"web font")+" used."),this.report.setDeclaredCount(t),this.report.setUsedCount(e),t?e?t!==e&&this.report.silentWarn("There are unused @font-face blocks here, are you sure you need them all?"):this.report.silentWarn("You didn’t actually use any web fonts here!"):this.report.silentWarn("No web fonts were found!")},s.prototype.generateUsedList=function(){Array.prototype.slice.call(this.doc.getElementsByTagName("*")).forEach(function(t){var e=this._getStyles(t,["font-family","font-weight","font-style"]);e["font-family"].split(",").forEach(function(o){o=o.trim();var i=new n(o,e["font-weight"],e["font-style"],this.report);this.isWebFont(i)&&(this.usedFontSet.add(i),this.addUsedFontElement(i,t))}.bind(this))}.bind(this))},s.prototype.generateDeclaredList=function(){this.doc.fonts.forEach(function(t){"error"===t.status?this.report.error("One of your web fonts didn’t load due to an error: "+t.family):this.declaredFontSet.add(new n(t.family,t.weight,t.style))}.bind(this))},s.prototype.isWebFont=function(t){return this.declaredFontSet.hasFamily(t.family)},s.prototype.isWebFontMismatch=function(t){return!this.declaredFontSet.has(t)},s.prototype.isFauxWebFont=function(t){if(this.declaredFontSet.has(t))return!1;var e=this.declaredFontSet.getStats(t.family),o="italic"===t.style,n=parseInt(t.weight,10)>=600,i=this.declaredFontSet.statsHasRegular(e),s=this.declaredFontSet.statsHasBold(e),r=this.declaredFontSet.statsHasItalic(e),h=this.declaredFontSet.statsHasBoldItalic(e);return n&&o?!h:n&&h&&!s?i:!(o&&h||(!o||r)&&(!n||s))},s.prototype._addHighlights=function(t,e){t.forEach(function(t){t.style["background-color"]=e})},s.prototype._log=function(t,e,o){t.forEach(function(t){this.report[o](e+" ("+this._getStyle(t,"font-family")+")",t)}.bind(this))},s.prototype.logFaux=function(t){this.highlightElements&&this._addHighlights(t,"#eb160e"),this._log(t,"Faux font detected","error")},s.prototype.logMismatch=function(t){this.highlightElements&&this._addHighlights(t,"#fcc"),this._log(t,"Mismatched font detected","warn")},s.prototype.findAllFauxWebFonts=function(){this.generate(),this.usedFontSet.get().forEach(function(t){this.isWebFont(t)&&(this.isFauxWebFont(t)?this.logFaux(this.usedFontsElements[t]):this.showMismatches&&this.isWebFontMismatch(t)&&this.logMismatch(this.usedFontsElements[t]))}.bind(this))},s.prototype.compare=function(){this.findAllFauxWebFonts(),this.consoleOutput&&this.report.printConsole()},s.prototype.getReport=function(){return this.report},s});var FP=new FauxPas(window,{console:!0,highlights:!0,mismatches:!0});FP.compare();})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment