From cb8a41d5be6080c378731f429fd64a02ede87824 Mon Sep 17 00:00:00 2001 From: garronej Date: Fri, 17 Dec 2021 19:30:44 +0100 Subject: [PATCH] Improve css url() import (fix CRA 5) --- README.md | 8 -------- src/bin/build-keycloak-theme/replaceImportFromStatic.ts | 4 ++-- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index e659fe8c..680d6060 100644 --- a/README.md +++ b/README.md @@ -20,14 +20,6 @@

-**NOTICE:** Fonts are not loaded properly in Webpack 5. Used in the very last version of `create-react-app`. -It will be fixed soon. - -**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. diff --git a/src/bin/build-keycloak-theme/replaceImportFromStatic.ts b/src/bin/build-keycloak-theme/replaceImportFromStatic.ts index 0d7d9be0..55b11ab3 100644 --- a/src/bin/build-keycloak-theme/replaceImportFromStatic.ts +++ b/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 = {}; - 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), );