From d7abcd762ea53b56e001a0db94cbe4d91de0b45f Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Wed, 3 Dec 2025 16:22:19 +0200 Subject: [PATCH] chore: change css variables loading --- packages/base/src/theming/applyTheme.ts | 5 --- packages/theming/package-scripts.cjs | 8 ++--- packages/theming/src/Assets-fetch.ts | 1 - packages/theming/src/Assets-node.ts | 1 - packages/theming/src/Assets.ts | 1 - packages/tools/lib/css-processors/shared.mjs | 13 +++++-- .../tools/lib/generate-json-imports/themes.js | 36 ++++++++++++++----- 7 files changed, 41 insertions(+), 24 deletions(-) diff --git a/packages/base/src/theming/applyTheme.ts b/packages/base/src/theming/applyTheme.ts index fc435e0ea439..dfc0e799c4c2 100644 --- a/packages/base/src/theming/applyTheme.ts +++ b/packages/base/src/theming/applyTheme.ts @@ -5,7 +5,6 @@ import { fireThemeLoaded } from "./ThemeLoaded.js"; import { attachCustomThemeStylesToHead, getThemeRoot } from "../config/ThemeRoot.js"; import { DEFAULT_THEME } from "../generated/AssetParameters.js"; import { getCurrentRuntimeIndex } from "../Runtimes.js"; -import { getLoadBaseThemingCSSVariables } from "../config/Theme.js"; // eslint-disable-next-line export let _lib = "ui5"; @@ -34,10 +33,6 @@ const loadComponentPackages = async (theme: string, externalThemeName?: string) const registeredPackages = getRegisteredPackages(); const packagesStylesPromises = [...registeredPackages].map(async packageName => { - if (getLoadBaseThemingCSSVariables() !== true && packageName === `${BASE_THEME_PACKAGE}-raw`) { - return; - } - if (packageName === BASE_THEME_PACKAGE) { return; } diff --git a/packages/theming/package-scripts.cjs b/packages/theming/package-scripts.cjs index a3a68d748144..d9ed10c338b6 100644 --- a/packages/theming/package-scripts.cjs +++ b/packages/theming/package-scripts.cjs @@ -24,12 +24,8 @@ module.exports = { src: `ui5nps-script "${TOOLS_LIB}copy-and-watch/index.js" "src/**/*.{json}" dist/`, typescript: "tsc", postcss: `ui5nps-script "${TOOLS_LIB}/css-processors/css-processor-themes.mjs"`, - jsonImports: { - default: "ui5nps build.jsonImports.scoped build.jsonImports.raw", - scoped: `ui5nps-script "${jsonImportsScript}" src/themes src/generated/json-imports`, - raw: `ui5nps-script "${jsonImportsScript}" src/themes src/generated/json-imports -raw`, - } + jsonImports: `ui5nps-script "${jsonImportsScript}" src/themes src/generated/json-imports`, }, - generateReport: `ui5nps-script "${generateReportScript}"`, + generateReport: `node "${generateReportScript}"`, }, }; diff --git a/packages/theming/src/Assets-fetch.ts b/packages/theming/src/Assets-fetch.ts index 337bba7e811c..ac3ffb58ab23 100644 --- a/packages/theming/src/Assets-fetch.ts +++ b/packages/theming/src/Assets-fetch.ts @@ -1,3 +1,2 @@ // The theming package provides theming assets only import "./generated/json-imports/Themes-fetch.js"; -import "./generated/json-imports/Themes-raw-fetch.js"; diff --git a/packages/theming/src/Assets-node.ts b/packages/theming/src/Assets-node.ts index 7ec779239341..9e160f274a72 100644 --- a/packages/theming/src/Assets-node.ts +++ b/packages/theming/src/Assets-node.ts @@ -11,4 +11,3 @@ */ import "./generated/json-imports/Themes-node.js"; -import "./generated/json-imports/Themes-raw-node.js"; diff --git a/packages/theming/src/Assets.ts b/packages/theming/src/Assets.ts index 87107237a47b..a8e06e58281f 100644 --- a/packages/theming/src/Assets.ts +++ b/packages/theming/src/Assets.ts @@ -1,3 +1,2 @@ // The theming package provides theming assets only import "./generated/json-imports/Themes.js"; -import "./generated/json-imports/Themes-raw.js"; diff --git a/packages/tools/lib/css-processors/shared.mjs b/packages/tools/lib/css-processors/shared.mjs index 0cda3c30d4c1..fdbe0ef3bd05 100644 --- a/packages/tools/lib/css-processors/shared.mjs +++ b/packages/tools/lib/css-processors/shared.mjs @@ -28,11 +28,20 @@ const DEFAULT_THEME = assets.themes.default; const getDefaultThemeCode = packageName => { return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js"; - +import { getLoadBaseThemingCSSVariables } from "@ui5/webcomponents-base/dist/config/Theme.js"; import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/${DEFAULT_THEME}/parameters-bundle.css.js"; import defaultTheme from "./${DEFAULT_THEME}/parameters-bundle.css.js"; -registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "${DEFAULT_THEME}", async () => defaultThemeBase); +registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "${DEFAULT_THEME}", async () => { + if (getLoadBaseThemingCSSVariables()) { + const rawCss = (await import("@ui5/webcomponents-theming/dist/generated/themes/${DEFAULT_THEME}/parameters-bundle-raw.css.js")).default; + + return \`\$\{defaultThemeBase\}\\n\$\{rawCss\}\`; + } + + return defaultThemeBase; +}); + registerThemePropertiesLoader(${ packageName.split("").map(c => `"${c}"`).join (" + ") }, "${DEFAULT_THEME}", async () => defaultTheme); `; }; diff --git a/packages/tools/lib/generate-json-imports/themes.js b/packages/tools/lib/generate-json-imports/themes.js index 87f3e0e0369e..94e922df95ef 100644 --- a/packages/tools/lib/generate-json-imports/themes.js +++ b/packages/tools/lib/generate-json-imports/themes.js @@ -7,10 +7,9 @@ const ext = isTypeScript ? 'ts' : 'js'; const generate = async (argv) => { const inputFolder = path.normalize(argv[2]); - const outputSuffix = argv[4] || ""; - const outputFileDynamic = path.normalize(`${argv[3]}/Themes${outputSuffix}.${ext}`); - const outputFileDynamicImportJSONAttr = path.normalize(`${argv[3]}/Themes${outputSuffix}-node.${ext}`); - const outputFileFetchMetaResolve = path.normalize(`${argv[3]}/Themes${outputSuffix}-fetch.${ext}`); + const outputFileDynamic = path.normalize(`${argv[3]}/Themes.${ext}`); + const outputFileDynamicImportJSONAttr = path.normalize(`${argv[3]}/Themes-node.${ext}`); + const outputFileFetchMetaResolve = path.normalize(`${argv[3]}/Themes-fetch.${ext}`); // All supported optional themes const allThemes = assets.themes.all; @@ -25,9 +24,30 @@ const generate = async (argv) => { const packageName = JSON.parse(await fs.readFile("package.json")).name; const availableThemesArray = `[${themesOnFileSystem.map(theme => `"${theme}"`).join(", ")}]`; - const dynamicImportLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle${outputSuffix}.css.json")).default;`).join("\n"); - const dynamicImportJSONAttrLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle${outputSuffix}.css.json", {with: { type: 'json'}})).default;`).join("\n"); - const fetchMetaResolveLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await fetch(new URL("../assets/themes/${theme}/parameters-bundle${outputSuffix}.css.json", import.meta.url))).json();`).join("\n"); + + const dynamicImportLines = themesOnFileSystem.map(theme => `case "${theme}": { + const scopedCss = (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle.css.json")).default; + const rawCss = ${packageName === "@ui5/webcomponents-theming" ? `(await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle-raw" */"../assets/themes/${theme}/parameters-bundle-raw.css.json")).default` : "\"\""}; + + return \`\$\{scopedCss\}\\n\$\{rawCss\}\`; + } +`).join("\n"); + + const dynamicImportJSONAttrLines = themesOnFileSystem.map(theme => `case "${theme}": { + const scopedCss = (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle.css.json", {with: { type: 'json'}})).default; + const rawCss = ${packageName === "@ui5/webcomponents-theming" ? `(await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle-raw" */"../assets/themes/${theme}/parameters-bundle-raw.css.json", {with: { type: 'json'}})).default` : "\"\""}; + + return \`\$\{scopedCss\}\\n\$\{rawCss\}\`; + } +`).join("\n"); + + const fetchMetaResolveLines = themesOnFileSystem.map(theme => `case "${theme}": { + const scopedCss = (await fetch(new URL("../assets/themes/${theme}/parameters-bundle.css.json", import.meta.url))).json(); + const rawCss = ${packageName === "@ui5/webcomponents-theming" ? `(await fetch(new URL("../assets/themes/${theme}/parameters-bundle-raw.css.json", import.meta.url))).json()` : "\"\""}; + + return \`\$\{scopedCss\}\\n\$\{rawCss\}\`; + } +`).join("\n"); // dynamic imports file content const contentDynamic = function (lines) { @@ -50,7 +70,7 @@ const loadAndCheck = async (themeName) => { }; ${availableThemesArray} - .forEach(themeName => registerThemePropertiesLoader(${`${packageName + outputSuffix}`.split("").map(c => `"${c}"`).join(" + ")}, themeName, loadAndCheck)); + .forEach(themeName => registerThemePropertiesLoader(${packageName.split("").map(c => `"${c}"`).join(" + ")}, themeName, loadAndCheck)); `; }