keycloakify 10.0.0-rc.73 → 10.0.0-rc.75

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "10.0.0-rc.73",
+    "version": "10.0.0-rc.75",
     "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",
@@ -478,7 +478,6 @@
         "src/bin/keycloakify/index.ts",
         "src/bin/keycloakify/keycloakify.ts",
         "src/bin/keycloakify/replacers/replaceImportsInCssCode.ts",
-        "src/bin/keycloakify/replacers/replaceImportsInInlineCssCode.ts",
         "src/bin/keycloakify/replacers/replaceImportsInJsCode/index.ts",
         "src/bin/keycloakify/replacers/replaceImportsInJsCode/replaceImportsInJsCode.ts",
         "src/bin/keycloakify/replacers/replaceImportsInJsCode/vite.ts",
@@ -769,21 +768,21 @@
         "bin/main.js",
         "bin/180.index.js",
         "bin/193.index.js",
-        "bin/246.index.js",
+        "bin/266.index.js",
+        "bin/304.index.js",
         "bin/36.index.js",
-        "bin/363.index.js",
-        "bin/420.index.js",
         "bin/430.index.js",
+        "bin/440.index.js",
         "bin/453.index.js",
         "bin/456.index.js",
         "bin/490.index.js",
-        "bin/509.index.js",
         "bin/525.index.js",
         "bin/526.index.js",
         "bin/538.index.js",
+        "bin/720.index.js",
         "bin/751.index.js",
-        "bin/772.index.js",
         "bin/837.index.js",
+        "bin/877.index.js",
         "bin/932.index.js",
         "bin/97.index.js",
         "bin/shared/constants.js",
@@ -861,7 +860,6 @@
         "lint-staged": "^11.0.0",
         "magic-string": "^0.30.7",
         "make-fetch-happen": "^11.0.3",
-        "patch-package": "^8.0.0",
         "powerhooks": "^1.0.10",
         "prettier": "^3.2.5",
         "properties-parser": "^0.3.1",
@@ -870,7 +868,7 @@
         "recast": "^0.23.3",
         "run-exclusive": "^2.2.19",
         "storybook-dark-mode": "^1.1.2",
-        "termost": "^0.12.0",
+        "termost": "^v0.12.1",
         "tsc-alias": "^1.8.10",
         "tss-react": "^4.9.10",
         "typescript": "^4.9.1-beta",

package/src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -1,7 +1,6 @@
 import cheerio from "cheerio";
 import { replaceImportsInJsCode } from "../replacers/replaceImportsInJsCode";
-import { generateCssCodeToDefineGlobals } from "../replacers/replaceImportsInCssCode";
-import { replaceImportsInInlineCssCode } from "../replacers/replaceImportsInInlineCssCode";
+import { replaceImportsInCssCode } from "../replacers/replaceImportsInCssCode";
 import * as fs from "fs";
 import { join as pathJoin } from "path";
 import type { BuildContext } from "../../shared/buildContext";
