@ui5/webcomponents-tools 2.17.0-rc.4 → 2.17.0

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.17.0](https://github.com/UI5/webcomponents/compare/v2.17.0-rc.5...v2.17.0) (2025-12-05)
+
+
+### Reverts
+
+* Revert "feat(framework): scope theming css variables with component packages (#12491)" (#12775) ([3385623](https://github.com/UI5/webcomponents/commit/33856235e357a3d4d0b9391eab2a83a5b3010556)), closes [#12491](https://github.com/UI5/webcomponents/issues/12491) [#12775](https://github.com/UI5/webcomponents/issues/12775)
+* Revert "chore: scope theming variables used in illustrations (#12687)" (#12770) ([c9288ff](https://github.com/UI5/webcomponents/commit/c9288ff0f655fdd03262b71ac788e5688c904add)), closes [#12687](https://github.com/UI5/webcomponents/issues/12687) [#12770](https://github.com/UI5/webcomponents/issues/12770)
+* Revert "feat(framework): introduce loadBaseThemingCSSVariables configuration (#12699)" (#12767) ([db375d3](https://github.com/UI5/webcomponents/commit/db375d30b9f4a7e07961fabbdcefdcdc78a93f46)), closes [#12699](https://github.com/UI5/webcomponents/issues/12699) [#12767](https://github.com/UI5/webcomponents/issues/12767)
+
+
+
+
+
+# [2.17.0-rc.5](https://github.com/UI5/webcomponents/compare/v2.17.0-rc.4...v2.17.0-rc.5) (2025-12-04)
+
+
+### Bug Fixes
+
+* **tools:** dependencies usage ([#12716](https://github.com/UI5/webcomponents/issues/12716)) ([89bb0dd](https://github.com/UI5/webcomponents/commit/89bb0dd62322598bd1ea7ce984eaf0618546a6f2))
+
+
+### Features
+
+* **framework:** introduce loadBaseThemingCSSVariables configuration ([#12699](https://github.com/UI5/webcomponents/issues/12699)) ([f01b2eb](https://github.com/UI5/webcomponents/commit/f01b2eb6256f2032bd802d0a60c4625b0d1af5fe))
+
+
+
+
+
 # [2.17.0-rc.4](https://github.com/UI5/webcomponents/compare/v2.17.0-rc.3...v2.17.0-rc.4) (2025-11-27)
 
 

package/bin/ui5nps.js

@@ -165,7 +165,12 @@ class Parser {
 			return new Promise(async (resolve, reject) => {
 				if (command.trim().startsWith("ui5nps-script")) {
 					const argv = parseArgsStringToArgv(command);
-					const importedContent = require(argv[1]);
+					if (!path.isAbsolute(argv[1])) {
+						throw new Error(`Script path must be absolute: ${argv[1]}`);
+					}
+
+					const importPath = argv[1];
+					const importedContent = require(importPath);
 					let _ui5mainFn;
 
 					if (importedContent.__esModule) {
@@ -174,6 +179,10 @@ class Parser {
 						_ui5mainFn = importedContent._ui5mainFn;
 					}
 
+					if (!_ui5mainFn) {
+						return reject(new Error(`No valid _ui5mainFn function exported from ${importPath} tried to be executed with ui5nps-script. Either provide a valid _ui5mainFn function or use another way to execute the script (via node).`));
+					}
+
 					console.log(` |  Executing command ${commandName} as module.`);
 					const result = _ui5mainFn(argv);
 

package/components-package/nps.js

@@ -66,15 +66,6 @@ const getScripts = (options) => {
 		viteConfig = `-c "${require.resolve("@ui5/webcomponents-tools/components-package/vite.config.js")}"`;
 	}
 
-	let eslintConfig;
-	if (fs.existsSync(".eslintrc.js") || fs.existsSync(".eslintrc.cjs")) {
-		// preferred way of custom configuration in root project folder
-		eslintConfig = "";
-	} else {
-		// no custom configuration - use default from tools project
-		eslintConfig = `--config "${require.resolve("@ui5/webcomponents-tools/components-package/eslint.js")}"`;
-	}
-
 	const scripts = {
 		__ui5envs: {
 			UI5_CEM_MODE: options.dev,
@@ -86,8 +77,8 @@ const getScripts = (options) => {
 			"generated": `ui5nps-script "${LIB}/rimraf/rimraf.js src/generated`,
 			"dist": `ui5nps-script "${LIB}/rimraf/rimraf.js dist`,
 		},
-		lint: `eslint . ${eslintConfig}`,
-		lintfix: `eslint . ${eslintConfig} --fix`,
+		lint: `ui5nps-script "${LIB}eslint/eslint.js"`,
+		lintfix: `ui5nps-script "${LIB}eslint/eslint.js" --fix`,
 		generate: {
 			default: `ui5nps prepare.all`,
 			all: `ui5nps-p build.templates build.i18n prepare.styleRelated copyProps build.illustrations`, // concurently
@@ -101,7 +92,7 @@ const getScripts = (options) => {
 		},
 		build: {
 			default: "ui5nps prepare lint build.bundle", // build.bundle2
-			templates: options.legacy ? `mkdirp src/generated/templates && node "${LIB}hbs2ui5/index.js" -d src/ -o src/generated/templates` : "",
+			templates: options.legacy ? `mkdir -p src/generated/templates && node "${LIB}hbs2ui5/index.js" -d src/ -o src/generated/templates` : "",
 			styles: {
 				default: `ui5nps-p build.styles.themes build.styles.components`, // concurently
 				themes: `ui5nps-script "${LIB}css-processors/css-processor-themes.mjs"`,
@@ -123,7 +114,7 @@ const getScripts = (options) => {
 				default: "ui5nps build.jsImports.illustrationsLoaders",
 				illustrationsLoaders: createIllustrationsLoadersScript,
 			},
-			bundle: `vite build ${viteConfig} --mode testing --base ${websiteBaseUrl}`,
+			bundle: `ui5nps-script "${LIB}vite-bundler/vite-bundler.mjs" ${viteConfig} --mode testing --base ${websiteBaseUrl}`,
 			bundle2: ``,
 			illustrations: createIllustrationsJSImportsScript,
 		},
@@ -147,8 +138,8 @@ const getScripts = (options) => {
 				themes: 'ui5nps build.styles.themesWithWatch',
 				components: `ui5nps build.styles.componentsWithWatch`,
 			},
-			templates: options.legacy ? 'chokidar "src/**/*.hbs" -i "src/generated" -c "ui5nps build.templates"' : "",
-			i18n: 'chokidar "src/i18n/messagebundle.properties" -c "ui5nps build.i18n.defaultsjs"'
+			templates: options.legacy ? `ui5nps-script "${LIB}chokidar/chokidar.js" "src/**/*.hbs" "ui5nps build.templates"` : "",
+			i18n: `ui5nps-script "${LIB}chokidar/chokidar.js" "src/i18n/messagebundle.properties" "ui5nps build.i18n.defaultsjs"`
 		},
 		start: "ui5nps prepare watch.devServer",
 		test: `ui5nps-script "${LIB}/test-runner/test-runner.js"`,

package/lib/chokidar/chokidar.js

@@ -0,0 +1,28 @@
+const chokidar = require('chokidar');
+const { exec } = require("child_process");
+
+const main = async (argv) => {
+	if (argv.length < 4) {
+		console.error("Please provide a file pattern to watch and a command to execute on changes.");
+		console.error("<file-pattern> <command>");
+		process.exit(1);
+	}
+
+	const filePattern = argv[2];
+	const command = argv.slice(3).join(' ');
+
+	const watcher = new chokidar.FSWatcher();
+
+	watcher.add(filePattern);
+	watcher.unwatch("src/generated");
+
+	watcher.on('change', async () => {
+		exec(command);
+	});
+};
+
+if (require.main === module) {
+	main(process.argv)
+}
+
+exports._ui5mainFn = main;

package/lib/create-illustrations/index.js

@@ -1,6 +1,5 @@
 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) {
@@ -92,7 +91,7 @@ const generate = async (argv) => {
 	console.log(`Generating illustrations from ${srcPath} to ${destPath}`)
 
 	const svgImportTemplate = svgContent => {
-		return `export default \`${scopeThemingVariables(svgContent)}\`;`
+		return `export default \`${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 {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);

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

@@ -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,6 +20,29 @@ 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) {
@@ -62,7 +50,7 @@ async function generate(argv) {
 
             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
 }

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,22 +36,14 @@ const getOverrideVersion = filePath => {
 	return overrideVersion;
 }
 
-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 scopeVariables = (cssText, packageJSON, inputFile) => {
+    const escapeVersion = version => "v" + version?.replaceAll(/[^0-9A-Za-z\-_]/g, "-");
+    const versionStr = escapeVersion(getOverrideVersion(inputFile) || packageJSON.version);
 
-	return newText.replaceAll("--sap", `--ui5-sap`);
-}
+    const expr = /(--_?ui5)([^\,\:\)\s]+)/g;
 
-// Used with CSS text and SVG file content (illustrations)
-const scopeThemingVariables = (cssText) => {
-	return cssText.replaceAll("--sap", `--ui5-sap`);
+    return cssText.replaceAll(expr, `$1-${versionStr}$2`);
 }
 
-export {
-	scopeUi5Variables,
-	scopeThemingVariables,
-};
+export default scopeVariables;
 

package/lib/eslint/eslint.js

@@ -0,0 +1,44 @@
+const fs = require("fs");
+const { ESLint: ESLint7 } = require("eslint"); // isolated v7
+const path = require("path");
+
+const main = async argv => {
+	let eslintConfig;
+	if (fs.existsSync(".eslintrc.js") || fs.existsSync(".eslintrc.cjs")) {
+		// preferred way of custom configuration in root project folder
+		eslintConfig = null;
+	} else {
+		// no custom configuration - use default from tools project
+		eslintConfig = require.resolve("@ui5/webcomponents-tools/components-package/eslint.js")
+	};
+
+	const packageDir = path.dirname(require.resolve("@ui5/webcomponents-tools/package.json"));
+	const eslint = new ESLint7({
+		overrideConfigFile: eslintConfig,
+		fix: argv.includes("--fix"),
+		resolvePluginsRelativeTo: packageDir,
+	});
+	console.log("Running ESLint v7...");
+
+	// Lint files
+	const results = await eslint.lintFiles(["."]);
+
+	// Format results
+	const formatter = await eslint.loadFormatter("stylish");
+	const resultText = formatter.format(results);
+
+	// Output results
+	console.log(resultText);
+
+	// Exit with error code if there are errors
+	const hasErrors = results.some(result => result.errorCount > 0);
+	if (hasErrors) {
+		process.exit(1);
+	}
+}
+
+if (require.main === module) {
+	main(process.argv)
+}
+
+exports._ui5mainFn = main;

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

@@ -3,7 +3,7 @@ const { readFileSync } = require("fs");
 const path = require("path");
 const fs = require("fs");
 
-function testFn() {
+function testFn(outArgv) {
 // 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
@@ -48,15 +48,15 @@ function testFn() {
 
 // add single spec parameter if passed
 	let spec = "";
-	if (process.argv.length === 3) {
-		const specFile = process.argv[2];
+	if (outArgv.length === 3) {
+		const specFile = outArgv[2];
 		spec = `--spec ${specFile}`;
 	}
 
 // more parameters - pass them to wdio
 	let restParams = "";
-	if (process.argv.length > 3) {
-		restParams = process.argv.slice(2).join(" ");
+	if (outArgv.length > 3) {
+		restParams = outArgv.slice(2).join(" ");
 	}
 
 	let wdioConfig = "";
@@ -67,7 +67,7 @@ function testFn() {
 	}
 
 // run wdio with calculated parameters
-	const cmd = `yarn cross-env WDIO_LOG_LEVEL=error wdio ${wdioConfig} ${spec} ${baseUrl} ${restParams}`;
+	const cmd = `npx cross-env WDIO_LOG_LEVEL=error wdio ${wdioConfig} ${spec} ${baseUrl} ${restParams}`;
 	console.log(`executing: ${cmd}`);
 	child_process.execSync(cmd, {stdio: 'inherit'});
 }

package/lib/vite-bundler/vite-bundler.mjs

@@ -0,0 +1,35 @@
+import { build } from 'vite';
+import yargs from 'yargs';
+import { hideBin } from 'yargs/helpers';
+import { pathToFileURL } from "url";
+
+async function start(outArgv) {
+    const argv = yargs(hideBin(outArgv))
+        .alias("c", "config")
+        .alias("mode", "mode")
+        .alias("base", "base")
+        .argv;
+
+    try {
+        await build({
+            configFile: argv.config || undefined,
+            mode: argv.mode || undefined,
+            base: argv.base || undefined,
+            logLevel: 'info',
+        });
+    } catch (e) {
+        console.error(e)
+        process.exit(1);
+    }
+};
+
+const filePath = process.argv[1];
+const fileUrl = pathToFileURL(filePath).href;
+
+if (import.meta.url === fileUrl) {
+    start(process.argv)
+}
+
+export default {
+    _ui5mainFn: start
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "2.17.0-rc.4",
+  "version": "2.17.0",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -34,7 +34,6 @@
     "chai": "^4.3.4",
     "child_process": "^1.0.2",
     "chokidar": "^3.6.0",
-    "chokidar-cli": "^3.0.0",
     "command-line-args": "^5.1.1",
     "comment-parser": "^1.4.0",
     "cross-env": "^7.0.3",
@@ -54,7 +53,6 @@
     "ignore": "^7.0.5",
     "is-port-reachable": "^3.1.0",
     "json-beautify": "^1.1.1",
-    "mkdirp": "^1.0.4",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
     "postcss-selector-parser": "^6.0.10",
@@ -84,5 +82,5 @@
     "esbuild": "^0.25.0",
     "yargs": "^17.5.1"
   },
-  "gitHead": "b7e93525288be73f17828a4aec16465097c1550b"
+  "gitHead": "13048269dab7b8ff92e9964e7ce4b771005cf07b"
 }