css replace: Don't choke on parenthesis in urls

src/bin/keycloakify/replacers/replaceImportsInCssCode.ts

@@ -18,35 +18,49 @@ export function replaceImportsInCssCode(params: {
 } {
     const { cssCode, cssFileRelativeDirPath, buildContext } = params;
 
-    const fixedCssCode = cssCode.replace(
+    let fixedCssCode = cssCode;
-        /url\(["']?(\/[^/][^)"']+)["']?\)/g,
+
-        (match, assetFileAbsoluteUrlPathname) => {
+    [
-            if (buildContext.urlPathname !== undefined) {
+        /url\("(\/[^/][^"]+)"\)/g,
-                if (!assetFileAbsoluteUrlPathname.startsWith(buildContext.urlPathname)) {
+        /url\('(\/[^/][^']+)'\)/g,
-                    // NOTE: Should never happen
+        /url\((\/[^/][^)]+)\)/g
-                    return match;
+    ].forEach(
+        regex =>
+            (fixedCssCode = fixedCssCode.replace(
+                regex,
+                (match, assetFileAbsoluteUrlPathname) => {
+                    if (buildContext.urlPathname !== undefined) {
+                        if (
+                            !assetFileAbsoluteUrlPathname.startsWith(
+                                buildContext.urlPathname
+                            )
+                        ) {
+                            // NOTE: Should never happen
+                            return match;
+                        }
+                        assetFileAbsoluteUrlPathname =
+                            assetFileAbsoluteUrlPathname.replace(
+                                buildContext.urlPathname,
+                                "/"
+                            );
+                    }
+
+                    inline_style_in_html: {
+                        if (cssFileRelativeDirPath !== undefined) {
+                            break inline_style_in_html;
+                        }
+
+                        return `url("\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}${assetFileAbsoluteUrlPathname}")`;
+                    }
+
+                    const assetFileRelativeUrlPathname = posix.relative(
+                        cssFileRelativeDirPath.replace(/\\/g, "/"),
+                        assetFileAbsoluteUrlPathname.replace(/^\//, "")
+                    );
+
+                    return `url("${assetFileRelativeUrlPathname}")`;
                 }
-                assetFileAbsoluteUrlPathname = assetFileAbsoluteUrlPathname.replace(
+            ))
-                    buildContext.urlPathname,
-                    "/"
-                );
-            }
-
-            inline_style_in_html: {
-                if (cssFileRelativeDirPath !== undefined) {
-                    break inline_style_in_html;
-                }
-
-                return `url("\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}${assetFileAbsoluteUrlPathname}")`;
-            }
-
-            const assetFileRelativeUrlPathname = posix.relative(
-                cssFileRelativeDirPath.replace(/\\/g, "/"),
-                assetFileAbsoluteUrlPathname.replace(/^\//, "")
-            );
-
-            return `url("${assetFileRelativeUrlPathname}")`;
-        }
     );
 
     return { fixedCssCode };

test/bin/replacers.spec.ts

@@ -394,6 +394,14 @@ describe("css replacer", () => {
                 .my-div3 {
                     background-image: url(/assets/media/something.svg);
                 }
+
+                .my-div4 {
+                    background-image: url("/assets/media/something(cool).svg");
+                }
+
+                .my-div5 {
+                    background-image: url('/assets/media/something(cool).svg');
+                }
             `,
             cssFileRelativeDirPath: "assets/",
             buildContext: {
@@ -413,6 +421,14 @@ describe("css replacer", () => {
             .my-div3 {
                 background-image: url("media/something.svg");
             }
+
+            .my-div4 {
+                background-image: url("media/something(cool).svg");
+            }
+
+            .my-div5 {
+                background-image: url("media/something(cool).svg");
+            }
         `;
 
         expect(isSameCode(fixedCssCode, fixedCssCodeExpected)).toBe(true);