Revert "feat(framework): scope theming css variables with component packages (#12491)" (#12775)

This reverts commit 43ff5de.

Author: nnaydenow

packages/base/lib/generate-styles/index.js

@@ -1,24 +1,16 @@
 import fs from 'fs/promises';
 import path from "path";
 import CleanCSS from "clean-css";
-import { processComponentPackageFile } from '@ui5/webcomponents-tools/lib/css-processors/css-processor-themes.mjs';
 import { pathToFileURL } from "url";
 
 const generate = async () => {
-	const packageJSON = JSON.parse(await fs.readFile("./package.json"))
 	await fs.mkdir("src/generated/css/", { recursive: true });
 
 	const files = (await fs.readdir("src/css/")).filter(file => file.endsWith(".css"));
 	const filesPromises = files.map(async file => {
-		const filePath = path.join("src/css/", file);
-		let content = await fs.readFile(filePath);
+		let content = await fs.readFile(path.join("src/css/", file));
 		const res = new CleanCSS().minify(`${content}`);
-
-		// Scope used variables
-		content = await processComponentPackageFile({ text: res.styles, path: filePath }, packageJSON);
-
-		content = `export default \`${content}\`;`;
-
+		content = `export default \`${res.styles}\`;`;
 		return fs.writeFile(path.join("src/generated/css/", `${file}.ts`), content);
 	});
 

packages/base/src/theming/applyTheme.ts

@@ -1,8 +1,10 @@
 import { getThemeProperties, getRegisteredPackages, isThemeRegistered } from "../asset-registries/Themes.js";
-import { createOrUpdateStyle } from "../ManagedStyles.js";
+import { removeStyle, createOrUpdateStyle } from "../ManagedStyles.js";
 import getThemeDesignerTheme from "./getThemeDesignerTheme.js";
 import { fireThemeLoaded } from "./ThemeLoaded.js";
+import { getFeature } from "../FeaturesRegistry.js";
 import { attachCustomThemeStylesToHead, getThemeRoot } from "../config/ThemeRoot.js";
+import type OpenUI5Support from "../features/OpenUI5Support.js";
 import { DEFAULT_THEME } from "../generated/AssetParameters.js";
 import { getCurrentRuntimeIndex } from "../Runtimes.js";
 
@@ -29,6 +31,10 @@ const loadThemeBase = async (theme: string) => {
 	}
 };
 
+const deleteThemeBase = () => {
+	removeStyle("data-ui5-theme-properties", BASE_THEME_PACKAGE);
+};
+
 const loadComponentPackages = async (theme: string, externalThemeName?: string) => {
 	const registeredPackages = getRegisteredPackages();
 
@@ -47,34 +53,42 @@ const loadComponentPackages = async (theme: string, externalThemeName?: string)
 };
 
 const detectExternalTheme = async (theme: string) => {
-	if (getThemeRoot()) {
-		await attachCustomThemeStylesToHead(theme);
-	}
-
 	// If theme designer theme is detected, use this
 	const extTheme = getThemeDesignerTheme();
 	if (extTheme) {
 		return extTheme;
 	}
+
+	// If OpenUI5Support is enabled, try to find out if it loaded variables
+	const openUI5Support = getFeature<typeof OpenUI5Support>("OpenUI5Support");
+	if (openUI5Support && openUI5Support.isOpenUI5Detected()) {
+		const varsLoaded = openUI5Support.cssVariablesLoaded();
+		if (varsLoaded) {
+			return {
+				themeName: openUI5Support.getConfigurationSettingsObject()?.theme, // just themeName
+				baseThemeName: "", // baseThemeName is only relevant for custom themes
+			};
+		}
+	} else if (getThemeRoot()) {
+		await attachCustomThemeStylesToHead(theme);
+
+		return getThemeDesignerTheme();
+	}
 };
 
 const applyTheme = async (theme: string) => {
-	// Detect external theme if available (e.g., from theme designer or custom theme root)
 	const extTheme = await detectExternalTheme(theme);
 
-	// Determine which theme to use for component packages:
-	// 1. If the requested theme is registered, use it directly
-	// 2. If external theme exists, use its base theme (e.g., "my_custom_theme" extends "sap_fiori_3")
-	// 3. Otherwise, fallback to the default theme
-	const packagesTheme = isThemeRegistered(theme) ? theme : extTheme && extTheme.baseThemeName;
-	const effectiveTheme = packagesTheme || DEFAULT_THEME;
-
-	// Load base theme properties
-	await loadThemeBase(effectiveTheme);
+	// Only load theme_base properties if there is no externally loaded theme, or there is, but it is not being loaded
+	if (!extTheme || theme !== extTheme.themeName) {
+		await loadThemeBase(theme);
+	} else {
+		deleteThemeBase();
+	}
 
-	// Load component-specific theme properties
-	// Pass external theme name only if it matches the requested theme to avoid conflicts
-	await loadComponentPackages(effectiveTheme, extTheme && extTheme.themeName === theme ? theme : undefined);
+	// Always load component packages properties. For non-registered themes, try with the base theme, if any
+	const packagesTheme = isThemeRegistered(theme) ? theme : extTheme && extTheme.baseThemeName;
+	await loadComponentPackages(packagesTheme || DEFAULT_THEME, extTheme && extTheme.themeName === theme ? theme : undefined);
 
 	fireThemeLoaded(theme);
 };

packages/main/test/pages/theming/Themes.html

@@ -4,7 +4,7 @@ import * as fs from "fs";
 import * as path from "path";
 import { writeFile, mkdir } from "fs/promises";
 import chokidar from "chokidar";
-import {scopeUi5Variables} from "./scope-variables.mjs";
+import scopeVariables from "./scope-variables.mjs";
 import { writeFileIfChanged, getFileContent } from "./shared.mjs";
 import { pathToFileURL } from "url";
 
@@ -24,7 +24,7 @@ const generate = async (argv) => {
             build.onEnd(result => {
                 result.outputFiles.forEach(async f => {
                     // scoping
-                    let newText = scopeUi5Variables(f.text, packageJSON);
+                    let newText = scopeVariables(f.text, packageJSON);
                     newText = newText.replaceAll(/\\/g, "\\\\"); // Escape backslashes as they might appear in css rules
                     await mkdir(path.dirname(f.path), { recursive: true });
                     writeFile(f.path, newText);

packages/main/test/pages/theming/Themes2.html

@@ -6,45 +6,10 @@ import { writeFile, mkdir } from "fs/promises";
 import postcss from "postcss";
 import combineDuplicatedSelectors from "../postcss-combine-duplicated-selectors/index.js"
 import { writeFileIfChanged, getFileContent } from "./shared.mjs";
-import { scopeUi5Variables, scopeThemingVariables } from "./scope-variables.mjs";
+import scopeVariables from "./scope-variables.mjs";
 import { pathToFileURL } from "url";
 
-async function processThemingPackageFile(f) {
-    const selector = ':root';
-    const newRule = postcss.rule({ selector });
-    const result = await postcss().process(f.text);
-
-    result.root.walkRules(selector, rule => {
-        for (const decl of rule.nodes) {
-            if (decl.type !== 'decl' ) {
-                continue;
-            } else if (decl.prop.startsWith('--sapFontUrl')) {
-                continue;
-            } else if (!decl.prop.startsWith('--sap')) {
-                newRule.append(decl.clone());
-            } else {
-                const originalProp = decl.prop;
-                const originalValue = decl.value;
-
-                newRule.append(decl.clone({ prop: originalProp.replace("--sap", "--ui5-sap"), value: `var(${originalProp}, ${originalValue})` }));
-            }
-        }
-    });
-
-    return newRule.toString();
-};
-
-async function processComponentPackageFile(f, packageJSON) {
-    let result = await postcss(combineDuplicatedSelectors).process(f.text);
-
-    result = scopeUi5Variables(result.css, packageJSON, f.path);
-
-    result = scopeThemingVariables(result);
-
-    return result;
-}
-
-async function generate(argv) {
+const generate = async (argv) => {
     const tsMode = process.env.UI5_TS === "true";
     const extension = tsMode ? ".css.ts" : ".css.js";
 
@@ -55,14 +20,37 @@ async function generate(argv) {
     ]);
     const restArgs = argv.slice(2);
 
+    const processThemingPackageFile = async (f) => {
+        const selector = ':root';
+        const result = await postcss().process(f.text);
+
+        const newRule = postcss.rule({ selector });
+
+        result.root.walkRules(selector, rule => {
+            rule.walkDecls(decl => {
+                if (!decl.prop.startsWith('--sapFontUrl')) {
+                    newRule.append(decl.clone());
+                }
+            });
+        });
+
+        return newRule.toString();
+    };
+
+    const processComponentPackageFile = async (f) => {
+        const result = await postcss(combineDuplicatedSelectors).process(f.text);
+
+        return scopeVariables(result.css, packageJSON, f.path);
+    }
+
     let scopingPlugin = {
         name: 'scoping',
         setup(build) {
             build.initialOptions.write = false;
 
             build.onEnd(result => {
                 result.outputFiles.forEach(async f => {
-                    let newText = f.path.includes("packages/theming") ? await processThemingPackageFile(f) : await processComponentPackageFile(f, packageJSON);
+                    let newText = f.path.includes("packages/theming") ? await processThemingPackageFile(f) : await processComponentPackageFile(f);
 
                     await mkdir(path.dirname(f.path), { recursive: true });
                     writeFile(f.path, newText);
@@ -111,8 +99,4 @@ if (import.meta.url === fileUrl) {
 
 export default {
     _ui5mainFn: generate
-}
-
-export {
-    processComponentPackageFile
 }