Handle <style> tag, improve documentation

src/bin/build-keycloak-theme/generateFtl/index.ts

@@ -2,7 +2,8 @@
 
 import cheerio from "cheerio";
 import {
-    replaceImportFromStaticInJsCode,
+    replaceImportsFromStaticInJsCode,
+    replaceImportsInInlineCssCode,
     generateCssCodeToDefineGlobals
 } from "../replaceImportFromStatic";
 import fs from "fs";
@@ -53,7 +54,7 @@ export function generateFtlFilesCodeFactory(
 
     $("script:not([src])").each((...[, element]) => {
 
-        const { fixedJsCode } = replaceImportFromStaticInJsCode({
+        const { fixedJsCode } = replaceImportsFromStaticInJsCode({
             ftlValuesGlobalName,
             "jsCode": $(element).html()!,
             mode
@@ -63,6 +64,17 @@ export function generateFtlFilesCodeFactory(
 
     });
 
+    $("style").each((...[, element]) => {
+
+        const { fixedCssCode } = replaceImportsInInlineCssCode({
+            "cssCode": $(element).html()!,
+            mode
+        });
+
+        $(element).text(fixedCssCode);
+
+    });
+
     ([
         ["link", "href"],
         ["script", "src"],

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

@@ -3,8 +3,8 @@ import { transformCodebase } from "../tools/transformCodebase";
 import * as fs from "fs";
 import { join as pathJoin } from "path";
 import {
-    replaceImportFromStaticInCssCode,
-    replaceImportFromStaticInJsCode
+    replaceImportsInCssCode,
+    replaceImportsFromStaticInJsCode
 } from "./replaceImportFromStatic";
 import { generateFtlFilesCodeFactory, pageIds, Mode } from "./generateFtl";
 import { builtinThemesUrl } from "../install-builtin-keycloak-themes";
@@ -49,7 +49,7 @@ export function generateKeycloakThemeResources(
 
                 if (/\.css?$/i.test(filePath)) {
 
-                    const { cssGlobalsToDefine, fixedCssCode } = replaceImportFromStaticInCssCode(
+                    const { cssGlobalsToDefine, fixedCssCode } = replaceImportsInCssCode(
                         { "cssCode": sourceCode.toString("utf8") }
                     );
 
@@ -64,7 +64,7 @@ export function generateKeycloakThemeResources(
 
                 if (/\.js?$/i.test(filePath)) {
 
-                    const { fixedJsCode } = replaceImportFromStaticInJsCode({
+                    const { fixedJsCode } = replaceImportsFromStaticInJsCode({
                         "jsCode": sourceCode.toString("utf8"),
                         ftlValuesGlobalName,
                         mode

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

@@ -9,7 +9,7 @@ type Mode = {
     urlPathname: string;
 }
 
-export function replaceImportFromStaticInJsCode(
+export function replaceImportsFromStaticInJsCode(
     params: {
         ftlValuesGlobalName: string;
         jsCode: string;
@@ -19,27 +19,48 @@ export function replaceImportFromStaticInJsCode(
 
     const { jsCode, ftlValuesGlobalName, mode } = params;
 
-    const fixedJsCode = (() => {
-        switch (mode.type) {
-            case "standalone":
-                return jsCode!.replace(
-                    /[a-z]+\.[a-z]+\+"static\//g,
-                    `window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/`
-                );
-            case "external assets":
-                return jsCode!.replace(
-                    /[a-z]+\.[a-z]+\+"static\//g,
-                    `"${mode.urlOrigin}${mode.urlPathname}static/`
-                );
-        }
-    })();
-
+    const fixedJsCode = jsCode.replace(
+        /[a-z]+\.[a-z]+\+"static\//g,
+        (() => {
+            switch (mode.type) {
+                case "standalone":
+                    return `window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/`;
+                case "external assets":
+                    return `"${mode.urlOrigin}${mode.urlPathname}static/`;
+            }
+        })()
+    );
 
     return { fixedJsCode };
 
 }
 
-export function replaceImportFromStaticInCssCode(
+export function replaceImportsInInlineCssCode(
+    params: {
+        cssCode: string;
+        mode: Mode;
+    }
+): { fixedCssCode: string; } {
+
+    const { cssCode, mode } = params;
+
+    const fixedCssCode = cssCode.replace(
+        /url\((\/[^/][^)]+)\)/g,
+        (...[,group])=> `url(${
+            (()=>{
+                switch(mode.type){
+                    case "standalone": return "${url.resourcesPath}/build" + group;
+                    case "external assets": return mode.urlOrigin + group
+                }
+            })()
+        })`
+    );
+
+    return { fixedCssCode };
+
+}
+
+export function replaceImportsInCssCode(
     params: {
         cssCode: string;
     }
@@ -52,7 +73,7 @@ export function replaceImportFromStaticInCssCode(
 
     const cssGlobalsToDefine: Record<string, string> = {};
 
-    new Set(cssCode.match(/url\(\/[^)]+\)[^;}]*/g) ?? [])
+    new Set(cssCode.match(/url\(\/[^/][^)]+\)[^;}]*/g) ?? [])
         .forEach(match =>
             cssGlobalsToDefine[
             "url" + crypto

src/test/replaceImportFromStatic.ts

@@ -1,11 +1,11 @@
 
 import { 
-    replaceImportFromStaticInJsCode,
-    replaceImportFromStaticInCssCode,
+    replaceImportsFromStaticInJsCode,
+    replaceImportsInCssCode,
     generateCssCodeToDefineGlobals
 } from "../bin/build-keycloak-theme/replaceImportFromStatic";
 
-const { fixedJsCode } = replaceImportFromStaticInJsCode({
+const { fixedJsCode } = replaceImportsFromStaticInJsCode({
     "ftlValuesGlobalName": "keycloakFtlValues",
     "jsCode": `
         function f() {
@@ -25,7 +25,7 @@ const { fixedJsCode } = replaceImportFromStaticInJsCode({
 
 console.log({ fixedJsCode });
 
-const { fixedCssCode, cssGlobalsToDefine } = replaceImportFromStaticInCssCode({
+const { fixedCssCode, cssGlobalsToDefine } = replaceImportsInCssCode({
     "cssCode": `
 
     .my-div {