Update garronej_modules_update

Configure Renovate

.github/release.yaml

@@ -0,0 +1,25 @@
+changelog:
+  exclude:
+    labels:
+      - ignore-for-release
+    authors:
+      - octocat
+  categories:
+    - title: Breaking Changes 🛠
+      labels:
+        - breaking
+    - title: Exciting New Features 🎉
+      labels:
+        - feature
+    - title: Fixes 🔧
+      labels:
+        - fix
+    - title: Documentation 🔧
+      labels:
+        - docs
+    - title: CI 👷
+      labels:
+        - ci
+    - title: Other Changes
+      labels:
+        - '*'

.github/workflows/ci.yaml

@@ -9,13 +9,14 @@ on:
 
 jobs:
 
-  test_formatting:
+  test_lint:
     runs-on: ubuntu-latest
+    if: ${{ !github.event.created && github.repository != 'garronej/ts-ci' }}
     steps:
     - uses: actions/checkout@v2.3.4
     - uses: actions/setup-node@v2.1.3
-    - uses: bahmutov/npm-install@v1.8.15
-    - name: If this step fails run 'yarn format' then commit again.
+    - uses: bahmutov/npm-install@v1
+    - name: If this step fails run 'npm run lint' and 'npm run format' then commit again.
       run: |
         PACKAGE_MANAGER=npm
         if [ -f "./yarn.lock" ]; then
@@ -24,7 +25,7 @@ jobs:
         $PACKAGE_MANAGER run format:check
   test:
     runs-on: macos-10.15
-    needs: test_formatting
+    needs: test_lint
     env: 
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 
     strategy:
@@ -34,14 +35,14 @@ jobs:
     steps:
     - name: Tell if project is using npm or yarn
       id: step1
-      uses: garronej/ts-ci@v1.1.6
+      uses: garronej/ts-ci@v1.1.4
       with: 
         action_name: tell_if_project_uses_npm_or_yarn
     - uses: actions/checkout@v2.3.4
     - uses: actions/setup-node@v2.1.3
       with:
         node-version: ${{ matrix.node }}
-    - uses: bahmutov/npm-install@v1.8.15
+    - uses: bahmutov/npm-install@v1
     - if: steps.step1.outputs.npm_or_yarn == 'yarn'
       run: |
         yarn build
@@ -66,54 +67,40 @@ jobs:
       is_upgraded_version: ${{ steps.step1.outputs.is_upgraded_version }}
       is_release_beta: ${{steps.step1.outputs.is_release_beta }}
     steps:
-    - uses: garronej/ts-ci@v1.1.6
+    - uses: garronej/ts-ci@v1.1.4
       id: step1
       with: 
         action_name: is_package_json_version_upgraded
         branch: ${{ github.head_ref || github.ref }}
 
-  update_changelog:
-    runs-on: ubuntu-latest
-    needs: check_if_version_upgraded
-    if: needs.check_if_version_upgraded.outputs.is_upgraded_version == 'true'
-    steps:
-    - uses: garronej/ts-ci@v1.1.6
-      with:
-        action_name: update_changelog
-        branch: ${{ github.head_ref || github.ref }}
-
   create_github_release:
     runs-on: ubuntu-latest
+    # We create a release only if the version have been upgraded and we are on a default branch
+    # PR on the default branch can release beta but not real release
+    if: |
+      needs.check_if_version_upgraded.outputs.is_upgraded_version == 'true' &&
+      (
+        github.event_name == 'push' ||
+        needs.check_if_version_upgraded.outputs.is_release_beta == 'true'
+      )
     needs: 
-      - update_changelog
       - check_if_version_upgraded
     steps:
-    - name: Build GitHub release body
-      id: step1
-      run: |
-        if [ "$FROM_VERSION" = "0.0.0" ]; then
-            echo "::set-output name=body::🚀"
-        else
-            echo "::set-output name=body::📋 [CHANGELOG](https://github.com/$GITHUB_REPOSITORY/blob/v$TO_VERSION/CHANGELOG.md)"
-        fi
-      env: 
-        FROM_VERSION: ${{ needs.check_if_version_upgraded.outputs.from_version }}
-        TO_VERSION: ${{ needs.check_if_version_upgraded.outputs.to_version }}
-    - uses: garronej/action-gh-release@v0.2.0
+    - uses: softprops/action-gh-release@v1
       with:
         name: Release v${{ needs.check_if_version_upgraded.outputs.to_version }}
         tag_name: v${{ needs.check_if_version_upgraded.outputs.to_version }}
         target_commitish: ${{ github.head_ref || github.ref }}
