@ui5/webcomponents-tools 2.17.0-rc.1 → 2.17.0-rc.3

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.17.0-rc.3](https://github.com/UI5/webcomponents/compare/v2.17.0-rc.2...v2.17.0-rc.3) (2025-11-20)
+
+
+### Bug Fixes
+
+* **cem:** alias references ([#12682](https://github.com/UI5/webcomponents/issues/12682)) ([4ce5617](https://github.com/UI5/webcomponents/commit/4ce5617ff580c869640996545fa618ff90447ba4))
+
+
+### Features
+
+* **framework:** scope theming css variables with component packages ([#12491](https://github.com/UI5/webcomponents/issues/12491)) ([43ff5de](https://github.com/UI5/webcomponents/commit/43ff5defaf6e08bac848df3d2d34943de15bee83))
+
+
+
+
+
+# [2.17.0-rc.2](https://github.com/UI5/webcomponents/compare/v2.17.0-rc.1...v2.17.0-rc.2) (2025-11-13)
+
+
+### Bug Fixes
+
+* **tools:** fix wc-dev test command ([#12662](https://github.com/UI5/webcomponents/issues/12662)) ([7dd11fb](https://github.com/UI5/webcomponents/commit/7dd11fbb88711a74d3602328a492a923552fd4ef))
+
+
+
+
+
 # [2.17.0-rc.1](https://github.com/UI5/webcomponents/compare/v2.17.0-rc.0...v2.17.0-rc.1) (2025-11-07)
 
 

package/lib/cem/custom-elements-manifest.config.mjs

@@ -27,7 +27,17 @@ import { generateCustomData } from "cem-plugin-vs-code-custom-data-generator";
 import { customElementJetBrainsPlugin } from "custom-element-jet-brains-integration";
 
 const packageJSON = JSON.parse(fs.readFileSync("./package.json"));
+let aliasMap = {};
+
 const devMode = process.env.UI5_CEM_MODE === "dev";
+try {
+	aliasMap = JSON.parse(fs.readFileSync("./.ui5-cem-aliases.json"));
+} catch (e) {
+	if (devMode) {
+		console.warn("No .ui5-cem-aliases.json file found. Continuing without aliases.");
+	}
+}
+
 
 const extractClassNodeJSDoc = node => {
 	const fileContent = node.getFullText();
@@ -486,6 +496,12 @@ export default {
 						}
 					}
 
+					moduleDoc.declarations.forEach(declaration => {
+						if (declaration.superclass?.name && aliasMap[declaration.superclass.name]) {
+							declaration.superclass.name = aliasMap[declaration.superclass.name];
+						}
+					})
+
 					const typeReferences = new Set();
 					const registerTypeReference = reference => typeReferences.add(JSON.stringify(reference))
 

package/lib/create-illustrations/index.js

@@ -1,5 +1,6 @@
 const fs = require("fs").promises;
 const path = require("path");
+const { scopeThemingVariables } = require("../css-processors/scope-variables.mjs");
 
 const generate = async (argv) => {
 	if (argv.length < 7) {
@@ -91,7 +92,7 @@ const generate = async (argv) => {
 	console.log(`Generating illustrations from ${srcPath} to ${destPath}`)
 
 	const svgImportTemplate = svgContent => {
-		return `export default \`${svgContent}\`;`
+		return `export default \`${scopeThemingVariables(svgContent)}\`;`
 	};
 	const svgToJs = async fileName => {
 		const svg = await fs.readFile(path.join(srcPath, fileName), { encoding: "utf-8" });

package/lib/css-processors/css-processor-components.mjs

@@ -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 scopeVariables from "./scope-variables.mjs";
+import {scopeUi5Variables} 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 = scopeVariables(f.text, packageJSON);
+                    let newText = scopeUi5Variables(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);

package/lib/css-processors/css-processor-themes.mjs

@@ -6,10 +6,45 @@ 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 scopeVariables from "./scope-variables.mjs";
+import { scopeUi5Variables, scopeThemingVariables } from "./scope-variables.mjs";
 import { pathToFileURL } from "url";
 
-const generate = async (argv) => {
+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 tsMode = process.env.UI5_TS === "true";
     const extension = tsMode ? ".css.ts" : ".css.js";
 
@@ -20,29 +55,6 @@ const generate = async (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) {
@@ -50,7 +62,7 @@ const generate = async (argv) => {
 
             build.onEnd(result => {
                 result.outputFiles.forEach(async f => {
-                    let newText = f.path.includes("packages/theming") ? await processThemingPackageFile(f) : await processComponentPackageFile(f);
+                    let newText = f.path.includes("packages/theming") ? await processThemingPackageFile(f) : await processComponentPackageFile(f, packageJSON);
 
                     await mkdir(path.dirname(f.path), { recursive: true });
                     writeFile(f.path, newText);
@@ -99,4 +111,8 @@ if (import.meta.url === fileUrl) {
 
 export default {
     _ui5mainFn: generate
+}
+
+export {
+    processComponentPackageFile
 }

package/lib/css-processors/scope-variables.mjs

@@ -9,9 +9,9 @@ const require = createRequire(import.meta.url);
  * @returns
  */
 const getOverrideVersion = filePath => {
-    if (!filePath) {
-        return;
-    }
+	if (!filePath) {
+		return;
+	}
 
 	if (!filePath.includes(`overrides${path.sep}`)) {
 		return; // The "overrides/" directory is the marker
@@ -36,14 +36,22 @@ const getOverrideVersion = filePath => {
 	return overrideVersion;
 }
 
-const scopeVariables = (cssText, packageJSON, inputFile) => {
-    const escapeVersion = version => "v" + version?.replaceAll(/[^0-9A-Za-z\-_]/g, "-");
-    const versionStr = escapeVersion(getOverrideVersion(inputFile) || packageJSON.version);
+const scopeUi5Variables = (cssText, packageJSON, inputFile) => {
+	const escapeVersion = version => "v" + version?.replaceAll(/[^0-9A-Za-z\-_]/g, "-");
+	const versionStr = escapeVersion(getOverrideVersion(inputFile) || packageJSON.version);
+	const expr = /(--_?ui5)([^\,\:\)\s]+)/g;
+	let newText = cssText.replaceAll(expr, `$1-${versionStr}$2`);
 
-    const expr = /(--_?ui5)([^\,\:\)\s]+)/g;
+	return newText.replaceAll("--sap", `--ui5-sap`);
+}
 
-    return cssText.replaceAll(expr, `$1-${versionStr}$2`);
+// Used with CSS text and SVG file content (illustrations)
+const scopeThemingVariables = (cssText) => {
+	return cssText.replaceAll("--sap", `--ui5-sap`);
 }
 
-export default scopeVariables;
+export {
+	scopeUi5Variables,
+	scopeThemingVariables,
+};
 

package/lib/test-runner/test-runner.js

@@ -3,69 +3,77 @@ const { readFileSync } = require("fs");
 const path = require("path");
 const fs = require("fs");
 
-// search for dev-server port 
+function testFn() {
+// search for dev-server port
 // start in current folder
 // traversing upwards in case of mono repo tests and dev-server running in root folder of repository
-let devServerFolder = process.cwd();
-let devServerPort;
-while (true) {
-    try {
-        devServerPort = readFileSync(path.join(devServerFolder, ".dev-server-port")).toString();
-        break; // found
-    } catch (e) {
-        // file not found
-        if (devServerFolder === path.dirname(devServerFolder)) {
-            break; // reached root folder "/"
-        }
-        devServerFolder = path.dirname(devServerFolder);
-    }
-}
+	let devServerFolder = process.cwd();
+	let devServerPort;
+	while (true) {
+		try {
+			devServerPort = readFileSync(path.join(devServerFolder, ".dev-server-port")).toString();
+			break; // found
+		} catch (e) {
+			// file not found
+			if (devServerFolder === path.dirname(devServerFolder)) {
+				break; // reached root folder "/"
+			}
+			devServerFolder = path.dirname(devServerFolder);
+		}
+	}
 
 // check if we are in a monorepo and extract path from package.json
-let packageRepositoryPath = "";
-const pkg = require(path.join(process.cwd(), "package.json"));
-packageRepositoryPath = pkg.repository ? pkg.repository.directory : "";
+	let packageRepositoryPath = "";
+	const pkg = require(path.join(process.cwd(), "package.json"));
+	packageRepositoryPath = pkg.repository ? pkg.repository.directory : "";
 
 // construct base url
 // use devServerPort if a dev server is running, otherwise let the baseUrl in the wdio config be used
 // if a dev server is running in the root of a mono repo, append tha package path like this
 // http://localhost:${devServerPort}/packages/main/
-let baseUrl = "";
-if (devServerPort) {
-    console.log(`Found port ${devServerPort} from '${path.join(devServerFolder, ".dev-server-port")}'`);
-    const devServerInRoot = !devServerFolder.includes(packageRepositoryPath);
-    if (devServerInRoot) {
-        baseUrl = `--base-url http://localhost:${devServerPort}/${packageRepositoryPath}/`;
-    } else {
-        baseUrl = `--base-url http://localhost:${devServerPort}/`;
-    }
-}
+	let baseUrl = "";
+	if (devServerPort) {
+		console.log(`Found port ${devServerPort} from '${path.join(devServerFolder, ".dev-server-port")}'`);
+		const devServerInRoot = !devServerFolder.includes(packageRepositoryPath);
+		if (devServerInRoot) {
+			baseUrl = `--base-url http://localhost:${devServerPort}/${packageRepositoryPath}/`;
+		} else {
+			baseUrl = `--base-url http://localhost:${devServerPort}/`;
+		}
+	}
 
-if (!baseUrl) {
-    console.log("No dev server running, running tests served from `dist`, make sure it is up to date");
-}
+	if (!baseUrl) {
+		console.log("No dev server running, running tests served from `dist`, make sure it is up to date");
+	}
 
 // add single spec parameter if passed
-let spec = "";
-if (process.argv.length === 3) {
-    const specFile = process.argv[2];
-    spec = `--spec ${specFile}`;
-}
+	let spec = "";
+	if (process.argv.length === 3) {
+		const specFile = process.argv[2];
+		spec = `--spec ${specFile}`;
+	}
 
 // more parameters - pass them to wdio
-let restParams = "";
-if (process.argv.length > 3) {
-    restParams = process.argv.slice(2).join(" ");
+	let restParams = "";
+	if (process.argv.length > 3) {
+		restParams = process.argv.slice(2).join(" ");
+	}
+
+	let wdioConfig = "";
+	if (fs.existsSync("config/wdio.conf.cjs")) {
+		wdioConfig = "config/wdio.conf.cjs";
+	} else if (fs.existsSync("config/wdio.conf.js")) {
+		wdioConfig = "config/wdio.conf.js";
+	}
+
+// run wdio with calculated parameters
+	const cmd = `yarn cross-env WDIO_LOG_LEVEL=error wdio ${wdioConfig} ${spec} ${baseUrl} ${restParams}`;
+	console.log(`executing: ${cmd}`);
+	child_process.execSync(cmd, {stdio: 'inherit'});
 }
 
-let wdioConfig = "";
-if (fs.existsSync("config/wdio.conf.cjs")) {
-    wdioConfig = "config/wdio.conf.cjs";
-} else if (fs.existsSync("config/wdio.conf.js")) {
-    wdioConfig = "config/wdio.conf.js";
+if (require.main === module) {
+	testFn(process.argv)
 }
 
-// run wdio with calculated parameters
-const cmd = `yarn cross-env WDIO_LOG_LEVEL=error wdio ${wdioConfig} ${spec} ${baseUrl} ${restParams}`;
-console.log(`executing: ${cmd}`);
-child_process.execSync(cmd, {stdio: 'inherit'});
+exports._ui5mainFn = testFn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "2.17.0-rc.1",
+  "version": "2.17.0-rc.3",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -84,5 +84,5 @@
     "esbuild": "^0.25.0",
     "yargs": "^17.5.1"
   },
-  "gitHead": "5419a5cbb330b94cd8263ef4ee77575ad72c728a"
+  "gitHead": "45ac45d27dd4c95cc840c51c95fef9d38e7586f0"
 }