Hey, thanks for this project!
I ran into what seems like a bug while using critical@4.0.1 with gulp@4.0.2. The error message reads:
Error in plugin "critical"
Message:
Evaluation failed: TypeError: Cannot read property 'clear' of undefined
at isElementAboveFold (__puppeteer_evaluation_script__:20:44)
at isSelectorCritical (__puppeteer_evaluation_script__:67:11)
at Array.filter (<anonymous>)
at filterSelectors (__puppeteer_evaluation_script__:77:27)
at pruneNonCriticalSelectors (__puppeteer_evaluation_script__:82:10)
Details:
domainEmitter: [object Object]
domainThrown: false
As far as I could find out (h/t Tom-Bonnike), the cause of this error is KaTeX's selector .katex * (source: unminified katex.css) being applied to "uncommon" elements (<math>, <semantics>) that don't seem to have the style attribute defined.
The likely offending lines are pruneNonCriticalSelectors.js#L23:L24:
var originalClearStyle = element.style.clear || ''
element.style.clear = 'none'
I put together a quick fix. It checks if each element has a style attribute before calling isElementAboveFold. Here's the commit at my fork (branch fix-element-style-undefined). Happy to submit it as a PR if this is good enough for you.
Steps to reproduce:
mkdir katex-test && cd katex-test
npm install gulp critical
node_modules/.bin/gulp critical_css
gulpfile.js:
const gulp = require('gulp');
const critical = require('critical');
const criticalCss = () =>
gulp.src('katex-test.html')
.pipe(critical.stream({
inline: false,
extract: false,
dimensions: [
{
width: 544,
height: 999,
},
],
}))
.pipe(gulp.dest('./'));
exports.critical_css = gulp.parallel(criticalCss);katex-test.html:
<html>
<head>
<title>KaTeX Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css" crossorigin="anonymous">
</head>
<body>
<p style="margin-top:2000px">
<span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mtext>KaTeX</mtext></mrow><annotation encoding="application/x-tex">{\KaTeX}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8988em;vertical-align:-0.2155em;"></span><span class="mord"><span class="mord text"><span class="mord textrm">K</span><span class="mspace" style="margin-right:-0.17em;"></span><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.6833em;"><span style="top:-2.905em;"><span class="pstrut" style="height:2.7em;"></span><span class="mord"><span class="mord textrm mtight sizing reset-size6 size3">A</span></span></span></span></span></span><span class="mspace" style="margin-right:-0.15em;"></span><span class="mord text"><span class="mord textrm">T</span><span class="mspace" style="margin-right:-0.1667em;"></span><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.4678em;"><span style="top:-2.7845em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord textrm">E</span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.2155em;"><span></span></span></span></span><span class="mspace" style="margin-right:-0.125em;"></span><span class="mord textrm">X</span></span></span></span></span></span></span>
</p>
</body>
</html>PS: Note that this error does not happen if <p>'s margin-top is not a huge value. I am not sufficiently familiar with penthouse codebase to know why. But it could be that this kind of error only happens if the element that is missing the style attribute is not "obviously" above the fold?
Hey, thanks for this project!
I ran into what seems like a bug while using critical@4.0.1 with gulp@4.0.2. The error message reads:
As far as I could find out (h/t Tom-Bonnike), the cause of this error is KaTeX's selector
.katex *(source: unminified katex.css) being applied to "uncommon" elements (<math>,<semantics>) that don't seem to have thestyleattribute defined.The likely offending lines are pruneNonCriticalSelectors.js#L23:L24:
I put together a quick fix. It checks if each element has a
styleattribute before callingisElementAboveFold. Here's the commit at my fork (branch fix-element-style-undefined). Happy to submit it as a PR if this is good enough for you.Steps to reproduce:
gulpfile.js:katex-test.html:PS: Note that this error does not happen if
<p>'s margin-top is not a huge value. I am not sufficiently familiar with penthouse codebase to know why. But it could be that this kind of error only happens if the element that is missing thestyleattribute is not "obviously" above the fold?