penthouse
penthouse copied to clipboard
Published
20 hours ago •
pocketjoso
pocketjoso
CSS selectors like `:where()` are not included in generated critical css
Description
CSS selectors like the following are not getting included in the generated critical css file: :where(), :has(), :not(), :host(), :root() and possibly others.
Reproduction steps
I have the following files: index.html, styles.css, and the script used to run penthouse testing.js.
Running the penthouse with node testing.js produces outfile.css with nothing.
index.html:
<!DOCTYPE html>
<html>
<head>
<title>:where() Selector Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<h2>Another heading</h2>
<p>Another paragraph</p>
</body>
</html>
styles.css
:where(h1, h2, h3, h4, h5, h6) {
color: blue;
font-family: Arial, sans-serif;
}
:where(p, li) {
font-size: 16px;
line-height: 1.5;
}
The js script used to run penthouse: testing.js
#!/usr/bin/env node
const penthouse = require('penthouse')
const fs = require("fs");
penthouse({
url: 'file:///<some path>/index.html',
css: '/<some path>/styles.css'
})
.then(criticalCss => {
// use the critical css
fs.writeFileSync('outfile.css', criticalCss)
})
Question
Should these selectors be included in the generated critical CSS file If they are above the fold?
Found out that this was happening because of the older puppeteer version. Running with https://github.com/pocketjoso/penthouse/pull/347 checked out fixed the problem.