-        body: ${{ steps.step1.outputs.body }}
+        generate_release_notes: true
         draft: false
         prerelease: ${{ needs.check_if_version_upgraded.outputs.is_release_beta == 'true' }}
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 
 
   publish_on_npm:
-    runs-on: macos-10.15
+    runs-on: ubuntu-latest
     needs: 
-      - update_changelog
+      - create_github_release
       - check_if_version_upgraded
     steps:
     - uses: actions/checkout@v2.3.4
@@ -123,7 +110,7 @@ jobs:
       with:
         node-version: '15'
         registry-url: https://registry.npmjs.org/
-    - uses: bahmutov/npm-install@v1.8.15
+    - uses: bahmutov/npm-install@v1
     - run: |
         PACKAGE_MANAGER=npm
         if [ -f "./yarn.lock" ]; then
@@ -151,4 +138,4 @@ jobs:
       env:
         NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
         VERSION: ${{ needs.check_if_version_upgraded.outputs.to_version }}
-        IS_BETA: ${{ needs.check_if_version_upgraded.outputs.is_release_beta }}
+        IS_BETA: ${{ needs.check_if_version_upgraded.outputs.is_release_beta }}

.prettierignore

@@ -4,4 +4,5 @@ node_modules/
 /.yarn_home/
 /src/test/apps/
 /src/tools/types/
-/sample_react_project
+/sample_react_project
+/build_keycloak/

README.md

@@ -38,6 +38,10 @@
 
 # Changelog highlights
 
