Release candidate

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "10.0.0-rc.113",
+    "version": "10.0.0-rc.116",
     "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",

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 };

src/lib/getKcClsx.ts

@@ -71,14 +71,10 @@ export function createGetKcClsx<ClassKey extends string>(params: {
                 transform: classKey => {
                     assert(is<ClassKey>(classKey));
 
-                    const className = classes?.[classKey];
-
                     return clsx(
                         classKey,
-                        doUseDefaultCss && !className?.split(" ").includes("CLEAR")
+                        classes?.[classKey] ??
-                            ? defaultClasses[classKey]
+                            (doUseDefaultCss ? defaultClasses[classKey] : undefined)
-                            : undefined,
-                        className
                     );
                 }
             });

src/login/UserProfileFormFields.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useReducer, Fragment } from "react";
-import { assert } from "tsafe/assert";
+import { assert } from "keycloakify/tools/assert";
 import type { KcClsx } from "keycloakify/login/lib/kcClsx";
 import {
     useUserProfileForm,

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);