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

Fix inline CSS in html

Browse Source
This commit is contained in:
Joseph Garrone 2024-06-19 22:41:25 +02:00
parent 8819abc418
commit 12fd6160c5
4 changed files with 92 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/bin/keycloakify/generateFtl/generateFtl.ts
View File

@ -64,7 +64,7 @@ export function generateFtlFilesCodeFactory(params: {
const { fixedCssCode } = replaceImportsInCssCode({
cssCode,
fileRelativeDirPath: ".",
cssFileRelativeDirPath: undefined,
buildContext
});

2
src/bin/keycloakify/generateResources/generateResourcesForMainTheme.ts
View File

@ -134,7 +134,7 @@ export async function generateResourcesForMainTheme(params: {
if (filePath.endsWith(".css")) {
const { fixedCssCode } = replaceImportsInCssCode({
cssCode: sourceCode.toString("utf8"),
fileRelativeDirPath: pathDirname(fileRelativePath),
cssFileRelativeDirPath: pathDirname(fileRelativePath),
buildContext
});

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

@ -1,4 +1,5 @@
import type { BuildContext } from "../../shared/buildContext";
import { basenameOfTheKeycloakifyResourcesDir } from "../../shared/constants";
import { assert } from "tsafe/assert";
import { posix } from "path";
@ -10,12 +11,12 @@ assert<BuildContext extends BuildContextLike ? true : false>();
export function replaceImportsInCssCode(params: {
cssCode: string;
fileRelativeDirPath: string;
cssFileRelativeDirPath: string | undefined;
buildContext: BuildContextLike;
}): {
fixedCssCode: string;
} {
const { cssCode, fileRelativeDirPath, buildContext } = params;
const { cssCode, cssFileRelativeDirPath, buildContext } = params;
const fixedCssCode = cssCode.replace(
/url\(["']?(\/[^/][^)"']+)["']?\)/g,
@ -31,8 +32,16 @@ export function replaceImportsInCssCode(params: {
);
}
inline_style_in_html: {
if (cssFileRelativeDirPath !== undefined) {
break inline_style_in_html;
}
return `url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}${assetFileAbsoluteUrlPathname})`;
}
const assetFileRelativeUrlPathname = posix.relative(
fileRelativeDirPath.replace(/\\/g, "/"),
cssFileRelativeDirPath.replace(/\\/g, "/"),
assetFileAbsoluteUrlPathname.replace(/^\//, "")
);

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

@ -395,7 +395,7 @@ describe("css replacer", () => {
background-image: url(/assets/media/something.svg);
}
`,
fileRelativeDirPath: "assets/",
cssFileRelativeDirPath: "assets/",
buildContext: {
urlPathname: undefined
}
@ -433,7 +433,7 @@ describe("css replacer", () => {
background-image: url(/a/b/assets/media/something.svg);
}
`,
fileRelativeDirPath: "assets/",
cssFileRelativeDirPath: "assets/",
buildContext: {
urlPathname: "/a/b/"
}
@ -455,6 +455,82 @@ describe("css replacer", () => {
expect(isSameCode(fixedCssCode, fixedCssCodeExpected)).toBe(true);
});
it("replaceImportsInCssCode - 3", () => {
const { fixedCssCode } = replaceImportsInCssCode({
cssCode: `
.my-div {
background: url(/a/b/background.png) no-repeat center center;
}
.my-div2 {
background: url(/a/b/assets/background.png) repeat center center;
}
.my-div3 {
background-image: url(/a/b/assets/media/something.svg);
}
`,
cssFileRelativeDirPath: undefined,
buildContext: {
urlPathname: "/a/b/"
}
});
const fixedCssCodeExpected = `
.my-div {
background: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/background.png) no-repeat center center;
}
.my-div2 {
background: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/assets/background.png) repeat center center;
}
.my-div3 {
background-image: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/assets/media/something.svg);
}
`;
expect(isSameCode(fixedCssCode, fixedCssCodeExpected)).toBe(true);
});
it("replaceImportsInCssCode - 4", () => {
const { fixedCssCode } = replaceImportsInCssCode({
cssCode: `
.my-div {
background: url(/background.png) no-repeat center center;
}
.my-div2 {
background: url(/assets/background.png) repeat center center;
}
.my-div3 {
background-image: url(/assets/media/something.svg);
}
`,
cssFileRelativeDirPath: undefined,
buildContext: {
urlPathname: undefined
}
});
const fixedCssCodeExpected = `
.my-div {
background: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/background.png) no-repeat center center;
}
.my-div2 {
background: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/assets/background.png) repeat center center;
}
.my-div3 {
background-image: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/assets/media/something.svg);
}
`;
expect(isSameCode(fixedCssCode, fixedCssCodeExpected)).toBe(true);
});
});
export function isSameCode(code1: string, code2: string): boolean {