+## 5.8.0
+
+-   [React.lazy()](https://reactjs.org/docs/code-splitting.html#reactlazy) support 🎉. [#141](https://github.com/InseeFrLab/keycloakify/issues/141)
+
 ## 5.7.0
 
 -   Feat `logout-confirm.ftl`. [PR](https://github.com/InseeFrLab/keycloakify/pull/120)
@@ -57,7 +61,9 @@ If you already had a `keycloak_theme_email` you should rename it `keycloak_email
 
 ## v5.0.0
 
-New i18n system. Import of terms and services have changed. [See example](https://github.com/garronej/keycloakify-demo-app/blob/a5b6a50f24bc25e082931f5ad9ebf47492acd12a/src/index.tsx#L46-L63).
+[Migration guide](https://github.com/garronej/keycloakify-demo-app/blob/a5b6a50f24bc25e082931f5ad9ebf47492acd12a/src/index.tsx#L46-L63)  
+New i18n system.  
+Import of terms and services have changed. [See example](https://github.com/garronej/keycloakify-demo-app/blob/a5b6a50f24bc25e082931f5ad9ebf47492acd12a/src/index.tsx#L46-L63).
 
 ## v4.10.0
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "5.7.1",
+    "version": "5.8.1",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",
@@ -12,7 +12,7 @@
         "clean": "rimraf dist/",
         "build": "yarn clean && tsc && yarn grant-exec-perms && yarn copy-files",
         "grant-exec-perms": "node dist/bin/tools/grant-exec-perms.js",
-        "test": "node dist/test/bin/main && node dist/test/lib",
+        "test": "node dist/test/bin && node dist/test/lib",
         "copy-files": "copyfiles -u 1 src/**/*.ftl src/**/*.xml src/**/*.js dist/",
         "generate-messages": "node dist/bin/generate-i18n-messages.js",
         "link_in_test_app": "node dist/bin/link_in_test_app.js",
@@ -77,14 +77,14 @@
         "@octokit/rest": "^18.12.0",
         "cheerio": "^1.0.0-rc.5",
         "cli-select": "^1.1.2",
-        "evt": "2.0.0-beta.45",
+        "evt": "^2.3.1",
         "memoizee": "^0.4.15",
         "minimal-polyfills": "^2.2.1",
         "path-browserify": "^1.0.1",
-        "powerhooks": "^0.20.3",
+        "powerhooks": "^0.20.10",
         "react-markdown": "^5.0.3",
         "scripting-tools": "^0.19.13",
-        "tsafe": "^0.10.0",
-        "tss-react": "^3.7.0"
+        "tsafe": "^0.10.1",
+        "tss-react": "^3.7.1"
     }
 }

renovate.json

@@ -0,0 +1,27 @@
+{
+    "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+    "baseBranches": ["main", "landingpage"],
+    "extends": ["config:base"],
+    "dependencyDashboard": false,
+    "bumpVersion": "patch",
+    "rangeStrategy": "bump",
+    "ignorePaths": [".github/**"],
+    "branchPrefix": "renovate_",
+    "vulnerabilityAlerts": {
+        "enabled": false
+    },
+    "packageRules": [
+        {
+            "packagePatterns": ["*"],
+            "excludePackagePatterns": ["tss-react", "powerhooks", "tsafe", "evt"],
+            "enabled": false
+        },
+        {
+            "packagePatterns": ["tss-react", "powerhooks", "tsafe", "evt"],
+            "matchUpdateTypes": ["minor", "patch"],
+            "automerge": true,
+            "automergeType": "branch",
+            "groupName": "garronej_modules_update"
+        }
+    ]
+}

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

@@ -17,11 +17,35 @@ export function replaceImportsFromStaticInJsCode(params: { jsCode: string; urlOr
     const { jsCode, urlOrigin } = params;
 
     const fixedJsCode = jsCode
+        .replace(
+            /([a-zA-Z]+)\.([a-zA-Z]+)=function\(([a-zA-Z]+)\){return"static\/js\/"/g,
+            (...[, n, u, e]) => `
+			${n}[(function(){
+                ${
+                    urlOrigin === undefined
+                        ? `
+                        Object.defineProperty(${n}, "p", {
+                            get: function() { return window.${ftlValuesGlobalName}.url.resourcesPath; },
+                            set: function (){}
+                        });
+                    `
+                        : `
+                    var p= "";
+                    Object.defineProperty(${n}, "p", {
+                        get: function() { return ("${ftlValuesGlobalName}" in window ? "${urlOrigin}" : "") + p; },
+                        set: function (value){ p = value;}
+                    });
+                    `
+                }
+				return "${u}";
+			})()] = function(${e}) { return "${urlOrigin === undefined ? "/build/" : ""}static/js/"`,
+        )
         .replace(/([a-zA-Z]+\.[a-zA-Z]+)\+"static\//g, (...[, group]) =>
             urlOrigin === undefined
                 ? `window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/`
                 : `("${ftlValuesGlobalName}" in window ? "${urlOrigin}" : "") + ${group} + "static/`,
         )
+        //TODO: Write a test case for this
         .replace(/".chunk.css",([a-zA-Z])+=([a-zA-Z]+\.[a-zA-Z]+)\+([a-zA-Z]+),/, (...[, group1, group2, group3]) =>
             urlOrigin === undefined
                 ? `".chunk.css",${group1} = window.${ftlValuesGlobalName}.url.resourcesPath + "/build/" + ${group3},`

src/lib/components/Info.tsx

@@ -6,7 +6,7 @@ import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { getMsg } from "../i18n";
 
 export const Info = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Info } & KcProps) => {
-    const { msg } = getMsg(kcContext);
+    const { msg, msgStr } = getMsg(kcContext);
 
     assert(kcContext.message !== undefined);
 
@@ -24,7 +24,7 @@ export const Info = memo(({ kcContext, ...props }: { kcContext: KcContextBase.In
                         {message.summary}
 
                         {requiredActions !== undefined && (
-                            <b>{requiredActions.map(requiredAction => msg(`requiredAction.${requiredAction}` as const)).join(",")}</b>
+                            <b>{requiredActions.map(requiredAction => msgStr(`requiredAction.${requiredAction}` as const)).join(",")}</b>
                         )}
                     </p>
                     {!skipLink && pageRedirectUri !== undefined ? (

src/test/bin/index.ts

@@ -0,0 +1 @@
+import "./replaceImportFromStatic";

src/test/bin/main.ts

@@ -1,3 +1,4 @@
+import "./replaceImportFromStatic";
 import { setupSampleReactProject, sampleReactProjectDirPath } from "./setupSampleReactProject";
 import * as st from "scripting-tools";
 import { join as pathJoin } from "path";

src/test/bin/replaceImportFromStatic.ts

@@ -1,67 +1,472 @@
 import {
     replaceImportsFromStaticInJsCode,
+    replaceImportsInInlineCssCode,
     replaceImportsInCssCode,
     generateCssCodeToDefineGlobals,
 } from "../../bin/build-keycloak-theme/replaceImportFromStatic";
+import { assert } from "tsafe/assert";
+import { same } from "evt/tools/inDepth/same";
+import { assetIsSameCode } from "../tools/assertIsSameCode";
 
-const { fixedJsCode } = replaceImportsFromStaticInJsCode({
-    "jsCode": `
+/*
+ NOTES: 
+ When not compiled with --external-assets urlOrigin will always be undefined regardless of the "homepage" field.
+ When compiled with --external-assets and we have a home page filed like "https://example.com" or "https://example.com/x/y/z" urlOrigin will be "https://example.com"
+ Regardless of if it's compiled with --external-assets or not, if "homepage" is like "https://example.com/x/y/z" urlPathname will be "/x/y/z/"
+*/
+
+{
+    const jsCodeUntransformed = `
         function f() {
             return a.p+"static/js/" + ({}[e] || e) + "." + {
                 3: "0664cdc0"
             }[e] + ".chunk.js"
         }
-
-        function f2() {
-            return a.p+"static/js/" + ({}[e] || e) + "." + {
-                3: "0664cdc0"
-            }[e] + ".chunk.js"
-        }
-    `,
-    "urlOrigin": undefined,
-});
-
-const { fixedJsCode: fixedJsCodeExternal } = replaceImportsFromStaticInJsCode({
-    "jsCode": `
-        function f() {
+        
+        function sameAsF() {
             return a.p+"static/js/" + ({}[e] || e) + "." + {
                 3: "0664cdc0"
             }[e] + ".chunk.js"
         }
 
-        function f2() {
-            return a.p+"static/js/" + ({}[e] || e) + "." + {
-                3: "0664cdc0"
-            }[e] + ".chunk.js"
+        n.u=function(e){return"static/js/" + e + "." + {
+                147: "6c5cee76",
+                787: "8da10fcf",
+                922: "be170a73"
+            } [e] + ".chunk.js"
         }
-    `,
-    "urlOrigin": "https://www.example.com",
-});
+    `;
 
-console.log({ fixedJsCode, fixedJsCodeExternal });
+    {
+        const { fixedJsCode } = replaceImportsFromStaticInJsCode({
+            "jsCode": jsCodeUntransformed,
+            "urlOrigin": undefined,
+        });
 
-const { fixedCssCode, cssGlobalsToDefine } = replaceImportsInCssCode({
-    "cssCode": `
+        const fixedJsCodeExpected = `
+            function f() {
+                return window.kcContext.url.resourcesPath + "/build/static/js/" + ({}[e] || e) + "." + {
+                    3: "0664cdc0"
+                }[e] + ".chunk.js"
+            }
 
-    .my-div {
-        background: url(/logo192.png) no-repeat center center;
+            function sameAsF() {
+                return window.kcContext.url.resourcesPath + "/build/static/js/" + ({}[e] || e) + "." + {
+                    3: "0664cdc0"
+                }[e] + ".chunk.js"
+            }
+
+            n[(function (){
+                Object.defineProperty(n, "p", {
+                    get: function() { return window.kcContext.url.resourcesPath; },
+                    set: function (){}
+                });
+                return "u";
+            })()] = function(e) {
+                return "/build/static/js/" + e + "." + {
+                    147: "6c5cee76",
+                    787: "8da10fcf",
+                    922: "be170a73"
+                } [e] + ".chunk.js"
+            }
+        `;
+
+        assetIsSameCode(fixedJsCode, fixedJsCodeExpected);
     }
 
-    .my-div2 {
-        background: url(/logo192.png) no-repeat center center;
+    {
+        const { fixedJsCode } = replaceImportsFromStaticInJsCode({
+            "jsCode": jsCodeUntransformed,
+            "urlOrigin": "https://demo-app.keycloakify.dev",
+        });
+
+        const fixedJsCodeExpected = `
+            function f() {
+                return ("kcContext" in window ? "https://demo-app.keycloakify.dev" : "") + a.p + "static/js/" + ({}[e] || e) + "." + {
+                    3: "0664cdc0"
+                }[e] + ".chunk.js"
+            }
+
+            function sameAsF() {
+                return ("kcContext" in window ? "https://demo-app.keycloakify.dev" : "") + a.p + "static/js/" + ({}[e] || e) + "." + {
+                    3: "0664cdc0"
+                }[e] + ".chunk.js"
+            }
+
+            n[(function (){
+                var p= "";
+                Object.defineProperty(n, "p", {
+                    get: function() { return ("kcContext" in window ? "https://demo-app.keycloakify.dev" : "") + p; },
+                    set: function (value){ p = value; }
+                });
+                return "u";
+            })()] = function(e) {
+                return "static/js/" + e + "." + {
+                    147: "6c5cee76",
+                    787: "8da10fcf",
+                    922: "be170a73"
+                } [e] + ".chunk.js"
+            }
+        `;
+
+        assetIsSameCode(fixedJsCode, fixedJsCodeExpected);
+    }
+}
+
+{
+    const { fixedCssCode, cssGlobalsToDefine } = replaceImportsInCssCode({
+        "cssCode": `
+            .my-div {
+                background: url(/logo192.png) no-repeat center center;
+            }
+
+            .my-div2 {
+                background: url(/logo192.png) no-repeat center center;
+            }
+
+            .my-div {
+                background-image: url(/static/media/something.svg);
+            }
+        `,
+    });
+
+    const fixedCssCodeExpected = `
+        .my-div {
+            background: var(--url1f9ef5a892c104c);
+        }
+
+        .my-div2 {
+            background: var(--url1f9ef5a892c104c);
+        }
+
+        .my-div {
+            background-image: var(--urldd75cab58377c19);
+        }
+    `;
+
+    assetIsSameCode(fixedCssCode, fixedCssCodeExpected);
+
+    const cssGlobalsToDefineExpected = {
+        "url1f9ef5a892c104c": "url(/logo192.png) no-repeat center center",
+        "urldd75cab58377c19": "url(/static/media/something.svg)",
+    };
+
+    assert(same(cssGlobalsToDefine, cssGlobalsToDefineExpected));
+
+    const { cssCodeToPrependInHead } = generateCssCodeToDefineGlobals({
+        cssGlobalsToDefine,
+        "urlPathname": "/",
+    });
+
+    const cssCodeToPrependInHeadExpected = `
+        :root {
+            --url1f9ef5a892c104c: url(\${url.resourcesPath}/build/logo192.png) no-repeat center center;
+            --urldd75cab58377c19: url(\${url.resourcesPath}/build/static/media/something.svg);
+        }
+    `;
+
+    assetIsSameCode(cssCodeToPrependInHead, cssCodeToPrependInHeadExpected);
+}
+
+{
+    const { fixedCssCode, cssGlobalsToDefine } = replaceImportsInCssCode({
+        "cssCode": `
+            .my-div {
+                background: url(/x/y/z/logo192.png) no-repeat center center;
+            }
+
+            .my-div2 {
+                background: url(/x/y/z/logo192.png) no-repeat center center;
+            }
+
+            .my-div {
+                background-image: url(/x/y/z/static/media/something.svg);
+            }
+        `,
+    });
+
+    const fixedCssCodeExpected = `
+        .my-div {
+            background: var(--urlf8277cddaa2be78);
+        }
+
+        .my-div2 {
+            background: var(--urlf8277cddaa2be78);
+        }
+
+        .my-div {
+            background-image: var(--url8bdc0887b97ac9a);
+        }
+    `;
+
+    assetIsSameCode(fixedCssCode, fixedCssCodeExpected);
+
+    const cssGlobalsToDefineExpected = {
+        "urlf8277cddaa2be78": "url(/x/y/z/logo192.png) no-repeat center center",
+        "url8bdc0887b97ac9a": "url(/x/y/z/static/media/something.svg)",
+    };
+
+    assert(same(cssGlobalsToDefine, cssGlobalsToDefineExpected));
+
+    const { cssCodeToPrependInHead } = generateCssCodeToDefineGlobals({
+        cssGlobalsToDefine,
+        "urlPathname": "/x/y/z/",
+    });
+
+    const cssCodeToPrependInHeadExpected = `
+        :root {
+            --urlf8277cddaa2be78: url(\${url.resourcesPath}/build/logo192.png) no-repeat center center;
+            --url8bdc0887b97ac9a: url(\${url.resourcesPath}/build/static/media/something.svg);
+        }
+    `;
+
+    assetIsSameCode(cssCodeToPrependInHead, cssCodeToPrependInHeadExpected);
+}
+
+{
+    const cssCode = `
+        @font-face {
+          font-family: "Work Sans";
+          font-style: normal;
+          font-weight: 400;
+          font-display: swap;
+          src: url("/fonts/WorkSans/worksans-regular-webfont.woff2") format("woff2");
+        }
+        @font-face {
+          font-family: "Work Sans";
+          font-style: normal;
+          font-weight: 500;
+          font-display: swap;
+          src: url("/fonts/WorkSans/worksans-medium-webfont.woff2") format("woff2");
+        }
+        @font-face {
+          font-family: "Work Sans";
+          font-style: normal;
+          font-weight: 600;
+          font-display: swap;
+          src: url("/fonts/WorkSans/worksans-semibold-webfont.woff2") format("woff2");
+        }
+        @font-face {
+          font-family: "Work Sans";
+          font-style: normal;
+          font-weight: 700;
+          font-display: swap;
+          src: url("/fonts/WorkSans/worksans-bold-webfont.woff2") format("woff2");
+        }
+    `;
+
+    {
+        const { fixedCssCode } = replaceImportsInInlineCssCode({
+            cssCode,
+            "urlOrigin": undefined,
+            "urlPathname": "/",
+        });
+
+        const fixedCssCodeExpected = `
+            @font-face {
+              font-family: "Work Sans";
+              font-style: normal;
+              font-weight: 400;
+              font-display: swap;
+              src: url(\${url.resourcesPath}/build/fonts/WorkSans/worksans-regular-webfont.woff2)
+                format("woff2");
+            }
+            @font-face {
+              font-family: "Work Sans";
+              font-style: normal;
+              font-weight: 500;
+              font-display: swap;
+              src: url(\${url.resourcesPath}/build/fonts/WorkSans/worksans-medium-webfont.woff2)
+                format("woff2");
+            }
+            @font-face {
+              font-family: "Work Sans";
+              font-style: normal;
+              font-weight: 600;
+              font-display: swap;
+              src: url(\${url.resourcesPath}/build/fonts/WorkSans/worksans-semibold-webfont.woff2)
+                format("woff2");
+            }
+            @font-face {
+              font-family: "Work Sans";
+              font-style: normal;
+              font-weight: 700;
+              font-display: swap;
+              src: url(\${url.resourcesPath}/build/fonts/WorkSans/worksans-bold-webfont.woff2)
+                format("woff2");
+            }
+        `;
+
+        assetIsSameCode(fixedCssCode, fixedCssCodeExpected);
     }
 
-    .my-div {
-        background-image: url(/static/media/something.svg);
+    {
+        const { fixedCssCode } = replaceImportsInInlineCssCode({
+            cssCode,
+            "urlOrigin": "https://demo-app.keycloakify.dev",
+            "urlPathname": "/",
+        });
+
+        const fixedCssCodeExpected = `
+            @font-face {
+              font-family: "Work Sans";
+              font-style: normal;
+              font-weight: 400;
+              font-display: swap;
+              src: url(https://demo-app.keycloakify.dev/fonts/WorkSans/worksans-regular-webfont.woff2)
+                format("woff2");
+            }
+            @font-face {
+              font-family: "Work Sans";
+              font-style: normal;
+              font-weight: 500;
+              font-display: swap;
+              src: url(https://demo-app.keycloakify.dev/fonts/WorkSans/worksans-medium-webfont.woff2)
+                format("woff2");
+            }
+            @font-face {
+              font-family: "Work Sans";
+              font-style: normal;
+              font-weight: 600;
+              font-display: swap;
+              src: url(https://demo-app.keycloakify.dev/fonts/WorkSans/worksans-semibold-webfont.woff2)
+                format("woff2");
+            }
+            @font-face {
+              font-family: "Work Sans";
+              font-style: normal;
+              font-weight: 700;
+              font-display: swap;
+              src: url(https://demo-app.keycloakify.dev/fonts/WorkSans/worksans-bold-webfont.woff2)
+                format("woff2");
+            }
+        `;
+
+        assetIsSameCode(fixedCssCode, fixedCssCodeExpected);
     }
-    `,
-});
+}
 
-console.log({ fixedCssCode, cssGlobalsToDefine });
+{
+    const cssCode = `
+        @font-face {
+          font-family: "Work Sans";
+          font-style: normal;
+          font-weight: 400;
+          font-display: swap;
+          src: url("/x/y/z/fonts/WorkSans/worksans-regular-webfont.woff2") format("woff2");
+        }
+        @font-face {
+          font-family: "Work Sans";
+          font-style: normal;
+          font-weight: 500;
+          font-display: swap;
+          src: url("/x/y/z/fonts/WorkSans/worksans-medium-webfont.woff2") format("woff2");
+        }
+        @font-face {
+          font-family: "Work Sans";
+          font-style: normal;
+          font-weight: 600;
+          font-display: swap;
+          src: url("/x/y/z/fonts/WorkSans/worksans-semibold-webfont.woff2") format("woff2");
+        }
+        @font-face {
+          font-family: "Work Sans";
+          font-style: normal;
+          font-weight: 700;
+          font-display: swap;
+          src: url("/x/y/z/fonts/WorkSans/worksans-bold-webfont.woff2") format("woff2");
+        }
+    `;
 
-const { cssCodeToPrependInHead } = generateCssCodeToDefineGlobals({
-    cssGlobalsToDefine,
-    "urlPathname": "/",
-});
+    {
+        const { fixedCssCode } = replaceImportsInInlineCssCode({
+            cssCode,
+            "urlOrigin": undefined,
+            "urlPathname": "/x/y/z/",
+        });
 
-console.log({ cssCodeToPrependInHead });
+        const fixedCssCodeExpected = `
+            @font-face {
+              font-family: "Work Sans";
+              font-style: normal;
+              font-weight: 400;
+              font-display: swap;
+              src: url(\${url.resourcesPath}/build/fonts/WorkSans/worksans-regular-webfont.woff2)
+                format("woff2");
+            }
+            @font-face {
+              font-family: "Work Sans";
+              font-style: normal;
+              font-weight: 500;
+              font-display: swap;
+              src: url(\${url.resourcesPath}/build/fonts/WorkSans/worksans-medium-webfont.woff2)
+                format("woff2");
+            }
+            @font-face {
+              font-family: "Work Sans";
+              font-style: normal;
+              font-weight: 600;
+              font-display: swap;
+              src: url(\${url.resourcesPath}/build/fonts/WorkSans/worksans-semibold-webfont.woff2)
+                format("woff2");
+            }
+            @font-face {
+              font-family: "Work Sans";
+              font-style: normal;
+              font-weight: 700;
+              font-display: swap;
+              src: url(\${url.resourcesPath}/build/fonts/WorkSans/worksans-bold-webfont.woff2)
+                format("woff2");
+            }
+        `;
+
+        assetIsSameCode(fixedCssCode, fixedCssCodeExpected);
+    }
+
+    {
+        const { fixedCssCode } = replaceImportsInInlineCssCode({
+            cssCode,
+            "urlOrigin": "https://demo-app.keycloakify.dev",
+            "urlPathname": "/x/y/z/",
+        });
+
+        const fixedCssCodeExpected = `
+            @font-face {
+              font-family: "Work Sans";
+              font-style: normal;
+              font-weight: 400;
+              font-display: swap;
+              src: url(https://demo-app.keycloakify.dev/x/y/z/fonts/WorkSans/worksans-regular-webfont.woff2)
+                format("woff2");
+            }
+            @font-face {
+              font-family: "Work Sans";
+              font-style: normal;
+              font-weight: 500;
+              font-display: swap;
+              src: url(https://demo-app.keycloakify.dev/x/y/z/fonts/WorkSans/worksans-medium-webfont.woff2)
+                format("woff2");
+            }
+            @font-face {
+              font-family: "Work Sans";
+              font-style: normal;
+              font-weight: 600;
+              font-display: swap;
+              src: url(https://demo-app.keycloakify.dev/x/y/z/fonts/WorkSans/worksans-semibold-webfont.woff2)
+                format("woff2");
+            }
+            @font-face {
+              font-family: "Work Sans";
+              font-style: normal;
+              font-weight: 700;
+              font-display: swap;
+              src: url(https://demo-app.keycloakify.dev/x/y/z/fonts/WorkSans/worksans-bold-webfont.woff2)
+                format("woff2");
+            }
+        `;
+
+        assetIsSameCode(fixedCssCode, fixedCssCodeExpected);
+    }
+}
+
+console.log("PASS replace import from static");

src/test/tools/assertIsSameCode.ts

@@ -0,0 +1,7 @@
+import { assert } from "tsafe/assert";
+
+export function assetIsSameCode(code1: string, code2: string, message?: string): void {
+    const removeSpacesAndNewLines = (code: string) => code.replace(/\s/g, "").replace(/\n/g, "");
+
+    assert(removeSpacesAndNewLines(code1) === removeSpacesAndNewLines(code2), message);
+}

yarn.lock

@@ -777,14 +777,14 @@ event-emitter@^0.3.5:
     d "1"
     es5-ext "~0.10.14"
 
-evt@2.0.0-beta.45:
-  version "2.0.0-beta.45"
-  resolved "https://registry.yarnpkg.com/evt/-/evt-2.0.0-beta.45.tgz#8b1a81e1376f6eba254f4ec9865531b2ed118a3e"
-  integrity sha512-Me2/YMCjxLgz4y0aWKIxykyJth2LHKqxc91XnsIN39IRksknObBR9Pjmxwpnhmd1lNCR6mPFv/vBt46iQWtI9g==
+evt@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/evt/-/evt-2.3.1.tgz#988fc6fc255db8999240e918afe63ba6c325db99"
+  integrity sha512-+MU1aA0as6hOnGxzQOw9hV/xiKIB1vAY90S+WD6zMzvvhQHlY4aPHk2b8WpWsVs3XErDzlhGzCESVCAuH9kUiA==
   dependencies:
     minimal-polyfills "^2.2.1"
-    run-exclusive "^2.2.14"
-    tsafe "^0.4.1"
+    run-exclusive "^2.2.16"
+    tsafe "^0.10.1"
 
 execa@^5.1.1:
   version "5.1.1"
@@ -1221,7 +1221,7 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
-minimal-polyfills@^2.1.5, minimal-polyfills@^2.2.1:
+minimal-polyfills@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/minimal-polyfills/-/minimal-polyfills-2.2.1.tgz#7249d7ece666d3b4e1ec1c1b8f949eb9d44e2308"
   integrity sha512-WLmHQrsZob4rVYf8yHapZPNJZ3sspGa/sN8abuSD59b0FifDEE7HMfLUi24z7mPZqTpBXy4Svp+iGvAmclCmXg==
@@ -1420,15 +1420,15 @@ please-upgrade-node@^3.2.0:
   dependencies:
     semver-compare "^1.0.0"
 
-powerhooks@^0.20.3:
-  version "0.20.3"
-  resolved "https://registry.yarnpkg.com/powerhooks/-/powerhooks-0.20.3.tgz#0a2bb6ac3d6bae527df5889e107f76c7ccca8104"
-  integrity sha512-SrcDdt+Lo+TGtJHRLyrWS6glN3bfjBZETU+LIWWD5ohvwR8ofBcMiPML/sqecPhF+9sRzAdOrimHcQSQxetvSg==
+powerhooks@^0.20.10:
+  version "0.20.10"
+  resolved "https://registry.yarnpkg.com/powerhooks/-/powerhooks-0.20.10.tgz#c30ba493ea324806100d9f5df889dea19f3a73ff"
+  integrity sha512-RiQVBgxLavWFVb3hKmzluykvgeVYgVyGtITlnIjVrtfql3jpCHzuVVTq/49oXp18BNEOKCQXzKfFeb42f1v4Pg==
   dependencies:
-    evt "2.0.0-beta.45"
+    evt "^2.3.1"
     memoizee "^0.4.15"
     resize-observer-polyfill "^1.5.1"
-    tsafe "^0.10.0"
+    tsafe "^0.10.1"
 
 prettier@^2.3.0:
   version "2.7.1"
@@ -1568,12 +1568,12 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-run-exclusive@^2.2.14:
-  version "2.2.14"
-  resolved "https://registry.yarnpkg.com/run-exclusive/-/run-exclusive-2.2.14.tgz#4f41dc7843e091f10991f8708fce87b09022a0ce"
-  integrity sha512-NHaQfB3zPJFx7p4M06AcmoK8xz/h8YDMCdy3jxfyoC9VqIbl1U+DiVjUuAYZBRMwvj5qkQnOUGfsmyUC4k46dg==
+run-exclusive@^2.2.16:
+  version "2.2.16"
+  resolved "https://registry.yarnpkg.com/run-exclusive/-/run-exclusive-2.2.16.tgz#8fa30a23037760af296c47872a5f6b38f25accf0"
+  integrity sha512-cdYv2LDvaBCRnrqXrwDFs1SgzGTx0EIsiEReTpsprEDR6hRUVlSyjoMYu+rez4S1gpz6YbOQxcmYFMXJQknVnQ==
   dependencies:
-    minimal-polyfills "^2.1.5"
+    minimal-polyfills "^2.2.1"
 
 rxjs@^7.5.1:
   version "7.5.5"
@@ -1773,25 +1773,20 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
-tsafe@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-0.10.0.tgz#c4fba365a49467ea6167e8c9482ddb94ee51b795"
-  integrity sha512-CFfa1uJKfU0DDRbuB8bf2mfXjkOqiTsrltexzMMLxq5gjd1LttFECNGsO8dYUALJDbShb6+f3CwAppW/wf9BrA==
-
-tsafe@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-0.4.1.tgz#00af1be2db82abb4be531209b90232d7954e1a03"
-  integrity sha512-+OZ0gdgmwcru+MOSheCx+ymAvQz+1/ui+KFJRuaq0t2m8RNrlf7eSzEieptoPQXPY67Mdkqgkdjknn8azoD5sw==
+tsafe@^0.10.1:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-0.10.1.tgz#8f100b901e4467c43c0484f56a063f4276683ce0"
+  integrity sha512-S+LrpSjoH5Pah201KS0MxtJn88HVtKf4ZxUoQuW/Hnl4IK6ALu9Qwjed7RbohDeHn+iMuug4c5Mk/z1Cq2G3nw==
 
 tslib@^2.1.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
-tss-react@^3.7.0:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-3.7.0.tgz#664b4259c36800eb5285a583f6d8c1d5d1d1a30f"
-  integrity sha512-thvJWR+sr3ZGMcV/Ryo1F5RzjXd1gMTzYV/ckfUEBhu701uTYE3KyL9DNxv827uRFPFSLYG7bKefuc7kmYMB9Q==
+tss-react@^3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-3.7.1.tgz#119647731490f9e7e62c7f6a38a78df981929a4b"
+  integrity sha512-dfWUoxBlKZfIG9UC1A2h02OmcE/Ni0itCmmZu94E9g+KyBhKMHKcsKvUm0bNlRqTmYjXiCgPJDmj5fyc8CSrLg==
   dependencies:
     "@emotion/cache" "*"
     "@emotion/serialize" "*"