Fix lazy loading of css chunks #141

src/bin/build-keycloak-theme/replaceImportFromStatic.ts

@@ -16,10 +16,9 @@ export function replaceImportsFromStaticInJsCode(params: { jsCode: string; urlOr
 
     const { jsCode, urlOrigin } = params;
 
-    const fixedJsCode = jsCode
+    const getReplaceArgs = (language: "js" | "css"): Parameters<typeof String.prototype.replace> => [
-        .replace(
+        new RegExp(`([a-zA-Z]+)\\.([a-zA-Z]+)=function\\(([a-zA-Z]+)\\){return"static\\/${language}\\/"`, "g"),
-            /([a-zA-Z]+)\.([a-zA-Z]+)=function\(([a-zA-Z]+)\){return"static\/js\/"/g,
+        (...[, n, u, e]) => `
-            (...[, n, u, e]) => `
 			${n}[(function(){
                 ${
                     urlOrigin === undefined
@@ -38,8 +37,12 @@ export function replaceImportsFromStaticInJsCode(params: { jsCode: string; urlOr
                     `
                 }
 				return "${u}";
-			})()] = function(${e}) { return "${urlOrigin === undefined ? "/build/" : ""}static/js/"`,
+			})()] = function(${e}) { return "${urlOrigin === undefined ? "/build/" : ""}static/${language}/"`,
-        )
+    ];
+
+    const fixedJsCode = jsCode
+        .replace(...getReplaceArgs("js"))
+        .replace(...getReplaceArgs("css"))
         .replace(/([a-zA-Z]+\.[a-zA-Z]+)\+"static\//g, (...[, group]) =>
             urlOrigin === undefined
                 ? `window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/`

src/test/bin/replaceImportFromStatic.ts

@@ -35,6 +35,12 @@ import { assetIsSameCode } from "../tools/assertIsSameCode";
                 922: "be170a73"
             } [e] + ".chunk.js"
         }
+
+        t.miniCssF=function(e){return"static/css/"+e+"."+{
+                164:"dcfd7749",
+                908:"67c9ed2c"
+            }[e]+".chunk.css"
+        }
     `;
 
     {
@@ -69,6 +75,20 @@ import { assetIsSameCode } from "../tools/assertIsSameCode";
                     922: "be170a73"
                 } [e] + ".chunk.js"
             }
+
+            t[(function (){
+                Object.defineProperty(t, "p", {
+                    get: function() { return window.kcContext.url.resourcesPath; },
+                    set: function (){}
+                });
+                return "miniCssF";
+            })()] = function(e) {
+                return "/build/static/css/" + e + "." + {
+                    164:"dcfd7749",
+                    908:"67c9ed2c"
+                } [e] + ".chunk.css"
+            }
+
         `;
 
         assetIsSameCode(fixedJsCode, fixedJsCodeExpected);
@@ -107,6 +127,20 @@ import { assetIsSameCode } from "../tools/assertIsSameCode";
                     922: "be170a73"
                 } [e] + ".chunk.js"
             }
+
+            t[(function (){
+                var p= "";
+                Object.defineProperty(t, "p", {
+                    get: function() { return ("kcContext" in window ? "https://demo-app.keycloakify.dev" : "") + p; },
+                    set: function (value){ p = value; }
+                });
+                return "miniCssF";
+            })()] = function(e) {
+                return "static/css/" + e + "." + {
+                    164:"dcfd7749",
+                    908:"67c9ed2c"
+                } [e] + ".chunk.css"
+            }
         `;
 
         assetIsSameCode(fixedJsCode, fixedJsCodeExpected);