Always use quotes in CSS urls

This commit is contained in:
Joseph Garrone 2024-07-14 16:58:35 +02:00
parent a147084458
commit d8e3fdeb14
2 changed files with 14 additions and 14 deletions

View File

@ -37,7 +37,7 @@ export function replaceImportsInCssCode(params: {
break inline_style_in_html; 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( const assetFileRelativeUrlPathname = posix.relative(
@ -45,7 +45,7 @@ export function replaceImportsInCssCode(params: {
assetFileAbsoluteUrlPathname.replace(/^\//, "") assetFileAbsoluteUrlPathname.replace(/^\//, "")
); );
return `url(${assetFileRelativeUrlPathname})`; return `url("${assetFileRelativeUrlPathname}")`;
} }
); );

View File

@ -403,15 +403,15 @@ describe("css replacer", () => {
const fixedCssCodeExpected = ` const fixedCssCodeExpected = `
.my-div { .my-div {
background: url(../background.png) no-repeat center center; background: url("../background.png") no-repeat center center;
} }
.my-div2 { .my-div2 {
background: url(background.png) repeat center center; background: url("background.png") repeat center center;
} }
.my-div3 { .my-div3 {
background-image: url(media/something.svg); background-image: url("media/something.svg");
} }
`; `;
@ -441,15 +441,15 @@ describe("css replacer", () => {
const fixedCssCodeExpected = ` const fixedCssCodeExpected = `
.my-div { .my-div {
background: url(../background.png) no-repeat center center; background: url("../background.png") no-repeat center center;
} }
.my-div2 { .my-div2 {
background: url(background.png) repeat center center; background: url("background.png") repeat center center;
} }
.my-div3 { .my-div3 {
background-image: url(media/something.svg); background-image: url("media/something.svg");
} }
`; `;
@ -479,15 +479,15 @@ describe("css replacer", () => {
const fixedCssCodeExpected = ` const fixedCssCodeExpected = `
.my-div { .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 { .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 { .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 = ` const fixedCssCodeExpected = `
.my-div { .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 { .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 { .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");
} }
`; `;