@ui5/webcomponents-tools 0.0.0-7d5f73b20 → 0.0.0-7d8c57f70

package/lib/hbs2lit/src/litVisitor2.js

@@ -28,14 +28,18 @@ if (!String.prototype.replaceAll) {
 	};
 }
 
-function HTMLLitVisitor(debug) {
+function HTMLLitVisitor(componentName, debug) {
 	this.blockCounter = 0;
 	this.keys = [];
 	this.blocks = {};
 	this.result = "";
 	this.mainBlock = "";
 	this.blockLevel = 0;
-	this.blockParameters = ["context", "tags", "suffix"];
+	this.componentName = componentName
+	const blockParametersDefinitionTS = [`this: ${componentName}`, "context: UI5Element", "tags: string[]", "suffix: string | undefined"];
+	const blockParametersDefinitionJS = ["context", "tags", "suffix"];
+	this.blockParametersDefinition = process.env.UI5_TS ? blockParametersDefinitionTS : blockParametersDefinitionJS;
+	this.blockParametersUsage = ["this", "context", "tags", "suffix"];
 	this.paths = []; //contains all normalized relative paths
 	this.debug = debug;
 	if (this.debug) {
@@ -51,17 +55,18 @@ HTMLLitVisitor.prototype.Program = function(program) {
 	this.keys.push(key);
 	this.debug && this.blockByNumber.push(key);
 
-	this.blocks[this.currentKey()] = "const " + this.currentKey() + " = (" + this.blockParameters.join(", ") + ") => ";
+	// this.blocks[this.currentKey()] = "function " + this.currentKey() + ` (this: any, ` + this.blockParametersDefinition.join(", ") + ") { ";
+	this.blocks[this.currentKey()] = `function ${this.currentKey()} (${this.blockParametersDefinition.join(", ")}) { `;
 
 	if (this.keys.length > 1) { //it's a nested block
-		this.blocks[this.prevKey()] += this.currentKey() + "(" + this.blockParameters.join(", ") + ")";
+		this.blocks[this.prevKey()] += this.currentKey() + ".call(" + this.blockParametersUsage.join(", ") + ")";
 	} else {
 		this.mainBlock = this.currentKey();
 	}
 
-	this.blocks[this.currentKey()] += "html`";
+	this.blocks[this.currentKey()] += "return html`";
 	Visitor.prototype.Program.call(this, program);
-	this.blocks[this.currentKey()] += "`;";
+	this.blocks[this.currentKey()] += "`;}";
 
 	this.keys.pop(key);
 };
@@ -98,14 +103,18 @@ HTMLLitVisitor.prototype.MustacheStatement = function(mustache) {
 		this.blocks[this.currentKey()] += "${index}";
 	} else {
 		const path = normalizePath.call(this, mustache.path.original);
-		const hasCalculatingClasses = path.includes("context.classes");
+		const hasCalculatingClasses = path.includes("this.classes");
 
 		let parsedCode = "";
 
 		if (isNodeValue && !mustache.escaped) {
 			parsedCode = `\${unsafeHTML(${path})}`;
 		} else if (hasCalculatingClasses) {
-			parsedCode = `\${classMap(${path})}`;
+			if (process.env.UI5_TS) {
+				parsedCode = `\${classMap(${path} as ClassMapValue)}`;
+			} else {
+				parsedCode = `\${classMap(${path})}`;
+			}
 		} else if (isStyleAttribute) {
 			parsedCode = `\${styleMap(${path})}`;
 		} else if (skipIfDefined){
@@ -170,19 +179,35 @@ function visitEachBlock(block) {
 	var bParamAdded = false;
 	visitSubExpression.call(this, block);
 
-	this.blocks[this.currentKey()] += "${ repeat(" + normalizePath.call(this, block.params[0].original) + ", (item, index) => item._id || index, (item, index) => ";
+	const reapeatDirectiveParamsTS = "(item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number)";
+	const reapeatDirectiveParamsJS = "(item, index) => item._id || index, (item, index)";
+	const repleatDirectiveParams = process.env.UI5_TS ? reapeatDirectiveParamsTS : reapeatDirectiveParamsJS;
+	this.blocks[this.currentKey()] += "${ repeat(" + normalizePath.call(this, block.params[0].original) + ", " + repleatDirectiveParams + " => ";
 	this.paths.push(normalizePath.call(this, block.params[0].original));
 	this.blockLevel++;
 
-	if (this.blockParameters.indexOf("item") === -1) {
+	// block params is [this, context, tags, suffix] for top level blocks
+	// blcok params is [this, context, tags, suffix, item, index] for nested blocks
+	if (!this.blockParametersUsage.includes("index")) {
+		// last item is not index, but an each block is processed, add the paramters for further nested blocks
 		bParamAdded = true;
-		this.blockParameters.unshift("index");
-		this.blockParameters.unshift("item");
+		if (process.env.UI5_TS) {
+			this.blockParametersDefinition.push("item: any");
+			this.blockParametersDefinition.push("index: number");
+		} else {
+			this.blockParametersDefinition.push("item");
+			this.blockParametersDefinition.push("index");
+		}
+		this.blockParametersUsage.push("item");
+		this.blockParametersUsage.push("index");
 	}
 	this.acceptKey(block, "program");
 	if (bParamAdded) {
-		this.blockParameters.shift("item");
-		this.blockParameters.shift("index");
+		// if parameters were added at this step, remove the last two
+		this.blockParametersDefinition.pop();
+		this.blockParametersDefinition.pop();
+		this.blockParametersUsage.pop();
+		this.blockParametersUsage.pop();
 	}
 	this.blockLevel--;
 	this.blocks[this.currentKey()] += ") }";
@@ -197,7 +222,7 @@ function normalizePath(sPath) {
 	if (result.indexOf("@root") === 0) {
 		// Trying to access root context via the HBS "@root" variable.
 		// Example: {{@root.property}} compiles to "context.property" - called from anywhere within the template.
-		result = result.replace("@root", "context");
+		result = result.replace("@root", "this");
 
 	} else if (result.indexOf("../") === 0) {
 		let absolutePath;
@@ -207,7 +232,7 @@ function normalizePath(sPath) {
 			// Trying to access root context from nested loops.
 			// Example: {{../../property}} compiles to "context.property" - when currently in a nested level loop.
 			// Example: {{../../../property}} compile to "context.property" - when requested levels are not present. fallback to root context.
-			absolutePath = `context.${replaceAll(result,"../", "")}`;
+			absolutePath = `this.${replaceAll(result,"../", "")}`;
 		} else {
 			// Trying to access upper context (one-level-up) and based on the current lelev, that could be "context" or "item".
 			// Example: {{../property}} compiles to "context.property" - when called in a top level loop.
@@ -235,7 +260,7 @@ function normalizePath(sPath) {
 		// {{/each}}
 		// {{text}} -> compiles to "context.text"
 
-		const blockPath = this.blockLevel > 0 ? "item" : "context";
+		const blockPath = this.blockLevel > 0 ? "item" : "this";
 		result = result ? replaceAll(blockPath + "/" + result, "/", ".") : blockPath;
 	}
 

package/lib/hbs2lit/src/svgProcessor.js

@@ -2,7 +2,7 @@
 const svgrx = new RegExp(/<svg[\s\S]*?>([\s\S]*?)<\/svg>/, 'g');
 const blockrx = /block[0-9]+/g;
 
-function process(input) {
+function processSVG(input) {
 	let matches;
 	let template = input;
 	let blockCounter = 0;
@@ -45,9 +45,16 @@ function getSVGMatches(template) {
 }
 
 function getSVGBlock(input, blockCounter) {
+	const definitionTS = `\nfunction blockSVG${blockCounter} (this: any, context: UI5Element, tags: string[], suffix: string | undefined) {
+		return svg\`${input}\`;
+	};`;
+	const definitionJS = `\nfunction blockSVG${blockCounter} (context, tags, suffix) {
+		return svg\`${input}\`;
+	};`;
+
 	return {
-		usage: `\${blockSVG${blockCounter}(context, tags, suffix)}`,
-		definition: `\nconst blockSVG${blockCounter} = (context, tags, suffix) => svg\`${input}\`;`,
+		usage: `\${blockSVG${blockCounter}.call(this, context, tags, suffix)}`,
+		definition: process.env.UI5_TS ? definitionTS : definitionJS,
 	};
 }
 
@@ -55,7 +62,7 @@ function replaceInternalBlocks(template, svgContent) {
 	const internalBlocks = svgContent.match(blockrx) || [];
 
 	internalBlocks.forEach(blockName => {
-		const rx = new RegExp(`const ${blockName}.*(html\`).*;`);
+		const rx = new RegExp(`function ${blockName}.*(html\`).*;`);
 		template = template.replace(rx, (match, p1) => {
 			return match.replace(p1, "svg\`");
 		});
@@ -65,5 +72,5 @@ function replaceInternalBlocks(template, svgContent) {
 }
 
 module.exports = {
-	process: process
+	process: processSVG,
 };

package/lib/hbs2ui5/RenderTemplates/LitRenderer.js

@@ -1,7 +1,35 @@
-const buildRenderer = (controlName, litTemplate) => {
-	return `/* eslint no-unused-vars: 0 */
-import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+const tsImports = (controlName, hasTypes) => {
+	if (!process.env.UI5_TS) {
+		return "";
+	}
+
+	const importPrefix = process.env.UI5_BASE ? "../../../" : "@ui5/webcomponents-base/dist/"
+
+	return `import type UI5Element from "${importPrefix}UI5Element.js";
+	${importForControl(controlName, hasTypes)}
+	import type { ClassMapValue } from "${importPrefix}types.js";
+	`;
+}
+const importForControl = (controlName, hasTypes) => {
+
+	if (!hasTypes) {
+		return `type ${controlName} = any;`;
+	}
 
+	if (process.env.UI5_BASE) {
+		// base package has a component in `test/elements` instead of `src`
+		return `import type ${controlName} from "../../../../test/elements/${controlName}.js";`
+	}
+	return `import type ${controlName} from "../../${controlName}.js";`
+}
+
+const buildRenderer = (controlName, litTemplate, hasTypes) => {
+	const importPrefix = process.env.UI5_BASE ? "../../../" : "@ui5/webcomponents-base/dist/"
+
+	// typescript cannot process package imports for the same package and the paths are changed to relative for base package templates
+	return `/* eslint no-unused-vars: 0 */
+import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "${importPrefix}renderer/LitRenderer.js";
+${tsImports(controlName, hasTypes)}
 ${litTemplate}
 
 export default block0;`;
@@ -9,4 +37,4 @@ export default block0;`;
 
 module.exports = {
 	generateTemplate: buildRenderer
-};
+};

package/lib/hbs2ui5/index.js

@@ -1,10 +1,13 @@
 const fs = require('fs').promises;
+const existsSync = require('fs').existsSync;
 const getopts = require('getopts');
 const hbs2lit = require('../hbs2lit');
 const path = require('path');
 const litRenderer = require('./RenderTemplates/LitRenderer');
 const recursiveReadDir = require("recursive-readdir");
 
+let missingTypesReported = false;
+
 const args = getopts(process.argv.slice(2), {
 	alias: {
 		o: 'output',
@@ -23,13 +26,27 @@ const onError = (place) => {
 
 const isHandlebars = (fileName) => fileName.indexOf('.hbs') !== -1;
 
+const hasTypes = (file, componentName) => {
+	const tsFile = path.join(path.dirname(file), componentName + ".ts")
+	const dtsFile = path.join(path.dirname(file), componentName + ".d.ts")
+	return existsSync(tsFile) || existsSync(dtsFile);
+}
+
 const processFile = async (file, outputDir) => {
-	const litCode = await hbs2lit(file);
-	const absoluteOutputDir = composeAbsoluteOutputDir(file, outputDir);
 	const componentNameMatcher = /(\w+)(\.hbs)/gim;
 	const componentName = componentNameMatcher.exec(file)[1];
+	const componentHasTypes = hasTypes(file, componentName);
+	if (!componentHasTypes) { 
+		if (!missingTypesReported) {
+			console.warn("[Warn] The following templates do not have a corresponging .ts or .d.ts file and won't be type checked:")
+			missingTypesReported = true;
+		}
+		console.log("  -> " + componentName + ".hbs");
+	}
+	const litCode = await hbs2lit(file, componentName);
+	const absoluteOutputDir = composeAbsoluteOutputDir(file, outputDir);
 
-	return writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode));
+	return writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode, componentHasTypes));
 };
 
 const composeAbsoluteOutputDir = (file, outputDir) => {
@@ -70,7 +87,7 @@ const writeRenderers = async (outputDir, controlName, fileContent) => {
 
 		await fs.mkdir(outputDir, { recursive: true });
 
-		const compiledFilePath = `${outputDir}${path.sep}${controlName}Template.lit.js`;
+		const compiledFilePath = `${outputDir}${path.sep}${controlName}Template.lit.${process.env.UI5_TS ? "ts" : "js"}`;
 
 		// strip DOS line endings because the break the source maps
 		let fileContentUnix = fileContent.replace(/\r\n/g, "\n");

package/lib/i18n/defaults.js

@@ -8,7 +8,9 @@ const generate = async () => {
 
 	const messageBundle = path.normalize(`${process.argv[2]}/messagebundle.properties`);
 	const messageBundleDefaultLanguage = path.normalize(`${process.argv[2]}/messagebundle_${defaultLanguage}.properties`);
-	const outputFile = path.normalize(`${process.argv[3]}/i18n-defaults.ts`);
+	const tsMode = process.env.UI5_TS === "true"; // In Typescript mode, we output .ts files and set the required types, otherwise - output pure .js files
+
+	const outputFile = path.normalize(`${process.argv[3]}/i18n-defaults.${tsMode ? "ts": "js"}`);
 
 	if (!messageBundle || !outputFile) {
 		return;
@@ -45,7 +47,10 @@ const generate = async () => {
 		let effectiveValue = defaultLanguageValue || value;
 		effectiveValue = effectiveValue.replace(/\"/g, "\\\""); // escape double quotes in translations
 
-		return `const ${key}: I18nText = {key: "${key}", defaultText: "${effectiveValue}"};`;
+		if (tsMode) {
+			return `const ${key}: I18nText = {key: "${key}", defaultText: "${effectiveValue}"};`;
+		}
+		return `const ${key} = {key: "${key}", defaultText: "${effectiveValue}"};`;
 	};
 
 	/*
@@ -62,7 +67,8 @@ const generate = async () => {
 		const textKeys = Object.keys(properties);
 		const texts = textKeys.map(prop => getTextInfo(prop, properties[prop], defaultLanguageProperties && defaultLanguageProperties[prop])).join('');
 
-		return `import { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+		// tabs are intentionally mixed to have proper identation in the produced file
+		return `${tsMode ? `import { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";` : ""}
 ${texts}
 export {${textKeys.join()}};`;
 	};

package/lib/i18n/toJSON.js

@@ -34,7 +34,7 @@ const convertToJSON = async (file) => {
 const generate = async () => {
 	const { globby } = await import("globby");
 	await fs.mkdir(messagesJSONDist, { recursive: true });
-	const files = await globby(messagesBundles);
+	const files = await globby(messagesBundles.replace(/\\/g, "/"));
 	return Promise.all(files.map(convertToJSON));
 };
 

package/lib/jsdoc/preprocess.js

@@ -8,7 +8,7 @@ const sourceDir = process.argv[3];
 const preprocessTypes = async () => {
 	try {
 		const { globby } = await import("globby");
-		const fileNames = await globby(inputDir + "**/types/*.js");
+		const fileNames = await globby(inputDir.replace(/\\/g, "/") + "**/types/*.js");
 
 		return Promise.all(fileNames.map(processTypeFile));
 	} catch(e) {
@@ -63,7 +63,7 @@ const preprocessComponents = async () => {
 
 	try {
 		const { globby } = await import("globby");
-		const fileNames = await globby(sourceDir + "/*.ts");
+		const fileNames = await globby(sourceDir.replace(/\\/g, "/") + "/*.ts");
 
 		return Promise.all(fileNames.map(processComponentFile));
 	} catch(e) {
@@ -116,7 +116,7 @@ const processComponentFile = async (fileName) => {
 	const destFileName = fileName.replace(sourceDir, inputDir).replace(/\.ts$/, ".js");
 	let jsFileContent = `${await fs.readFile(destFileName)}`;
 
-	const classDefinitionRegExp = new RegExp(`let.*? = class`, "gm");
+	const classDefinitionRegExp = new RegExp(`(let.*? = class)|(^class.*?)`, "gm");
 	let classDefinitionMatch = jsFileContent.match(classDefinitionRegExp);
 	if (!classDefinitionMatch) {
 		return; // not a file, generated by typescript, nothing to do here

package/lib/postcss-combine-duplicated-selectors/index.js

@@ -154,22 +154,29 @@ module.exports = (options) => {
 							options.removeDuplicatedProperties ||
 							options.removeDuplicatedValues
 						) {
-							removeDupProperties(
-								destination,
-								options.removeDuplicatedValues,
-							);
+							// removeDupProperties(
+							// 	destination,
+							// 	options.removeDuplicatedValues,
+							// );
 						}
 					} else {
 						if (
 							options.removeDuplicatedProperties ||
 							options.removeDuplicatedValues
 						) {
-							removeDupProperties(rule, options.removeDuplicatedValues);
+							// removeDupProperties(rule, options.removeDuplicatedValues);
 						}
 						// add new selector to symbol table
 						map.set(selector, rule);
 					}
 				},
+				OnceExit(root) {
+					root.nodes.forEach(node => {
+						if (node.type === "rule") {
+							removeDupProperties(node, options.removeDuplicatedValues);
+						}
+					})
+				}
 			};
 		},
 	};

package/lib/scoping/get-all-tags.js

@@ -10,7 +10,7 @@ const getTag = file => {
 
 const getPackageTags = (packageDir) => {
 	const srcDir = path.join(packageDir, "src/");
-	return glob.sync(path.join(srcDir, "/**/*.js")).flatMap(file => {
+	return glob.sync(path.join(srcDir, "/**/*.ts")).flatMap(file => {
 		const tag = getTag(file);
 		return [tag];
 	}).filter(item => !!item);

package/lib/scoping/scope-test-pages.js

@@ -18,6 +18,7 @@ const replaceTagsHTML = content => {
 
 // Replace tags in any content
 const replaceTagsAny = content => {
+	console.log(tags.length);
 	tags.forEach(tag => {
 		content = content.replace(new RegExp(`(^|[^\-_A-Za-z0-9])(${tag})([^\-_A-Za-z0-9]|$)`, "g"), `$1$2-${suffix}$3`);
 	});
@@ -27,7 +28,7 @@ const replaceTagsAny = content => {
 // Replace bundle names and HTML tag names in test pages
 glob.sync(path.join(root, "/**/*.html")).forEach(file => {
 	let content = String(fs.readFileSync(file));
-	content = content.replace(/bundle\.(.*?)\.js/g, `../bundle.scoped.$1.js`);
+	content = content.replace("%VITE_BUNDLE_PATH%", "%VITE_BUNDLE_PATH_SCOPED%");
 	content = replaceTagsHTML(content);
 	fs.writeFileSync(file, content);
 });

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

@@ -1,6 +1,7 @@
 const child_process = require("child_process");
 const { readFileSync } = require("fs");
 const path = require("path");
+const fs = require("fs");
 
 // search for dev-server port 
 // start in current folder
@@ -23,7 +24,7 @@ while (true) {
 // 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.directory;
+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
@@ -57,7 +58,14 @@ 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 config/wdio.conf.js ${spec} ${baseUrl} ${restParams}`;
+const cmd = `yarn cross-env WDIO_LOG_LEVEL=error wdio ${wdioConfig} ${spec} ${baseUrl} ${restParams}`;
 console.log(`executing: ${cmd}`);
 child_process.execSync(cmd, {stdio: 'inherit'});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "0.0.0-7d5f73b20",
+  "version": "0.0.0-7d8c57f70",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -21,23 +21,26 @@
     "directory": "packages/tools"
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
+    "@custom-elements-manifest/analyzer": "^0.8.4",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
     "@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",
     "@wdio/spec-reporter": "^7.19.7",
     "@wdio/static-server-service": "^7.19.5",
+    "ajv": "^8.12.0",
+    "cem-plugin-vs-code-custom-data-generator": "^1.4.2",
     "chai": "^4.3.4",
     "child_process": "^1.0.2",
     "chokidar": "^3.5.1",
     "chokidar-cli": "^3.0.0",
     "command-line-args": "^5.1.1",
+    "comment-parser": "^1.4.0",
     "concurrently": "^6.0.0",
     "cross-env": "^7.0.3",
-    "cssnano": "^4.1.11",
+    "custom-element-jet-brains-integration": "^1.4.4",
     "escodegen": "^2.0.0",
     "eslint": "^7.22.0",
     "eslint-config-airbnb-base": "^14.2.1",
@@ -55,21 +58,27 @@
     "nps": "^5.10.0",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
-    "postcss-import": "^14.0.2",
     "postcss-selector-parser": "^6.0.10",
+    "prompts": "^2.4.2",
     "properties-reader": "^2.2.0",
     "recursive-readdir": "^2.2.2",
     "resolve": "^1.20.0",
     "rimraf": "^3.0.2",
     "slash": "3.0.0",
-    "vite": "^2.9.12",
-    "wdio-chromedriver-service": "^7.3.2",
-    "zx": "^4.3.0"
+    "vite": "^4.4.9",
+    "wdio-chromedriver-service": "^7.3.2"
   },
   "peerDependencies": {
-    "chromedriver": "*"
+    "chromedriver": "*",
+    "typescript": "5.2.2"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
   },
   "devDependencies": {
+    "esbuild": "^0.19.9",
     "yargs": "^17.5.1"
   }
 }

package/lib/esm-abs-to-rel/index.js

@@ -1,58 +0,0 @@
-const esprima = require("esprima");
-const escodegen = require("escodegen");
-
-const fs = require("fs").promises;
-const path = require("path");
-const basePath = process.argv[2];
-
-const convertImports = async (srcPath) => {
-	let changed = false;
-	// console.log("scanning imports of", srcPath);
-	let code = (await fs.readFile(srcPath)).toString();
-	const tree = esprima.parseModule(code);
-	const importer = srcPath.replace(basePath, "");
-	const importerDir = path.dirname(importer);
-	// console.log("-> ", importer);
-	tree.body.forEach(node => {
-		if (node.type === "ImportDeclaration") {
-			let importee = node.source.value;
-			if (importee.startsWith(".")) {
-				// add .js extension if missing
-				if (!importee.endsWith(".js")) {
-					node.source.value += ".js"
-					changed = true;
-				}
-				return;
-			}
-			let importeeDir = path.dirname(importee);
-			let importeeFile = path.basename(importee);
-			let relativePath = path.relative(importerDir, importeeDir);
-			if (relativePath.length === 0) {
-				relativePath = "."
-			}
-			if (!relativePath.startsWith(".")) {
-				relativePath = "./" + relativePath;
-			}
-
-			relativePath = relativePath.replace(/\\/g, "/"); // the browser expects unix paths
-			let relativeImport = `${relativePath}/${importeeFile}.js`;
-			// console.log(importee + " --> " + relativeImport);
-			node.source.value = relativeImport;
-			changed = true;
-		}
-	});
-
-	if (changed) {
-		return fs.writeFile(srcPath, escodegen.generate(tree));
-	}
-}
-
-const generate = async () => {
-	const { globby } = await import("globby");
-	const fileNames = await globby(basePath + "**/*.js");
-	return Promise.all(fileNames.map(convertImports).filter(x => !!x));
-};
-
-generate().then(() => {
-	console.log("Success: Converted absolute imports to relative for files in:", basePath);
-});

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

@@ -1,63 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const mkdirp = require('mkdirp');
-const assets = require("../../assets-meta.js");
-
-const DEFAULT_THEME = assets.themes.default;
-const requiredImports = "import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";";
-
-const getDefaultThemeCode = packageName => {
-	return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
-${requiredImports}
-
-import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/${DEFAULT_THEME}/parameters-bundle.css.js";
-import defaultTheme from "./${DEFAULT_THEME}/parameters-bundle.css.js";
-
-registerThemePropertiesLoader("@ui5/webcomponents-theming", "${DEFAULT_THEME}", async () => defaultThemeBase);
-registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", async () => defaultTheme);
-`;
-};
-
-const proccessCSS = css => {
-	css = css.replace(/\.sapThemeMeta[\s\S]*?:root/, ":root");
-	css = css.replace(/\.background-image.*{.*}/, "");
-	css = css.replace(/\.sapContrast[ ]*:root[\s\S]*?}/, "");
-	css = css.replace(/--sapFontUrl.*\);?/, "");
-	return JSON.stringify(css);
-}
-
-module.exports = function (opts) {
-	opts = opts || {};
-
-	return {
-		postcssPlugin: 'postcss-css-to-esm',
-		Once (root) {
-			let css = root.toString();
-			css = proccessCSS(css);
-
-			const targetFile = root.source.input.from.replace(`/${opts.toReplace}/`, "/src/generated/").replace(`\\${opts.toReplace}\\`, "\\src\\generated\\");
-			mkdirp.sync(path.dirname(targetFile));
-
-			const filePath = `${targetFile}.ts`;
-			const defaultTheme = opts.includeDefaultTheme ? getDefaultThemeCode(opts.packageName) : requiredImports;
-
-			// it seems slower to read the old content, but writing the same content with no real changes
-			// (as in initial build and then watch mode) will cause an unnecessary dev server refresh
-			let oldContent = "";
-			try {
-				oldContent = fs.readFileSync(filePath).toString();
-			} catch (e) {
-				// file not found
-			}
-
-			const content = `${defaultTheme}
-const styleData: StyleData = {packageName:"${opts.packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}};
-export default styleData;
-`;
-			if (content !== oldContent) {
-				fs.writeFileSync(filePath, content);
-			}
-		}
-	};
-};
-module.exports.postcss = true;