@ui5/webcomponents-tools 0.0.0-6298a142d → 0.0.0-64a57f090

package/CHANGELOG.md

@@ -3,6 +3,174 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21)
+
+
+### Reverts
+
+* Revert "build: fix dev server page refresh" ([105db9f](https://github.com/SAP/ui5-webcomponents/commit/105db9f3c42e7434c2dc9b0eb967fb45cac9620d))
+
+
+
+
+
+# [1.18.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0...v1.18.0-rc.0) (2023-09-07)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.17.0](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.2...v1.17.0) (2023-09-01)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.17.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.1...v1.17.0-rc.2) (2023-08-24)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
+
+
+### Features
+
+* **framework:** scope css variables per runtime and version ([#7449](https://github.com/SAP/ui5-webcomponents/issues/7449)) ([d3f6c2e](https://github.com/SAP/ui5-webcomponents/commit/d3f6c2efba9cfda389ea4d700a375f75b3e2996b))
+
+
+
+
+
+# [1.17.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0...v1.17.0-rc.0) (2023-08-10)
+
+
+### Bug Fixes
+
+* **ui5-illustrated-message:** support collection based illustration loading ([#7318](https://github.com/SAP/ui5-webcomponents/issues/7318)) ([6b52dbd](https://github.com/SAP/ui5-webcomponents/commit/6b52dbd157a3c8198e41c84157e3d9ae89e3386e))
+
+
+
+
+
+# [1.16.0](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0-rc.4...v1.16.0) (2023-08-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.16.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0-rc.3...v1.16.0-rc.4) (2023-08-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.16.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0-rc.2...v1.16.0-rc.3) (2023-07-27)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.16.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0-rc.1...v1.16.0-rc.2) (2023-07-20)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.16.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0-rc.0...v1.16.0-rc.1) (2023-07-13)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.16.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.15.1...v1.16.0-rc.0) (2023-07-06)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.15.0](https://github.com/SAP/ui5-webcomponents/compare/v1.15.0-rc.2...v1.15.0) (2023-06-30)
+
+
+### Bug Fixes
+
+* **framework:** missing CSS variables in compact mode / rtl mode ([#7189](https://github.com/SAP/ui5-webcomponents/issues/7189)) ([9b39b9c](https://github.com/SAP/ui5-webcomponents/commit/9b39b9ce5c3720dbb106c5638f858754e11a735f))
+
+
+
+
+
+# [1.15.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.15.0-rc.1...v1.15.0-rc.2) (2023-06-22)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.15.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.15.0-rc.0...v1.15.0-rc.1) (2023-06-15)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+
+
+
+
+# [1.15.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.14.0...v1.15.0-rc.0) (2023-06-08)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.14.0](https://github.com/SAP/ui5-webcomponents/compare/v1.14.0-rc.2...v1.14.0) (2023-06-01)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.14.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.14.0-rc.1...v1.14.0-rc.2) (2023-06-01)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
 # [1.14.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.14.0-rc.0...v1.14.0-rc.1) (2023-05-25)
 
 **Note:** Version bump only for package @ui5/webcomponents-tools

package/assets-meta.js

@@ -9,12 +9,15 @@ const assetsMeta = {
       "sap_belize_hcw",
       "sap_fiori_3_hcb",
       "sap_fiori_3_hcw",
-	  "sap_horizon",
-	  "sap_horizon_dark",
-	  "sap_horizon_hcb",
-	  "sap_horizon_hcw",
-	  "sap_horizon_exp"
-    ]
+	    "sap_horizon",
+	    "sap_horizon_dark",
+	    "sap_horizon_hcb",
+	    "sap_horizon_hcw",
+      "sap_horizon_exp",
+	    "sap_horizon_dark_exp",
+	    "sap_horizon_hcb_exp",
+	    "sap_horizon_hcw_exp",
+    ],
   },
   "languages": {
     "default": "en",

package/components-package/nps.js

@@ -8,12 +8,12 @@ const getScripts = (options) => {
 
 	// The script creates all JS modules (dist/illustrations/{illustrationName}.js) out of the existing SVGs
 	const illustrationsData = options.illustrationsData || [];
-	const illustrations = illustrationsData.map(illustration => `node "${LIB}/create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath}`);
+	const illustrations = illustrationsData.map(illustration => `node "${LIB}/create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath} ${illustration.collection}`);
 	const createIllustrationsJSImportsScript = illustrations.join(" && ");
 
 	// The script creates the "dist/generated/js-imports/Illustration.js" file that registers loaders (dynamic JS imports) for each illustration
-	const illustrationDestinationPaths = illustrationsData.map(illustrations => illustrations.destinationPath);
-	const createIllustrationsLoadersScript = options.fioriPackage ? `node ${LIB}/generate-js-imports/illustrations.js ${illustrationDestinationPaths[0]} ${illustrationDestinationPaths[1]} dist/generated/js-imports` : "";
+    const createIllustrationsLoadersScript = illustrationsData.map(illustrations => `node ${LIB}/generate-js-imports/illustrations.js ${illustrations.destinationPath} ${illustrations.dynamicImports.outputFile} ${illustrations.collection} ${illustrations.dynamicImports.location} ${illustrations.dynamicImports.prefix || '\"\"'} ${illustrations.dynamicImports.filterOut.join(" ")}`).join(" && ");
+
 	const tsOption = options.typescript;
 	const tsCommand = tsOption ? "tsc" : "";
 	const tsWatchCommand = tsOption ? "tsc --watch" : "";

package/components-package/postcss.components.js

@@ -1,9 +1,11 @@
 const postcssImport = require('postcss-import');
 const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js');
+const postcssScopeVars = require('../lib/postcss-scope-vars/index.js');
 const cssnano = require('cssnano');
-const fs = require("fs");
+const fs = require("fs")
 
-const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
+
+const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
 
 module.exports = {
 		plugins: [
@@ -16,6 +18,7 @@ module.exports = {
 					},
 				]
 			}),
-			postcssCSStoESM({ toReplace: 'src', includeDefaultTheme: true, packageName }),
+			postcssScopeVars({version: packageJSON.version}),
+			postcssCSStoESM({ toReplace: 'src', includeDefaultTheme: true, packageName: packageJSON.name }),
 		]
 }

package/components-package/postcss.themes.js

@@ -2,14 +2,17 @@ const postcssImport = require('postcss-import');
 const combineSelectors = require('../lib/postcss-combine-duplicated-selectors/index.js');
 const postcssCSStoJSON = require('../lib/postcss-css-to-json/index.js');
 const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js');
+const postcssScopeVars = require('../lib/postcss-scope-vars/index.js');
 const cssnano = require('cssnano');
-const modifySelectors = require("modify-selectors");
 const fs = require("fs");
 
-const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
+
+const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
+const packageName = packageJSON.name;
 
 module.exports = {
 		plugins: [
+			postcssScopeVars({version: packageJSON.version}),
 			postcssImport(),
 			combineSelectors({
 				removeDuplicatedProperties: true
@@ -21,15 +24,6 @@ module.exports = {
 					},
 				]
 			},),
-			modifySelectors({
-				enable: true,
-				suffix: [
-					{
-						match: '*',
-						with: '[_ui5host]', // Add suffix to each selector in the file (:root => :root [_ui5host])
-					},
-				],
-			}),
 			postcssCSStoJSON({ toReplace: 'src', packageName }),
 			postcssCSStoESM({ toReplace: 'src', packageName }),
 		]

package/components-package/vite.config.js

@@ -9,8 +9,5 @@ export default defineConfig(async () => {
 			emptyOutDir: false,
 		},
 		plugins: [data],
-		server: {
-			open: "/packages/main/test/pages/Button.html",
-		}
 	}
   })

package/components-package/wdio.js

@@ -107,8 +107,7 @@ exports.config = {
 	// Services take over a specific job you don't want to take care of. They enhance
 	// your test setup with almost no effort. Unlike plugins, they don't add new
 	// commands. Instead, they hook themselves up into the test process.
-	services: ['chromedriver', 'devtools',
-		['static-server', {
+	services: ['chromedriver', ['static-server', {
 			folders: [
 				{ mount: '/', path: './dist' },
 			],

package/lib/create-illustrations/index.js

@@ -57,10 +57,20 @@ const generate = async () => {
 	const illustrationsPrefix = process.argv[4];
 	const illustrationSet = process.argv[5];
 	const destPath = process.argv[6];
+	const collection = process.argv[7];
 	const fileNamePattern = new RegExp(`${illustrationsPrefix}-.+-(.+).svg`);
 // collect each illustration name because each one should have Sample.js file
 	const fileNames = new Set();
 
+	try {
+		await fs.access(srcPath);
+	} catch (error) {
+		console.log(`The path ${srcPath} does not exist.`);
+		return Promise.resolve(null);
+	}
+
+	console.log(`Generating illustrations from ${srcPath} to ${destPath}`)
+
 	const svgImportTemplate = svgContent => {
 		return `export default \`${svgContent}\`;`
 	};
@@ -95,6 +105,7 @@ import {
 
 const name = "${illustrationName}";
 const set = "${illustrationSet}";
+const collection = "${collection}";
 const title = IM_TITLE_${illustrationNameUpperCase};
 const subtitle = IM_SUBTITLE_${illustrationNameUpperCase};
 
@@ -105,6 +116,7 @@ registerIllustration(name, {
 	title,
 	subtitle,
 	set,
+	collection,
 });
 
 export {
@@ -119,12 +131,14 @@ import spotSvg from "./${illustrationsPrefix}-Spot-${illustrationName}.js";
 
 const name = "${illustrationName}";
 const set = "${illustrationSet}";
+const collection = "${collection}";
 
 registerIllustration(name, {
 	dialogSvg,
 	sceneSvg,
 	spotSvg,
 	set,
+	collection,
 });
 
 export {

package/lib/create-new-component/index.js

@@ -83,7 +83,7 @@ const generateFiles = (componentName, tagName, library, packageName, isTypeScrip
 	// Change the color of the output
 	console.warn('\x1b[33m%s\x1b[0m', `
 	Make sure to import the component in your bundle by using:
-	import ${componentName} from "./dist/${componentName}.js";`);
+	import "./dist/${componentName}.js";`);
 }
 
 // Main function

package/lib/dev-server/custom-hot-update-plugin.js

@@ -0,0 +1,39 @@
+const fs = require("fs");
+
+/**
+ * A change is observed on MacOS since 13.5, where the build generates a large amount
+ * of JSON file that spotlight search has to index, as they are considered new files.
+ * 
+ * Starting the vitejs dev server reads all of these files and this triggers the indexing.
+ * The indexing has a side effect of changing some file metadata (can be checked with `mdls <path_to_file>`).
+ * This metadata change is changing the ctime of the file, but not the mtime. This can be checked with `stat -x <path_to_file>
+ * 
+ * Essentially only metadata is changed, not content. This should not cause a page refresh,
+ * but chokidar reports this change and vite refreshes the page.
+ * The indexing is running with a 10 second interval, so for roughtly 20 minutes vite is refreshing the page every 10 seconds
+ * 
+ * This plugin checks if the file causing the refresh is a generated json file (dist/*.json) and if ctime is changed after mtime
+ * In that case, returing an empty array tells vitejs that a custom update will be made by the plugin,
+ * which is in effect ignoring the page refresh.
+ */
+
+const customHotUpdate = async () => {
+	return {
+		name: 'custom-hot-update',
+		handleHotUpdate(ctx) {
+			// custom check for generated json files
+			if (ctx.file.includes("dist/") && ctx.file.endsWith(".json")) {
+				const stat = fs.statSync(ctx.file);
+
+				// metadata change only
+				if (stat.ctime > stat.mtime) {
+					// uncomment for debugging
+					// console.log("ignoring hot update for:", ctx.file);
+					return [];
+				}
+			}
+		}
+	}
+};
+
+module.exports = customHotUpdate;

package/lib/generate-custom-elements-manifest/index.js

@@ -314,7 +314,7 @@ const generate = async () => {
 	};
 
 	file.symbols.forEach(entity => {
-		if (entity.tagname) {
+		if (entity.tagname || entity.kind === "class") {
 			customElementsManifest.modules.push(generateJavaScriptModule(entity));
 		}
 	});

package/lib/generate-js-imports/illustrations.js

@@ -1,72 +1,83 @@
 const fs = require("fs").promises;
-const path = require('path');
-
-const generate = async () => {
-	const fioriInputFolder = path.normalize(process.argv[2]);
-	const tntInputFolder = path.normalize(process.argv[3]);
-	const outputFile = path.normalize(`${process.argv[4]}/Illustrations.js`);
-
-	const dir = await fs.readdir(fioriInputFolder);
-	const fioriIllustrationsOnFileSystem = dir.map(illustrationName => {
-		const fioriMatches = illustrationName.match(/.*\.js$/);
-		return fioriMatches ? illustrationName : undefined;
-	}).filter(key => !!key);
-
-	const tntDir = await fs.readdir(tntInputFolder);
-	const tntIllustrationsOnFileSystem = tntDir.map(illustrationName => {
-		const tntMatches = illustrationName.match(/.*\.js$/);
-		return tntMatches ? illustrationName : undefined;
-	}).filter(key => !!key);
-
-	// dynamic imports for Fiori illustrations
-	const fioriAvailableIllustrationsArray = `[${fioriIllustrationsOnFileSystem.filter(
-		// skipping the items starting with sapIllus-Dialog, sapIllus-Scene, sapIllus-Spot since they are included in the illustration's js file
-		line => !line.startsWith("sapIllus-Dialog") && !line.startsWith("sapIllus-Scene") && !line.startsWith("sapIllus-Spot") && !line.startsWith("AllIllustrations")).map(illustrationName => `"${illustrationName.replace('.js', '')}"`).join(", ")}]`;
-
-	const fioriDynamicImportLines = fioriIllustrationsOnFileSystem.map(illustrationName =>
-		`\t\tcase "${illustrationName.replace('.js', '')}": return (await import("../../illustrations/${illustrationName}")).default;`).filter(
-			// skipping the items starting with sapIllus-Dialog, sapIllus-Scene, sapIllus-Spot since they are included in the illustration's js file
-			line => !line.startsWith("\t\tcase \"sapIllus-Dialog") && !line.startsWith("\t\tcase \"sapIllus-Scene") && !line.startsWith("\t\tcase \"sapIllus-Spot") && !line.startsWith("\t\tcase \"AllIllustrations")).join("\n");
-
-	// dynamic imports for Tnt illustrations
-	const tntAvailableIllustrationsArray = `[${tntIllustrationsOnFileSystem.filter(
-		// skipping the items starting with tnt-Dialog, tnt-Scene, tnt-Spot since they are included in the illustration's js file
-		line => !line.startsWith("tnt-Dialog") && !line.startsWith("tnt-Scene") && !line.startsWith("tnt-Spot")).map(illustrationName => `"Tnt${illustrationName.replace('.js', '')}"`).join(", ")}]`;
-
-	const tntDynamicImportLines = tntIllustrationsOnFileSystem.map(illustrationName =>
-		`\t\tcase "Tnt${illustrationName.replace('.js', '')}": return (await import("../../illustrations/tnt/${illustrationName}")).default;`).filter(
-			// skipping the items starting with tnt-Dialog, tnt-Scene, tnt-Spot since they are included in the illustration's js file
-			line => !line.startsWith("\t\tcase \"Tnttnt-Dialog") && !line.startsWith("\t\tcase \"Tnttnt-Scene") && !line.startsWith("\t\tcase \"Tnttnt-Spot")).join("\n");
-
-
-	// dynamic imports file content
-	const contentDynamic = `import { registerIllustrationLoader } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
-
-const loadIllustration = async (illustrationName) => {
-	switch (illustrationName) {
-${fioriDynamicImportLines}
-${tntDynamicImportLines}
-		default: throw new Error("[Illustrations] Illustration not found: " + illustrationName);
-	}
+const path = require("path");
+
+const generateDynamicImportLines = (fileNames, location, exclusionPatterns = []) => {
+  return fileNames
+    .filter((fileName) => !exclusionPatterns.some((pattern) => fileName.startsWith(pattern)))
+    .map((fileName) => {
+      const illustrationPath = `${location}/${fileName.replace(".js", "")}`;
+      return `\t\tcase "${fileName.replace('.js', '')}": return (await import("${illustrationPath}.js")).default;`;
+    })
+    .join("\n");
+};
+
+const generateAvailableIllustrationsArray = (fileNames, exclusionPatterns = []) => {
+  return JSON.stringify(
+    fileNames
+      .filter((fileName) => !exclusionPatterns.some((pattern) => fileName.startsWith(pattern)))
+      .map((fileName) => fileName.replace(".js", ""))
+  );
+};
+
+const generateDynamicImportsFileContent = (dynamicImports, availableIllustrations, collection, prefix = "") => {
+  return `import { registerIllustrationLoader } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
+
+export const loadIllustration = async (illustrationName) => {
+  const collectionAndPrefix = "${collection}/${prefix}";
+  const cleanIllustrationName = illustrationName.startsWith(collectionAndPrefix) ? illustrationName.replace(collectionAndPrefix, "") : illustrationName;
+  switch (cleanIllustrationName) {
+${dynamicImports}
+    default:
+      throw new Error("[Illustrations] Illustration not found: " + illustrationName);
+  }
+};
+
+const loadAndCheck = async (illustrationName) => {
+  const data = await loadIllustration(illustrationName);
+  return data;
+};
+
+${availableIllustrations}.forEach((illustrationName) =>
+  registerIllustrationLoader(\`${collection}/${prefix}\${illustrationName}\`, loadAndCheck)
+);
+`;
+};
+
+const getMatchingFiles = async (folder, pattern) => {
+  const dir = await fs.readdir(folder);
+  return dir.filter((fileName) => fileName.match(pattern));
 };
-	const loadAndCheck = async (illustrationName) => {
-		const data = await loadIllustration(illustrationName);
-		return data;
-	}
 
+const generateIllustrations = async (config) => {
+  const { inputFolder, outputFile, collection, location, prefix, filterOut } = config;
+
+  const normalizedInputFolder = path.normalize(inputFolder);
+  const normalizedOutputFile = path.normalize(outputFile);
+
+  const illustrations = await getMatchingFiles(normalizedInputFolder, /^.*\.js$/);
 
-	${fioriAvailableIllustrationsArray}.forEach(illustrationName => registerIllustrationLoader(illustrationName, loadAndCheck));
-	${tntAvailableIllustrationsArray}.forEach(illustrationName => registerIllustrationLoader(illustrationName, loadAndCheck));`;
-	
+  const dynamicImports = generateDynamicImportLines(illustrations, location, filterOut);
+  const availableIllustrations = generateAvailableIllustrationsArray(illustrations, filterOut);
+
+  const contentDynamic = generateDynamicImportsFileContent(dynamicImports, availableIllustrations, collection, prefix);
+
+  await fs.mkdir(path.dirname(normalizedOutputFile), { recursive: true });
+  await fs.writeFile(normalizedOutputFile, contentDynamic);
+
+  console.log(`Generated ${normalizedOutputFile}`);
+};
 
-	await fs.mkdir(path.dirname(outputFile), { recursive: true });
-	return Promise.all([fs.writeFile(outputFile, contentDynamic)]);
+// Parse configuration from command-line arguments
+const config = {
+  inputFolder: process.argv[2],
+  outputFile: process.argv[3],
+  collection: process.argv[4],
+  location: process.argv[5],
+  prefix: process.argv[6],
+  filterOut: process.argv.slice(7),
 };
 
-generate().then(() => {
-	console.log("Generated Illustrations.js");
-})
-.catch(err => {
-	console.error(err);
-	process.exit(1);
+// Run the generation process
+generateIllustrations(config).catch((error) => {
+  console.error("Error generating illustrations:", error);
 });

package/lib/postcss-css-to-esm/index.js

@@ -60,7 +60,7 @@ module.exports = function (opts) {
 
 	return {
 		postcssPlugin: 'postcss-css-to-esm',
-		Once (root) {
+		OnceExit(root) {
 			const tsMode = process.env.UI5_TS === "true";
 
 			let css = root.toString();

package/lib/postcss-css-to-json/index.js

@@ -15,7 +15,7 @@ module.exports = function (opts) {
 
 	return {
 		postcssPlugin: 'postcss-css-to-json',
-		Once (root) {
+		OnceExit (root) {
 			let css = root.toString();
 			css = proccessCSS(css);
 

package/lib/postcss-scope-vars/index.js

@@ -0,0 +1,24 @@
+const name = "postcss-scope-vars";
+
+module.exports = (options) => {
+	const versionStr = "v" + options?.version?.replaceAll(".", "-");
+	return {
+		postcssPlugin: name,
+		prepare() {
+			return {
+				Declaration: (declaration) => {
+					if (declaration.__ui5_replaced) {
+						return;
+					}
+					// add version after ui5
+					const expr = /(--_?ui5)([^\,\:\)\s]+)/g
+					declaration.prop = declaration.prop.replaceAll(expr, `$1-${versionStr}$2`)
+					declaration.value = declaration.value.replaceAll(expr, `$1-${versionStr}$2`)
+					declaration.__ui5_replaced = true;
+				},
+			};
+		},
+	};
+};
+
+module.exports.postcss = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "0.0.0-6298a142d",
+  "version": "0.0.0-64a57f090",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -24,7 +24,6 @@
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",
     "@wdio/cli": "^7.19.7",
-    "@wdio/devtools-service": "^7.19.7",
     "@wdio/dot-reporter": "^7.19.7",
     "@wdio/local-runner": "^7.19.7",
     "@wdio/mocha-framework": "^7.19.7",
@@ -37,7 +36,7 @@
     "command-line-args": "^5.1.1",
     "concurrently": "^6.0.0",
     "cross-env": "^7.0.3",
-    "cssnano": "^4.1.11",
+    "cssnano": "^6.0.1",
     "escodegen": "^2.0.0",
     "eslint": "^7.22.0",
     "eslint-config-airbnb-base": "^14.2.1",
@@ -52,7 +51,6 @@
     "jsdoc": "^3.6.6",
     "json-beautify": "^1.1.1",
     "mkdirp": "^1.0.4",
-    "modify-selectors": "^2.0.0",
     "nps": "^5.10.0",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
@@ -64,9 +62,9 @@
     "resolve": "^1.20.0",
     "rimraf": "^3.0.2",
     "slash": "3.0.0",
-    "vite": "^3.0.4",
+    "vite": "^4.4.9",
     "wdio-chromedriver-service": "^7.3.2",
-    "zx": "^4.3.0"
+    "zx": "^7.2.3"
   },
   "peerDependencies": {
     "chromedriver": "*",