From 961c4b20da6204127b22d1838033db9b01539cf5 Mon Sep 17 00:00:00 2001
From: Thorn Walli <lammpee@gmail.com>
Date: Mon, 30 Oct 2023 16:51:20 +0100
Subject: [PATCH] =?UTF-8?q?fix(preload):=20fix=20invalid=20css=20url=20pat?=
 =?UTF-8?q?hs=20and=20=E2=80=A6=20-=20disabled=20[experimental]=20`inlineS?=
 =?UTF-8?q?SRStyles`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/preload.mjs | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/utils/preload.mjs b/src/utils/preload.mjs
index 0a4b72bb25..db1033209c 100644
--- a/src/utils/preload.mjs
+++ b/src/utils/preload.mjs
@@ -1,5 +1,5 @@
 import { promises as fsPromises } from 'fs';
-import { basename, dirname, join } from 'path';
+import { basename, dirname, join, resolve } from 'path';
 import { parseDocument } from 'htmlparser2';
 import { load } from 'cheerio';
 import { render } from 'dom-serializer';
@@ -16,7 +16,7 @@ export function optimizePreloads(moduleOptions, nuxt) {
     }
   }
 
-  nuxt.options.experimental.inlineSSRStyles = true;
+  nuxt.options.experimental.inlineSSRStyles = false;
 
   nuxt.hook('nitro:init', nitro => {
     nitro.hooks.hook('prerender:generate', async route => {
@@ -50,8 +50,15 @@ export function optimizePreloads(moduleOptions, nuxt) {
               const filepath = join(publicDir, basename($el.attr('href')));
               const fileContent = await fsPromises.readFile(filepath, 'utf-8');
 
+              let urls = getUrlValues(fileContent);
+              urls = prepareUrls(urls, dir);
+
               if (disableNuxtCritters) {
-                const css = fileContent.replace(/url\(.\//g, `url(${dir}/`);
+                const css = urls.reduce(
+                  (result, [a, b]) => result.replace(a, b),
+                  fileContent
+                );
+
                 $el.remove();
                 logger.info(
                   `Embed CSS File \`${basename($el.attr('href'))}\`; Route: \`${
@@ -85,3 +92,16 @@ export function optimizePreloads(moduleOptions, nuxt) {
     });
   });
 }
+
+function getUrlValues(css) {
+  return css.match(/url\(([^)]+)\)/g);
+}
+
+function prepareUrls(urls, relativeDir) {
+  return urls.map(url => {
+    return [
+      url,
+      `url(${resolve(relativeDir, url.replace(/^url\((.*)\)$/, '$1'))})`
+    ];
+  });
+}