Update changelog v4.2.18

CHANGELOG.md

@@ -1,3 +1,15 @@
+### **4.2.18** (2021-12-17)  
+  
+- Improve css url() import (fix CRA 5)    
+  
+### **4.2.17** (2021-12-16)  
+  
+- Fix path.join polyfill    
+  
+### **4.2.16** (2021-12-16)  
+  
+  
+  
 ### **4.2.15** (2021-12-16)  
   
 - use custom polyfill for path.join (fix webpack 5 build)    

README.md

@@ -20,11 +20,6 @@
     <img src="https://user-images.githubusercontent.com/6702424/110260457-a1c3d380-7fac-11eb-853a-80459b65626b.png">
 </p>
 
-**NEW in 4.2.14**
-
--   No more error in Keycloak logs 🍾
--   Templates now load in fraction of a second 🏎
-
 # Motivations
 
 Keycloak provides [theme support](https://www.keycloak.org/docs/latest/server_development/#_themes) for web pages. This allows customizing the look and feel of end-user facing pages so they can be integrated with your applications.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "4.2.15",
+    "version": "4.2.18",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",

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

@@ -37,7 +37,7 @@ export function replaceImportsInInlineCssCode(params: { cssCode: string; urlPath
     const { cssCode, urlPathname, urlOrigin } = params;
 
     const fixedCssCode = cssCode.replace(
-        urlPathname === "/" ? /url\(\/([^/][^)]+)\)/g : new RegExp(`url\\(${urlPathname}([^)]+)\\)`, "g"),
+        urlPathname === "/" ? /url\(["']?\/([^/][^)"']+)["']?\)/g : new RegExp(`url\\(["']?${urlPathname}([^)"']+)["']?\\)`, "g"),
         (...[, group]) => `url(${urlOrigin === undefined ? "${url.resourcesPath}/build/" + group : params.urlOrigin + urlPathname + group})`,
     );
 
@@ -52,7 +52,7 @@ export function replaceImportsInCssCode(params: { cssCode: string }): {
 
     const cssGlobalsToDefine: Record<string, string> = {};
 
-    new Set(cssCode.match(/url\(\/[^/][^)]+\)[^;}]*/g) ?? []).forEach(
+    new Set(cssCode.match(/url\(["']?\/[^/][^)"']+["']?\)[^;}]*/g) ?? []).forEach(
         match => (cssGlobalsToDefine["url" + crypto.createHash("sha256").update(match).digest("hex").substring(0, 15)] = match),
     );
 

src/lib/components/Template.tsx

@@ -9,7 +9,7 @@ import { getBestMatchAmongKcLanguageTag } from "../i18n/KcLanguageTag";
 import { getKcLanguageTagLabel } from "../i18n/KcLanguageTag";
 import { useCallbackFactory } from "powerhooks/useCallbackFactory";
 import { headInsert } from "../tools/headInsert";
-import { join as pathJoin } from "path";
+import { pathJoin } from "../tools/pathJoin";
 import { useConstCallback } from "powerhooks/useConstCallback";
 import type { KcTemplateProps } from "./KcProps";
 import { useCssAndCx } from "tss-react";

src/lib/tools/pathJoin.ts

@@ -1,3 +1,6 @@
 export function pathJoin(...path: string[]): string {
-    return path.map(part => part.replace(/^\/+/, "").replace(/\/+$/, "")).join("/");
+    return path
+        .map((part, i) => (i === 0 ? part : part.replace(/^\/+/, "")))
+        .map((part, i) => (i === path.length - 1 ? part : part.replace(/\/+$/, "")))
+        .join("/");
 }