From 18eb07c8e7c626cbcb9f2cb9dab156e016c70c04 Mon Sep 17 00:00:00 2001 From: batbattur Date: Thu, 11 May 2023 11:20:49 -0700 Subject: [PATCH 1/2] Add forceInclude option for :where selectors For some reason, penthouse doesn't think that :where selectors are not part of the critical css. Let's add it to the config so that it includes the :where selectors in the generated critical css. See https://github.com/iFixit/ifixit/pull/47766#issuecomment-1544460438 for more info. --- critical-css.js | 1 + 1 file changed, 1 insertion(+) diff --git a/critical-css.js b/critical-css.js index 867f168..0f10a79 100755 --- a/critical-css.js +++ b/critical-css.js @@ -46,6 +46,7 @@ function findCriticalCss(cssString, url) { height: 2160, blockJSRequests: false, forceExclude: excludeArr, + forceInclude: [/where/i], screenshots: { basePath: getScreenshotPath(url), type: 'jpeg', From 80656ab3c9a33edfdca9ffa7b77dbeebd4eb3746 Mon Sep 17 00:00:00 2001 From: batbattur Date: Thu, 11 May 2023 12:02:31 -0700 Subject: [PATCH 2/2] Update the forceInclude regex to be specific This new regex will match selectors like the following: :where(), :has(), :not(), :host(), :root(). Verified that it will not match selectors like the following: li(:last-child), .green:not(:disabled), .card-hover:hover. --- critical-css.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/critical-css.js b/critical-css.js index 0f10a79..82595d9 100755 --- a/critical-css.js +++ b/critical-css.js @@ -46,7 +46,7 @@ function findCriticalCss(cssString, url) { height: 2160, blockJSRequests: false, forceExclude: excludeArr, - forceInclude: [/where/i], + forceInclude: [/^:(\w+)\(/i], screenshots: { basePath: getScreenshotPath(url), type: 'jpeg',