diff --git a/packages/eleventy-plugin-styles/CHANGELOG.md b/packages/eleventy-plugin-styles/CHANGELOG.md index ba1f765..5a4e16a 100644 --- 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 index 97194ed..2595883 100644 --- 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 = (linker: Linker) => diff --git a/packages/eleventy-plugin-styles/src/constants.ts b/packages/eleventy-plugin-styles/src/constants.ts index 453f218..6e05580 100644 --- 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 = /]*href=(?:'|")([^"]+\.(?:css|scss|sass|less))(?:'|")[^>]*>/g; + +export const STYLESHEET_LINK_WITH_HASH_REGEXP = + /]*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 index bf0d723..7e826e0 100644 --- 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 => 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,