@ui5/webcomponents-tools 2.17.0-rc.5 → 2.17.1

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.17.1](https://github.com/UI5/webcomponents/compare/v2.17.0...v2.17.1) (2025-12-17)
+
+
+### Bug Fixes
+
+* **build:** fix legacy (hbs templates) build flow on Windows ([d09bad6](https://github.com/UI5/webcomponents/commit/d09bad66ef29be2472f3f9202416d2eca2317511))
+
+
+
+
+
+# [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)
 
 

package/components-package/nps.js

@@ -92,7 +92,7 @@ const getScripts = (options) => {
 		},
 		build: {
 			default: "ui5nps prepare lint build.bundle", // build.bundle2
-			templates: options.legacy ? `mkdir -p src/generated/templates && node "${LIB}hbs2ui5/index.js" -d src/ -o src/generated/templates` : "",
+			templates: options.legacy ? `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"`,

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,67 +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, scope = true) {
-    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 {
-                if (scope) {
-                    const originalProp = decl.prop;
-                    const originalValue = decl.value;
-
-                    newRule.append(decl.clone({ prop: originalProp.replace("--sap", "--ui5-sap"), value: `var(${originalProp}, ${originalValue})` }));
-                } else {
-                    newRule.append(decl.clone());
-                }
-            }
-        }
-    });
-
-    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 writeProcessedContent(basePath, content, packageJSON, extension) {
-    const cssPath = basePath;
-    const jsonPath = basePath.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json");
-    const jsPath = basePath.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
-
-    // Write CSS file
-    await mkdir(path.dirname(cssPath), { recursive: true });
-    await writeFile(cssPath, content);
-
-    // Write JSON file
-    await mkdir(path.dirname(jsonPath), { recursive: true });
-    await writeFileIfChanged(jsonPath, JSON.stringify(content));
-
-    // Write JS/TS file
-    const jsContent = getFileContent(packageJSON.name, `\`${content}\``);
-    await mkdir(path.dirname(jsPath), { recursive: true });
-    await writeFileIfChanged(jsPath, jsContent);
-}
-
-async function generate(argv) {
+const generate = async (argv) => {
     const tsMode = process.env.UI5_TS === "true";
     const extension = tsMode ? ".css.ts" : ".css.js";
 
@@ -77,27 +20,50 @@ async function generate(argv) {
     ]);
     const restArgs = argv.slice(2);
 
-    const scopingPlugin = {
+    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 => {
-                    if (f.path.includes("packages/theming")) {
-                        const scopedText = await processThemingPackageFile(f);
-                        const originalText = await processThemingPackageFile(f, false);
-
-                        // Write scoped version
-                        await writeProcessedContent(f.path, scopedText, packageJSON, extension);
-
-                        // Write raw version
-                        const originalPath = f.path.replace(/parameters-bundle.css$/, "parameters-bundle-raw.css");
-                        await writeProcessedContent(originalPath, originalText, packageJSON, extension);
-                    } else {
-                        const processedText = await processComponentPackageFile(f, packageJSON);
-                        await writeProcessedContent(f.path, processedText, packageJSON, extension);
-                    }
+                    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);
+
+                    // JSON
+                    const jsonPath = f.path.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json");
+                    await mkdir(path.dirname(jsonPath), { recursive: true });
+                    writeFileIfChanged(jsonPath, JSON.stringify(newText));
+
+                    // JS/TS
+                    const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
+                    const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`");
+                    writeFileIfChanged(jsPath, jsContent);
                 });
             })
         },
@@ -133,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/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,9 @@ 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 => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle.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.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.css.json", import.meta.url))).json();`).join("\n");
 
 	// dynamic imports file content
 	const contentDynamic = function (lines) {
@@ -50,7 +49,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));
 `;
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "2.17.0-rc.5",
+  "version": "2.17.1",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -82,5 +82,5 @@
     "esbuild": "^0.25.0",
     "yargs": "^17.5.1"
   },
-  "gitHead": "affb457b35f4a92b8d6632de0042c8a9da7c244e"
+  "gitHead": "48db20034ae9198de4b4367866506631afe74105"
 }