@@ -28,7 +27,6 @@ assert<BuildContext extends BuildContextLike ? true : false>();
 export function generateFtlFilesCodeFactory(params: {
     themeName: string;
     indexHtmlCode: string;
-    cssGlobalsToDefine: Record<string, string>;
     buildContext: BuildContextLike;
     keycloakifyVersion: string;
     themeType: ThemeType;
@@ -36,7 +34,6 @@ export function generateFtlFilesCodeFactory(params: {
 }) {
     const {
         themeName,
-        cssGlobalsToDefine,
         indexHtmlCode,
         buildContext,
         keycloakifyVersion,
@@ -65,8 +62,9 @@ export function generateFtlFilesCodeFactory(params: {
 
             assert(cssCode !== null);
 
-            const { fixedCssCode } = replaceImportsInInlineCssCode({
+            const { fixedCssCode } = replaceImportsInCssCode({
                 cssCode,
+                fileRelativeDirPath: ".",
                 buildContext
             });
 
@@ -97,21 +95,6 @@ export function generateFtlFilesCodeFactory(params: {
                 );
             })
         );
-
-        if (Object.keys(cssGlobalsToDefine).length !== 0) {
-            $("head").prepend(
-                [
-                    "",
-                    "<style>",
-                    generateCssCodeToDefineGlobals({
-                        cssGlobalsToDefine,
-                        buildContext
-                    }).cssCodeToPrependInHead,
-                    "</style>",
-                    ""
-                ].join("\n")
-            );
-        }
     }
 
     //FTL is no valid html, we can't insert with cheerio, we put placeholder for injecting later.

package/src/bin/keycloakify/generateResources/generateResourcesForMainTheme.ts

@@ -1,6 +1,11 @@
 import { transformCodebase } from "../../tools/transformCodebase";
 import * as fs from "fs";
-import { join as pathJoin, resolve as pathResolve, relative as pathRelative } from "path";
+import {
+    join as pathJoin,
+    resolve as pathResolve,
+    relative as pathRelative,
+    dirname as pathDirname
+} from "path";
 import { replaceImportsInJsCode } from "../replacers/replaceImportsInJsCode";
 import { replaceImportsInCssCode } from "../replacers/replaceImportsInCssCode";
 import {
@@ -64,8 +69,6 @@ export async function generateResourcesForMainTheme(params: {
         return pathJoin(resourcesDirPath, "theme", themeName, themeType);
     };
 
-    const cssGlobalsToDefine: Record<string, string> = {};
-
     for (const themeType of ["login", "account"] as const) {
         if (!buildContext.recordIsImplementedByThemeType[themeType]) {
             continue;
@@ -127,21 +130,14 @@ export async function generateResourcesForMainTheme(params: {
             transformCodebase({
                 srcDirPath: buildContext.projectBuildDirPath,
                 destDirPath,
-                transformSourceCode: ({ filePath, sourceCode }) => {
+                transformSourceCode: ({ filePath, fileRelativePath, sourceCode }) => {
                     if (filePath.endsWith(".css")) {
-                        const {
-                            cssGlobalsToDefine: cssGlobalsToDefineForThisFile,
-                            fixedCssCode
-                        } = replaceImportsInCssCode({
-                            cssCode: sourceCode.toString("utf8")
+                        const { fixedCssCode } = replaceImportsInCssCode({
+                            cssCode: sourceCode.toString("utf8"),
+                            fileRelativeDirPath: pathDirname(fileRelativePath),
+                            buildContext
                         });
 
-                        Object.entries(cssGlobalsToDefineForThisFile).forEach(
-                            ([key, value]) => {
-                                cssGlobalsToDefine[key] = value;
-                            }
-                        );
-
                         return {
                             modifiedSourceCode: Buffer.from(fixedCssCode, "utf8")
                         };
@@ -168,7 +164,6 @@ export async function generateResourcesForMainTheme(params: {
             indexHtmlCode: fs
                 .readFileSync(pathJoin(buildContext.projectBuildDirPath, "index.html"))
                 .toString("utf8"),
-            cssGlobalsToDefine,
             buildContext,
             keycloakifyVersion: readThisNpmPackageVersion(),
             themeType,

package/src/bin/keycloakify/replacers/replaceImportsInCssCode.ts

@@ -1,7 +1,6 @@
-import * as crypto from "crypto";
 import type { BuildContext } from "../../shared/buildContext";
 import { assert } from "tsafe/assert";
-import { basenameOfTheKeycloakifyResourcesDir } from "../../shared/constants";
+import { posix } from "path";
 
 export type BuildContextLike = {
     urlPathname: string | undefined;
@@ -9,68 +8,37 @@ export type BuildContextLike = {
 
 assert<BuildContext extends BuildContextLike ? true : false>();
 
-export function replaceImportsInCssCode(params: { cssCode: string }): {
-    fixedCssCode: string;
-    cssGlobalsToDefine: Record<string, string>;
-} {
-    const { cssCode } = params;
-
-    const cssGlobalsToDefine: Record<string, string> = {};
-
-    new Set(cssCode.match(/url\(["']?\/[^/][^)"']+["']?\)[^;}]*?/g) ?? []).forEach(
-        match =>
-            (cssGlobalsToDefine[
-                "url" +
-                    crypto
-                        .createHash("sha256")
-                        .update(match)
-                        .digest("hex")
-                        .substring(0, 15)
-            ] = match)
-    );
-
-    let fixedCssCode = cssCode;
-
-    Object.keys(cssGlobalsToDefine).forEach(
-        cssVariableName =>
-            //NOTE: split/join pattern ~ replace all
-            (fixedCssCode = fixedCssCode
-                .split(cssGlobalsToDefine[cssVariableName])
-                .join(`var(--${cssVariableName})`))
-    );
-
-    return { fixedCssCode, cssGlobalsToDefine };
-}
-
-export function generateCssCodeToDefineGlobals(params: {
-    cssGlobalsToDefine: Record<string, string>;
+export function replaceImportsInCssCode(params: {
+    cssCode: string;
+    fileRelativeDirPath: string;
     buildContext: BuildContextLike;
 }): {
-    cssCodeToPrependInHead: string;
+    fixedCssCode: string;
 } {
-    const { cssGlobalsToDefine, buildContext } = params;
+    const { cssCode, fileRelativeDirPath, 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;
+                }
+                assetFileAbsoluteUrlPathname = assetFileAbsoluteUrlPathname.replace(
+                    buildContext.urlPathname,
+                    "/"
+                );
+            }
+
+            const assetFileRelativeUrlPathname = posix.relative(
+                fileRelativeDirPath.replace(/\\/g, "/"),
+                assetFileAbsoluteUrlPathname.replace(/^\//, "")
+            );
+
+            return `url(${assetFileRelativeUrlPathname})`;
+        }
+    );
 
-    return {
-        cssCodeToPrependInHead: [
-            ":root {",
-            ...Object.keys(cssGlobalsToDefine)
-                .map(cssVariableName =>
-                    [
-                        `--${cssVariableName}:`,
-                        cssGlobalsToDefine[cssVariableName].replace(
-                            new RegExp(
-                                `url\\(${(buildContext.urlPathname ?? "/").replace(
-                                    /\//g,
-                                    "\\/"
-                                )}`,
-                                "g"
-                            ),
-                            `url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/`
-                        )
-                    ].join(" ")
-                )
-                .map(line => `    ${line};`),
-            "}"
-        ].join("\n")
-    };
+    return { fixedCssCode };
 }