diff --git a/src/bin/keycloakify/replacers/replaceImportsInCssCode.ts b/src/bin/keycloakify/replacers/replaceImportsInCssCode.ts index 35adfacf..707f6e5a 100644 --- a/src/bin/keycloakify/replacers/replaceImportsInCssCode.ts +++ b/src/bin/keycloakify/replacers/replaceImportsInCssCode.ts @@ -18,35 +18,49 @@ export function replaceImportsInCssCode(params: { } { const { cssCode, cssFileRelativeDirPath, buildContext } = params; - const fixedCssCode = cssCode.replace( - /url\(["']?(\/[^/][^)"']+)["']?\)/g, - (match, assetFileAbsoluteUrlPathname) => { - if (buildContext.urlPathname !== undefined) { - if (!assetFileAbsoluteUrlPathname.startsWith(buildContext.urlPathname)) { - // NOTE: Should never happen - return match; + let fixedCssCode = cssCode; + + [ + /url\("(\/[^/][^"]+)"\)/g, + /url\('(\/[^/][^']+)'\)/g, + /url\((\/[^/][^)]+)\)/g + ].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 }; diff --git a/test/bin/replacers.spec.ts b/test/bin/replacers.spec.ts index 998ad975..7732074e 100644 --- a/test/bin/replacers.spec.ts +++ b/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);