fix(eleventy-plugin-styles): fixed URL selection with in Critical

docs(eleventy-plugin-styles): updated CHANGELOG.MD
Halo-Lab · Sep 26, 2023 · 6d635d4 · 6d635d4
1 parent 8013680
commit 6d635d4
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/packages/eleventy-plugin-styles/CHANGELOG.md b/packages/eleventy-plugin-styles/CHANGELOG.md
@@ -12,7 +12,7 @@
 
 - Added query hash to style URL.
 
-## [1.4.4] - 2021-08-17
+## [1.4.4] - 2022-08-17
 
 ### Fixed
 

diff --git a/packages/eleventy-plugin-styles/src/bundle.ts b/packages/eleventy-plugin-styles/src/bundle.ts
@@ -62,8 +62,8 @@ export const createPublicUrlInjector =
 	(html: string): string =>
 		html.replace(originalUrl, `${publicUrl}?${uid()}`);
 
-export const findStyles = (html: string) =>
-	rip(html, STYLESHEET_LINK_REGEXP, not(isRemoteLink));
+export const findStyles = (html: string, regex = STYLESHEET_LINK_REGEXP) =>
+	rip(html, regex, not(isRemoteLink));
 
 export const bindLinkerWithStyles =
 	<Options>(linker: Linker<Options>) =>

diff --git a/packages/eleventy-plugin-styles/src/constants.ts b/packages/eleventy-plugin-styles/src/constants.ts
@@ -1,3 +1,9 @@
 /** Match stylesheet link and get URL of file from HTML. */
 export const STYLESHEET_LINK_REGEXP =
 	/<link\s+[^>]*href=(?:'|")([^"]+\.(?:css|scss|sass|less))(?:'|")[^>]*>/g;
+
+export const STYLESHEET_LINK_WITH_HASH_REGEXP =
+	/<link\s+[^>]*href=(?:'|")([^"]+\.(?:css|scss|sass|less)(?:\?\w*)?)(?:'|")[^>]*>/g;
+
+export const CLEAR_STYLE_LINK_REGEXP =
+	/(.+?\.(?:css|scss|sass|less))\?[a-zA-Z0-9]+/;
diff --git a/packages/eleventy-plugin-styles/src/critical.ts b/packages/eleventy-plugin-styles/src/critical.ts
@@ -3,6 +3,12 @@ import { generate } from 'critical';
 
 import { URL_DELIMITER } from '@eleventy-packages/common';
 
+import { findStyles } from './bundle';
+import {
+	CLEAR_STYLE_LINK_REGEXP,
+	STYLESHEET_LINK_WITH_HASH_REGEXP,
+} from './constants';
+
 /** Object that is passed to rebase function in critical package. */
 export interface Asset {
 	readonly url: string;
@@ -55,7 +61,11 @@ export const separateCriticalCSS = ({
 	criticalOptions,
 }: CriticalCreatorOptions): Promise<CriticalResult> =>
 	generate({
-		html,
+		html: findStyles(html, STYLESHEET_LINK_WITH_HASH_REGEXP).reduce(
+			(html, link) =>
+				html.replace(link, link.match(CLEAR_STYLE_LINK_REGEXP)?.[1] || link),
+			html,
+		),
 		base: buildDirectory,
 		inline: true,
 		extract: true,