From d8e3fdeb1490c502298897dddce32ca2bf59a7f1 Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Sun, 14 Jul 2024 16:58:35 +0200
Subject: [PATCH] Always use quotes in CSS urls

---
 .../replacers/replaceImportsInCssCode.ts      |  4 ++--
 test/bin/replacers.spec.ts                    | 24 +++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/bin/keycloakify/replacers/replaceImportsInCssCode.ts b/src/bin/keycloakify/replacers/replaceImportsInCssCode.ts
index 41306d85..35adfacf 100644
--- a/src/bin/keycloakify/replacers/replaceImportsInCssCode.ts
+++ b/src/bin/keycloakify/replacers/replaceImportsInCssCode.ts
@@ -37,7 +37,7 @@ export function replaceImportsInCssCode(params: {
                     break inline_style_in_html;
                 }
 
-                return `url(\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}${assetFileAbsoluteUrlPathname})`;
+                return `url("\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}${assetFileAbsoluteUrlPathname}")`;
             }
 
             const assetFileRelativeUrlPathname = posix.relative(
@@ -45,7 +45,7 @@ export function replaceImportsInCssCode(params: {
                 assetFileAbsoluteUrlPathname.replace(/^\//, "")
             );
 
-            return `url(${assetFileRelativeUrlPathname})`;
+            return `url("${assetFileRelativeUrlPathname}")`;
         }
     );
 
diff --git a/test/bin/replacers.spec.ts b/test/bin/replacers.spec.ts
index 9635a104..998ad975 100644
--- a/test/bin/replacers.spec.ts
+++ b/test/bin/replacers.spec.ts
@@ -403,15 +403,15 @@ describe("css replacer", () => {
 
         const fixedCssCodeExpected = `
             .my-div {
-                background: url(../background.png) no-repeat center center;
+                background: url("../background.png") no-repeat center center;
             }
     
             .my-div2 {
-                background: url(background.png) repeat center center;
+                background: url("background.png") repeat center center;
             }
     
             .my-div3 {
-                background-image: url(media/something.svg);
+                background-image: url("media/something.svg");
             }
         `;
 
@@ -441,15 +441,15 @@ describe("css replacer", () => {
 
         const fixedCssCodeExpected = `
             .my-div {
-                background: url(../background.png) no-repeat center center;
+                background: url("../background.png") no-repeat center center;
             }
     
             .my-div2 {
-                background: url(background.png) repeat center center;
+                background: url("background.png") repeat center center;
             }
     
             .my-div3 {
-                background-image: url(media/something.svg);
+                background-image: url("media/something.svg");
             }
         `;
 
@@ -479,15 +479,15 @@ describe("css replacer", () => {
 
         const fixedCssCodeExpected = `
             .my-div {
-                background: url(\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/background.png) no-repeat center center;
+                background: url("\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/background.png") no-repeat center center;
             }
     
             .my-div2 {
-                background: url(\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/assets/background.png) repeat center center;
+                background: url("\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/assets/background.png") repeat center center;
             }
     
             .my-div3 {
-                background-image: url(\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/assets/media/something.svg);
+                background-image: url("\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/assets/media/something.svg");
             }
         `;
 
@@ -517,15 +517,15 @@ describe("css replacer", () => {
 
         const fixedCssCodeExpected = `
             .my-div {
-                background: url(\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/background.png) no-repeat center center;
+                background: url("\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/background.png") no-repeat center center;
             }
     
             .my-div2 {
-                background: url(\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/assets/background.png) repeat center center;
+                background: url("\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/assets/background.png") repeat center center;
             }
     
             .my-div3 {
-                background-image: url(\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/assets/media/something.svg);
+                background-image: url("\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/assets/media/something.svg");
             }
         `;