agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css replace: Don't choke on parenthesis in urls

Browse Source
This commit is contained in:
Joseph Garrone 2024-07-14 17:45:34 +02:00
parent dabe372360
commit 70ac07d861
2 changed files with 58 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/bin/keycloakify/replacers/replaceImportsInCssCode.ts
View File

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

16
test/bin/replacers.spec.ts
View File

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