@ui5/webcomponents-tools 0.0.0-6895c16dd → 0.0.0-6d98d0c29

package/CHANGELOG.md

@@ -3,9 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.0.0-rc.15](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.14...v1.0.0-rc.15) (2021-07-23)
+
+
+### Bug Fixes
+
+* **tools:** fix build error on MacOS 11 from rollup-plugin-terser ([#3347](https://github.com/SAP/ui5-webcomponents/issues/3347)) ([59892c4](https://github.com/SAP/ui5-webcomponents/commit/59892c4)), closes [#2515](https://github.com/SAP/ui5-webcomponents/issues/2515)
+
+
+
+
+
+
+# [1.0.0-rc.14](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.13...v1.0.0-rc.14) (2021-04-01)
+
+
+
+
+# [1.0.0-rc.13](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.12...v1.0.0-rc.13) (2021-03-26)
+
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
 # [1.0.0-rc.12](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.11...v1.0.0-rc.12) (2021-02-18)
 
-**Note:** Version bump only for package @ui5/webcomponents-theme-base
+**Note:** Version bump only for package @ui5/webcomponents-tools
 
 
 

package/components-package/nps.js

@@ -1,26 +1,36 @@
 const path = require("path");
+const fs = require("fs");
 
 const LIB = path.join(__dirname, `../lib/`);
-const serveConfig = path.join(__dirname, `serve.json`);
 const polyfillDir = path.dirname(require.resolve("@webcomponents/webcomponentsjs"));
-const polyfillPath = path.join(polyfillDir, "/**/*.*");
+const polyfillPath = path.join(polyfillDir, "{*.js,*.map,*.md,bundles/**/*.*}");
+const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
 
 const getScripts = (options) => {
 
-	const port = options.port;
+	const port = options.port || 8080; // preferred port
+	const portStep = options.portStep || 1; // step to check for available ports, if preferred port is already used
+	let illustrations = options.illustrationsPath || [];
+
+	illustrations = illustrations.map(illustration => `node "${LIB}/create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath}`);
+
+	let illustrationsScript = illustrations.join(" && ");
 
 	const scripts = {
-		clean: "rimraf dist",
-		lint: "",
+		clean: "rimraf dist && rimraf .port",
+		lint: "eslint . --config config/.eslintrc.js",
 		lintfix: "eslint . --config config/.eslintrc.js --fix",
-		prepare: "nps clean build.templates build.styles build.i18n build.jsonImports copy build.samples",
+		prepare: {
+			default: "nps clean build.templates build.styles build.i18n build.jsonImports copy build.samples build.illustrations",
+			es5: "nps clean build.templates build.styles build.i18n build.jsonImports copy.es5 build.samples build.illustrations"
+		},
 		build: {
-			default: "nps lint prepare build.bundle",
+			default: "nps lint prepare.es5 build.bundle",
 			templates: `mkdirp dist/generated/templates && node "${LIB}/hbs2ui5/index.js" -d src/ -o dist/generated/templates`,
 			styles: {
 				default: "nps build.styles.themes build.styles.components",
 				themes: "postcss src/**/parameters-bundle.css --config config/postcss.themes --base src --dir dist/css/",
-				components: "postcss src/themes/*.css --config config/postcss.components --base src --dir dist/css/",
+				components: "postcss src/themes/*.css --config config/postcss.components --base src --dir dist/css/", // When updating this, also update the new files script
 			},
 			i18n: {
 				default: "nps build.i18n.defaultsjs build.i18n.json",
@@ -37,36 +47,49 @@ const getScripts = (options) => {
 				default: "nps build.samples.api build.samples.docs",
 				api: `jsdoc -c "${LIB}/jsdoc/config.json"`,
 				docs: `node "${LIB}/documentation/index.js" dist/api.json`,
+			},
+			illustrations: {
+				default: illustrationsScript
 			}
 		},
 		copy: {
-			default: "nps copy.src copy.props copy.test copy.webcomponents-polyfill",
-			src: `node "${LIB}/copy-and-watch/index.js" "src/**/*.js" dist/`,
-			props: `node "${LIB}/copy-and-watch/index.js" "src/**/*.properties" dist/`,
-			test: `node "${LIB}/copy-and-watch/index.js" "test/**/*.*" dist/test-resources`,
-			"webcomponents-polyfill": `node "${LIB}/copy-and-watch/index.js" "${polyfillPath}" dist/webcomponentsjs/`,
+			default: "nps copy.src copy.props copy.test copy.webcomponents-polyfill-placeholder",
+			es5: "nps copy.src copy.props copy.test copy.webcomponents-polyfill",
+			src: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.js" dist/`,
+			props: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.properties" dist/`,
+			test: `node "${LIB}/copy-and-watch/index.js" --silent "test/**/*.*" dist/test-resources`,
+			"webcomponents-polyfill": `node "${LIB}/copy-and-watch/index.js" --silent "${polyfillPath}" dist/webcomponentsjs/`,
+			"webcomponents-polyfill-placeholder": `node "${LIB}/polyfill-placeholder/index.js"`
 		},
 		watch: {
-			default: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps watch.bundle" "nps watch.styles"',
+			default: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps watch.bundle" "nps watch.styles" "nps watch.i18n"',
+			es5: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps watch.bundle.es5" "nps watch.styles" "nps watch.i18n"',
 			src: 'nps "copy.src --watch --safe --skip-initial-copy"',
 			props: 'nps "copy.props --watch --safe --skip-initial-copy"',
 			test: 'nps "copy.test --watch --safe --skip-initial-copy"',
-			bundle: "rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV,DEPLOY_PUBLIC_PATH:/resources/",
+			bundle: {
+				default: 'rollup --config config/rollup.config.js -w --environment DEV,DEPLOY_PUBLIC_PATH:/resources/',
+				es5: 'rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV,DEPLOY_PUBLIC_PATH:/resources/'
+			},
 			styles: {
 				default: 'concurrently "nps watch.styles.themes" "nps watch.styles.components"',
 				themes: 'nps "build.styles.themes -w"',
-				components: 'nps "build.styles.components -w"',
+				components: {
+					default: 'concurrently "nps watch.styles.components.existingFiles" "nps watch.styles.components.newFiles"',
+					existingFiles: `nps "build.styles.components -w"`,
+					newFiles: `node "${LIB}/postcss-new-files/index.js" --srcFiles="src/themes/*.css"`,
+				},
 			},
-			templates: "chokidar \"src/**/*.hbs\" -c \"nps build.templates\"",
-			samples: "chokidar \"test/**/*.sample.html\" -c \"nps build.samples\"",
+			templates: 'chokidar "src/**/*.hbs" -c "nps build.templates"',
+			samples: 'chokidar "test/**/*.sample.html" -c "nps build.samples"',
+			i18n: 'chokidar "src/i18n/messagebundle.properties" -c "nps build.i18n.defaultsjs"'
 		},
-		dev: 'concurrently "nps serve" "nps watch"',
-		start: "nps prepare dev",
-		serve: {
-			default: "nps serve.prepare serve.run",
-			prepare: `node "${LIB}/copy-and-watch/index.js" "${serveConfig}" dist/`,
-			run: `serve --no-clipboard -l ${port} dist`,
+		dev: {
+			default: 'concurrently "nps serve" "nps watch"',
+			es5: 'concurrently "nps serve" "nps watch.es5"'
 		},
+		start: "nps prepare dev",
+		serve: `node "${LIB}/serve/index.js" --dir="dist/" --port=${port} --portStep=${portStep} --packageName="${packageName}"`,
 		test: {
 			// --success first - report the exit code of the test run (first command to finish), as serve is always terminated and has a non-0 exit code
 			default: 'concurrently "nps serve" "nps test.run" --kill-others --success first',
@@ -80,12 +103,12 @@ const getScripts = (options) => {
 			testPages: {
 				default: "nps scope.testPages.clean scope.testPages.copy scope.testPages.replace",
 				clean: "rimraf dist/test-resources/pages/scoped",
-				copy: `node "${LIB}/copy-and-watch/index.js" "dist/test-resources/pages/**/*" dist/test-resources/scoped`,
+				copy: `node "${LIB}/copy-and-watch/index.js" --silent "dist/test-resources/pages/**/*" dist/test-resources/scoped`,
 				replace: `node "${LIB}/scoping/scope-test-pages.js" dist/test-resources/scoped demo`,
 			},
 			dev: 'concurrently "nps serve" "nps scope.watch"',
 			watch: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps watch.props" "nps scope.bundle" "nps watch.styles"',
-			bundle: "rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV,SCOPE"
+			bundle: 'rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV,SCOPE'
 		}
 	};
 

package/components-package/rollup.js

@@ -6,13 +6,19 @@ const { nodeResolve } = require("@rollup/plugin-node-resolve");
 const url = require("@rollup/plugin-url");
 const { terser } = require("rollup-plugin-terser");
 const json = require("@rollup/plugin-json");
-const notify = require('rollup-plugin-notify');
-const filesize = require('rollup-plugin-filesize');
-const livereload = require('rollup-plugin-livereload');
+const colors = require("colors/safe");
+const filesize = require("rollup-plugin-filesize");
+const livereload = require("rollup-plugin-livereload");
 
-const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
+const packageFile = JSON.parse(fs.readFileSync("./package.json"));
+const packageName = packageFile.name;
 const DEPLOY_PUBLIC_PATH = process.env.DEPLOY_PUBLIC_PATH || "";
 
+const warningsToSkip = [{
+	warningCode: "THIS_IS_UNDEFINED",
+	filePath: /.+zxing.+/,
+}];
+
 function ui5DevImportCheckerPlugin() {
 	return {
 		name: "ui5-dev-import-checker-plugin",
@@ -21,48 +27,100 @@ function ui5DevImportCheckerPlugin() {
 			if (re.test(code)) {
 				throw new Error(`illegal import in ${file}`);
 			}
-		}
+		},
+	};
+}
+
+function onwarn(warning, warn) {
+	// Skip warning for known false positives that will otherwise polute the log
+	let skip = warningsToSkip.find(warningToSkip => {
+		let loc, file;
+		return warning.code === warningToSkip.warningCode
+			&& (loc = warning.loc)
+			&& (file = loc.file)
+			&& file.match(warningToSkip.filePath);
+	});
+	if (skip) {
+		return;
+	}
+
+	// warn everything else
+	warn( warning );
+}
+
+const reportedForPackages = new Set(); // sometimes writeBundle is called more than once per bundle -> suppress extra messages
+function ui5DevReadyMessagePlugin() {
+	return {
+		name: "ui5-dev-message-ready-plugin",
+		writeBundle: (assets, bundle) => {
+			if (reportedForPackages.has(packageName)) {
+				return;
+			}
+			console.log(colors.blue(`${colors.bold(packageName)} successfully built!`));
+
+			if (fs.existsSync(".port")) {
+				const port = `${fs.readFileSync(".port")}`;
+				if (port) {
+					console.log(colors.blue(`Navigate to: ${colors.bold(`http://localhost:${port}/test-resources/pages/`)}`));
+				}
+			}
+			reportedForPackages.add(packageName);
+		},
 	};
 }
 
 const getPlugins = ({ transpile }) => {
 	const plugins = [];
-	let publicPath = DEPLOY_PUBLIC_PATH;
-
 	if (!process.env.DEV) {
-		plugins.push(filesize({
-			render : function (options, bundle, { minSize, gzipSize, brotliSize, bundleSize, fileName }){
-				return fileName.padEnd(35) + " " + minSize + " / gzipped: " + gzipSize
-			}
-		}));
+		plugins.push(filesize(
+			{
+				reporter(options, bundle, {
+					minSize, gzipSize, brotliSize, bundleSize,
+					fileName,
+					// "showBeforeSizes: release"
+					lastVersion,
+					// "showBeforeSizes: "release" or "showBeforeSizes": "build"
+					bundleSizeBefore, brotliSizeBefore, minSizeBefore, gzipSizeBefore,
+				}) {
+				// If a promise is returned, it will be awaited before rendering.
+					return `${fileName.padEnd(35)} ${minSize} / gzipped: ${gzipSize}`;
+				},
+			},
+
+		));
 	}
 
+	const publicPath = DEPLOY_PUBLIC_PATH;
+
 	plugins.push(ui5DevImportCheckerPlugin());
 
-	// comment out json plugin when testing static imports
-	plugins.push(json({
-		include: [
-			/.*assets\/.*\.json/,
-		],
-		namedExports: false,
-	}));
-
-	// uncomment when testing static resources
-	// plugins.push(url({
-	// 	limit: 0,
-	// 	include: [
-	// 		/.*assets\/.*\.json/,
-	// 	],
-	// 	emitFiles: true,
-	// 	fileName: "[name].[hash][extname]",
-	// 	publicPath,
-	// }));
+	if (!transpile) {
+		plugins.push(json({
+			include: [
+				/.*assets\/.*\.json/,
+			],
+			namedExports: false,
+		}));
+	}
+
+	if (transpile) {
+		plugins.push(url({
+			limit: 0,
+			include: [
+				/.*assets\/.*\.json/,
+			],
+			emitFiles: true,
+			fileName: "[name].[hash][extname]",
+			publicPath,
+		}));
+	}
 
 	if (transpile) {
 		plugins.push(babel({
 			presets: ["@babel/preset-env"],
-			exclude: /node_modules\/(?!(lit-html|@ui5\/webcomponents))/, //exclude all node_modules/ except lit-html and all starting with @ui5/webcomponents
+			exclude: /node_modules\/(?!(lit-html|@ui5\/webcomponents))/, // exclude all node_modules/ except lit-html and all starting with @ui5/webcomponents
 			sourcemap: true,
+			babelHelpers: "bundled",
 		}));
 	}
 
@@ -70,14 +128,10 @@ const getPlugins = ({ transpile }) => {
 
 	if (!process.env.DEV) {
 		plugins.push(terser({
-			numWorkers: 1,	// temp workaround for `Error: kill EPERM` error on MacOS 11
+			numWorkers: 1,
 		}));
 	}
 
-	if (process.env.DEV) {
-		plugins.push(notify());
-	}
-
 	const es6DevMain = process.env.DEV && !transpile && packageName === "@ui5/webcomponents";
 	if (es6DevMain && os.platform() !== "win32") {
 		plugins.push(livereload({
@@ -85,10 +139,14 @@ const getPlugins = ({ transpile }) => {
 				"dist/resources/bundle.esm.js",
 				"dist/**/*.html",
 				"dist/**/*.json",
-			]
+			],
 		}));
 	}
 
+	if (process.env.DEV) {
+		plugins.push(ui5DevReadyMessagePlugin());
+	}
+
 	return plugins;
 };
 
@@ -98,23 +156,24 @@ const getES6Config = (input = "bundle.esm.js") => {
 		output: {
 			dir: "dist/resources",
 			format: "esm",
-			sourcemap: true
+			sourcemap: true,
 		},
-		moduleContext: (id) => {
+		moduleContext: id => {
 			if (typeof id === "string" && id.includes("url-search-params-polyfill")) {
 				// suppress the rollup error for this module as it uses this in the global scope correctly even without changing the context here
 				return "window";
 			}
 		},
 		watch: {
-			clearScreen: false
+			clearScreen: false,
 		},
-		plugins: getPlugins({transpile: false}),
+		plugins: getPlugins({ transpile: false }),
+		onwarn: onwarn,
 	}];
 };
 
 const getES5Config = (input = "bundle.es5.js") => {
-	return [ {
+	return [{
 		input,
 		output: {
 			dir: "dist/resources",
@@ -122,18 +181,19 @@ const getES5Config = (input = "bundle.es5.js") => {
 			inlineDynamicImports: true,
 			name: "sap-ui-webcomponents-bundle",
 			extend: "true",	// Whether or not to extend the global variable defined by the name option in umd or iife formats.
-			sourcemap: true
+			sourcemap: true,
 		},
-		moduleContext: (id) => {
+		moduleContext: id => {
 			if (id.includes("url-search-params-polyfill")) {
 				// suppress the rollup error for this module as it uses this in the global scope correctly even without changing the context here
 				return "window";
 			}
 		},
 		watch: {
-			clearScreen: false
+			clearScreen: false,
 		},
-		plugins: getPlugins({transpile: true}),
+		plugins: getPlugins({ transpile: true }),
+		onwarn: onwarn,
 	}];
 };
 

package/components-package/wdio.js

@@ -82,7 +82,7 @@ exports.config = {
 	// with `/`, the base url gets prepended, not including the path portion of your baseUrl.
 	// If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
 	// gets prepended directly.
-	baseUrl: '',
+	baseUrl: undefined, // This is important since WDIO 7+ does not accept an empty string for baseUrl
 	path: '',
 	//
 	// Default timeout for all waitFor* commands.

package/icons-collection/nps.js

@@ -1,4 +1,9 @@
 const path = require("path");
+const resolve = require("resolve");
+
+const generateHash = resolve.sync("@ui5/webcomponents-tools/lib/hash/generate.js");
+const hashIsUpToDate = resolve.sync("@ui5/webcomponents-tools/lib/hash/upToDate.js");
+const UP_TO_DATE = `node "${hashIsUpToDate}" dist/ hash.txt && echo "Up to date."`;
 
 const LIB = path.join(__dirname, `../lib/`);
 
@@ -8,11 +13,11 @@ const getScripts = (options) => {
 		clean: "rimraf dist",
 		copy: {
 			default: "nps copy.json-imports copy.icon-collection",
-			"json-imports": `node "${LIB}/copy-and-watch/index.js" "src/**/*.js" dist/`,
-			"icon-collection": `node "${LIB}/copy-and-watch/index.js" "src/*.json" dist/generated/assets/`
+			"json-imports": `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.js" dist/`,
+			"icon-collection": `node "${LIB}/copy-and-watch/index.js" --silent "src/*.json" dist/generated/assets/`
 		},
 		build: {
-			default: "nps clean copy build.i18n build.icons build.jsonImports",
+			default: `${UP_TO_DATE} || nps clean copy build.i18n build.icons build.jsonImports hash`,
 			i18n: {
 				default: "nps build.i18n.defaultsjs build.i18n.json",
 				defaultsjs: `mkdirp dist/generated/i18n && node "${LIB}/i18n/defaults.js" src/i18n dist/generated/i18n`,
@@ -23,7 +28,8 @@ const getScripts = (options) => {
 				i18n: `node "${LIB}/generate-json-imports/i18n.js" dist/generated/assets/i18n dist/generated/json-imports`,
 			},
 			icons: `node "${LIB}/create-icons/index.js" "${options.collectionName}"`,
-		}
+		},
+		hash: `node "${generateHash}" dist/ hash.txt`,
 	};
 
 	return scripts;

package/lib/copy-and-watch/index.js

@@ -10,7 +10,7 @@ require('colors');
 const args = process.argv.slice(2);
 const options = {};
 
-['watch', 'clean', 'skip-initial-copy', 'safe'].forEach(key => {
+['watch', 'clean', 'skip-initial-copy', 'safe',  'silent'].forEach(key => {
 	const index = args.indexOf(`--${key}`);
 	if (index >= 0) {
 		options[key] = true;
@@ -64,12 +64,12 @@ const copy = from => {
 		return;
 	}
 	fs.writeFileSync(to, fs.readFileSync(from));
-	console.log('[COPY]'.yellow, from, 'to'.yellow, to);
+	options.silent || console.log('[COPY]'.yellow, from, 'to'.yellow, to);
 };
 const remove = from => {
 	const to = findTarget(from);
 	fs.unlinkSync(to);
-	console.log('[DELETE]'.yellow, to);
+	options.silent || console.log('[DELETE]'.yellow, to);
 };
 const rimraf = dir => {
 	if (fs.existsSync(dir)) {
@@ -110,7 +110,9 @@ if (options.watch) {
 
 	chokidar
 		.watch(sources, chokidarOptions)
-		.on('ready', () => sources.forEach(s => console.log('[WATCH]'.yellow, s)))
+		.on('ready', () => sources.forEach(s => {
+			options.silent || console.log('[WATCH]'.yellow, s);
+		}))
 		.on('add', copy)
 		.on('addDir', copy)
 		.on('change', copy)

package/lib/copy-list/index.js

@@ -0,0 +1,28 @@
+const fs = require("fs");
+const path = require("path");
+const mkdirp = require("mkdirp");
+
+const fileList = process.argv[2];
+const dest = process.argv[3];
+const src = "../../node_modules/@openui5/sap.ui.core/src/";
+
+const filesToCopy = fs.readFileSync(fileList).toString();
+// console.log(filesToCopy);
+
+// Support full-line comments starting with # in the used-modules.txt file
+const shouldCopy = file => file.length && !file.startsWith("#");
+
+const trimFile = file => file.trim();
+
+filesToCopy.split("\n").map(trimFile).filter(shouldCopy).forEach(async moduleName => {
+	const srcPath = path.join(src, moduleName);
+	const destPath = path.join(dest, moduleName);
+
+	await mkdirp(path.dirname(destPath));
+    fs.copyFile(srcPath, destPath, (err) => {
+    	if (err) {
+    		throw err;
+		}
+		console.log(`${destPath} created.`);
+	});
+});

package/lib/create-illustrations/index.js

@@ -0,0 +1,95 @@
+const fs = require("fs");
+const path = require("path");
+const mkdirp = require("mkdirp");
+
+if (process.argv.length < 7) {
+	return;
+}
+
+const srcPath = process.argv[2];
+const defaultText = process.argv[3] === "true";
+const illustrationsPrefix = process.argv[4];
+const illustrationSet = process.argv[5];
+const destPath = process.argv[6];
+const fileNamePattern = new RegExp(`${illustrationsPrefix}-.+-(.+).svg`);
+// collect each illustration name because each one should have Sample.js file
+const fileNames = new Set();
+
+const svgImportTemplate = svgContent => { return `export default \`${svgContent}\`;`};
+const svgToJs = fileName => {
+	const svg = fs.readFileSync(path.join(srcPath, fileName), { encoding: "utf-8" });
+	const fileContent = svgImportTemplate(svg);
+	fileName = fileName.replace(/\.svg$/, ".js");
+
+	fs.writeFileSync(path.join(destPath, fileName), fileContent);
+};
+const illustrationImportTemplate = illustrationName => {
+	const illustationNameUpperCase = illustrationName.toUpperCase();
+
+	return defaultText ? `import { registerIllustration } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
+import dialogSvg from "./${illustrationsPrefix}-Dialog-${illustrationName}.js";
+import sceneSvg from "./${illustrationsPrefix}-Scene-${illustrationName}.js";
+import spotSvg from "./${illustrationsPrefix}-Spot-${illustrationName}.js";
+import {
+	IM_TITLE_${illustationNameUpperCase},
+	IM_SUBTITLE_${illustationNameUpperCase},
+} from "../generated/i18n/i18n-defaults.js";
+
+const name = "${illustrationName}";
+const set = "${illustrationSet}";
+const title = IM_TITLE_${illustationNameUpperCase};
+const subtitle = IM_SUBTITLE_${illustationNameUpperCase};
+
+registerIllustration(name, {
+	dialogSvg,
+	sceneSvg,
+	spotSvg,
+	title,
+	subtitle,
+	set,
+});
+
+export {
+	dialogSvg,
+	sceneSvg,
+	spotSvg,
+};` :
+`import { registerIllustration } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
+import dialogSvg from "./${illustrationsPrefix}-Dialog-${illustrationName}.js";
+import sceneSvg from "./${illustrationsPrefix}-Scene-${illustrationName}.js";
+import spotSvg from "./${illustrationsPrefix}-Spot-${illustrationName}.js";
+
+const name = "${illustrationName}";
+const set = "${illustrationSet}";
+
+registerIllustration(name, {
+	dialogSvg,
+	sceneSvg,
+	spotSvg,
+	set,
+});
+
+export {
+	dialogSvg,
+	sceneSvg,
+	spotSvg,
+};`
+};
+
+mkdirp.sync(destPath);
+
+const illustrationFileNames = fs.readdirSync(path.normalize(srcPath));
+
+// convert SVG to JS imports
+illustrationFileNames.forEach(illustration => {
+	if (fileNamePattern.test(illustration)) {
+		let [fileName, illustrationName] = illustration.match(fileNamePattern);
+
+		svgToJs(fileName);
+		fileNames.add(illustrationName);
+	}
+});
+
+for (let illustrationName of fileNames) {
+	fs.writeFileSync(path.join(destPath, `${illustrationName}.js`), illustrationImportTemplate(illustrationName));
+}

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

@@ -139,8 +139,16 @@ console.log(`Successfully generated ${componentName}.js`);
 console.log(`Successfully generated ${componentName}.css`);
 console.log(`Successfully generated ${componentName}.hbs`);
 
+const bundleLogger = fs.createWriteStream("./bundle.common.js", {
+	flags: "a" // appending
+});
+
+bundleLogger.write(`
+// TODO: Move this line in order to keep the file sorted alphabetically
+import ${componentName} from "./dist/${componentName}.js";`);
+
 // Change the color of the output
-console.warn('\x1b[33m%s\x1b[0m', `
-Please import the generated component in bundle.esm.js:
-import ${componentName} from "./dist/${componentName}.js";
-`);
+	console.warn('\x1b[33m%s\x1b[0m', `
+Component is imported in bundle.common.js.
+Do NOT forget to sort the file in alphabeticall order.
+`);

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

@@ -0,0 +1,54 @@
+const esprima = require("esprima");
+const escodegen = require("escodegen");
+
+const fs = require("fs");
+const path = require("path");
+const glob = require("glob");
+const basePath = process.argv[2];
+
+const convertImports = (srcPath) => {
+	let changed = false;
+	// console.log("scanning imports of", srcPath);
+	let code = fs.readFileSync(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) {
+		fs.writeFileSync(srcPath, escodegen.generate(tree));
+	}
+}
+
+const fileNames = glob.sync(basePath + "**/*.js");
+// console.log(fileNames);
+fileNames.forEach(convertImports);
+console.log("Success: Converted absolute imports to relative for files in:", basePath)

package/lib/generate-json-imports/themes.js

@@ -8,14 +8,14 @@ const outputFile = path.normalize(`${process.argv[3]}/Themes-static.js`);
 const outputFileDynamic = path.normalize(`${process.argv[3]}/Themes.js`);
 
 // All supported optional themes
-const optionalThemes = assets.themes.all.filter(theme => theme !== assets.themes.default);
+const allThemes = assets.themes.all;
 
 // All themes present in the file system
 const dirs = fs.readdirSync(inputFolder);
 const themesOnFileSystem = dirs.map(dir => {
 	const matches = dir.match(/sap_.*$/);
 	return matches ? dir : undefined;
-}).filter(key => !!key && optionalThemes.includes(key));
+}).filter(key => !!key && allThemes.includes(key));
 
 const packageName = JSON.parse(fs.readFileSync("package.json")).name;
 

package/lib/hash/config.js

@@ -0,0 +1,10 @@
+const config = {
+	files: {
+		exclude: ['serve.json']
+	},
+	folders: {
+		exclude: ['resources']
+	},
+};
+
+module.exports = config;

package/lib/hash/generate.js

@@ -0,0 +1,19 @@
+const fs = require("fs");
+const path = require("path");
+const process = require("process");
+const { hashElement } = require("folder-hash");
+const config = require("./config.js");
+
+const inputDir = path.normalize(process.argv[2]);
+const outputFileName = path.normalize(process.argv[3]);
+
+const generateHash = async (inputDir, outputFileName) => {
+	const result = await hashElement(inputDir, config);
+	const hash = result.hash;
+	fs.writeFileSync(outputFileName, hash);
+	return hash;
+};
+
+generateHash(inputDir, outputFileName).then(hash => {
+	console.log(`Generated hash: ${hash}`);
+});

package/lib/hash/upToDate.js

@@ -0,0 +1,31 @@
+const fs = require("fs");
+const path = require("path");
+const process = require("process");
+const { hashElement } = require("folder-hash");
+const config = require("./config.js");
+
+const inputDir = path.normalize(process.argv[2]);
+const hashFileName = path.normalize(process.argv[3]);
+
+const isUpToDate = async (inputDir, hashFileName) => {
+	// No dist/ directory or no hash file
+	if (!fs.existsSync(inputDir) || !fs.existsSync(hashFileName)) {
+		return false;
+	}
+
+	// Empty hash file
+	const existingHash = `${fs.readFileSync(hashFileName)}`;
+	if (!existingHash) {
+		return false;
+	}
+
+	// Calculate the hash of the dist/ directory
+	const result = await hashElement(inputDir, config);
+	const newHash = result.hash;
+
+	return newHash === existingHash;
+};
+
+isUpToDate(inputDir, hashFileName).then(upToDate => {
+	process.exit(upToDate ? 0 : 1); // 0 means success (it is up to date), 1 means failure (must rebuild the dist/)
+});

package/lib/hbs2lit/src/litVisitor2.js

@@ -11,6 +11,20 @@ let isNodeValue = false;
 // matches event handlers @click= and boolean attrs ?disabled=
 const dynamicAttributeRgx = /\s(\?|@)([a-zA-Z|-]+)="?\s*$/;
 
+if (!String.prototype.replaceAll) {
+	String.prototype.replaceAll = function(str, newStr){
+
+		// If a regex pattern
+		if (Object.prototype.toString.call(str).toLowerCase() === '[object regexp]') {
+			return this.replace(str, newStr);
+		}
+
+		// If a string
+		return this.replace(new RegExp(str, 'g'), newStr);
+
+	};
+}
+
 function HTMLLitVisitor(debug) {
 	this.blockCounter = 0;
 	this.keys = [];
@@ -18,7 +32,7 @@ function HTMLLitVisitor(debug) {
 	this.result = "";
 	this.mainBlock = "";
 	this.blockPath = "context";
-	this.blockParameters = ["context"];
+	this.blockParameters = ["context", "tags", "suffix"];
 	this.paths = []; //contains all normalized relative paths
 	this.debug = debug;
 	if (this.debug) {
@@ -34,7 +48,7 @@ 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(", ") + ") => { return ";
+	this.blocks[this.currentKey()] = "const " + this.currentKey() + " = (" + this.blockParameters.join(", ") + ") => ";
 
 	if (this.keys.length > 1) { //it's a nested block
 		this.blocks[this.prevKey()] += this.currentKey() + "(" + this.blockParameters.join(", ") + ")";
@@ -45,7 +59,7 @@ HTMLLitVisitor.prototype.Program = function(program) {
 
 	this.blocks[this.currentKey()] += "html`";
 	Visitor.prototype.Program.call(this, program);
-	this.blocks[this.currentKey()] += "`; };";
+	this.blocks[this.currentKey()] += "`;";
 
 	this.keys.pop(key);
 };
@@ -54,7 +68,7 @@ HTMLLitVisitor.prototype.ContentStatement = function(content) {
 	Visitor.prototype.ContentStatement.call(this, content);
 	// let content = content.orgiinal; // attribute="__ attribute = "__  attribute ="__
 
-	const contentStatement = content.original;
+	let contentStatement = content.original;
 	skipIfDefined = !!dynamicAttributeRgx.exec(contentStatement);
 
 	const closingIndex = contentStatement.lastIndexOf(">");
@@ -63,6 +77,9 @@ HTMLLitVisitor.prototype.ContentStatement = function(content) {
 		isNodeValue = closingIndex > openingIndex;
 	}
 
+	// Scope custom element tags
+	contentStatement = contentStatement.replaceAll(/(<\/?\s*)([a-zA-Z0-9_]+-[a-zA-Z0-9_-]+)/g, "$1\${scopeTag(\"$2\", tags, suffix)}");
+
 	this.blocks[this.currentKey()] += contentStatement;
 };
 

package/lib/hbs2lit/src/svgProcessor.js

@@ -46,8 +46,8 @@ function getSVGMatches(template) {
 
 function getSVGBlock(input, blockCounter) {
 	return {
-		usage: `\${blockSVG${blockCounter}(context)}`,
-		definition: `\nconst blockSVG${blockCounter} = (context) => {return svg\`${input}\`};`,
+		usage: `\${blockSVG${blockCounter}(context, tags, suffix)}`,
+		definition: `\nconst blockSVG${blockCounter} = (context, tags, suffix) => svg\`${input}\`;`,
 	};
 }
 
@@ -55,7 +55,7 @@ function replaceInternalBlocks(template, svgContent) {
 	const internalBlocks = svgContent.match(blockrx) || [];
 
 	internalBlocks.forEach(blockName => {
-		const rx = new RegExp(`const ${blockName}.*(html\`).*};`);
+		const rx = new RegExp(`const ${blockName}.*(html\`).*;`);
 		template = template.replace(rx, (match, p1) => {
 			return match.replace(p1, "svg\`");
 		});

package/lib/hbs2ui5/RenderTemplates/LitRenderer.js

@@ -1,17 +1,10 @@
 const buildRenderer = (controlName, litTemplate) => {
-	return `
-/* eslint no-unused-vars: 0 */
-import ifDefined from '@ui5/webcomponents-base/dist/renderer/ifDefined.js';
-import { html, svg, repeat, classMap, styleMap, unsafeHTML, setTags, setSuffix } from '@ui5/webcomponents-base/dist/renderer/LitRenderer.js';
+	return `/* eslint no-unused-vars: 0 */
+import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+
 ${litTemplate}
 
-const main = (context, tags, suffix) => {
-	setTags(tags);
-	setSuffix(suffix);
-	return block0(context);
-};
- 
-export default main;`
+export default block0;`;
 };
 
 module.exports = {

package/lib/i18n/toJSON.js

@@ -30,7 +30,7 @@ const messagesJSONDist = path.normalize(`${process.argv[3]}`);
 	const outputFile = path.normalize(`${messagesJSONDist}/${filename}.json`);
 
 	fs.writeFileSync(outputFile, JSON.stringify(properties));
-	console.log(`[i18n]: "${filename}.json" has been generated!`);
+	// console.log(`[i18n]: "${filename}.json" has been generated!`);
 };
 
 mkdirp.sync(messagesJSONDist);

package/lib/init-package/index.js

@@ -107,6 +107,19 @@ const updatePackageFile = () => {
 		"prepublishOnly": "npm run build"
 	};
 
+	// make convinient exports (no dist in component path)
+	// export the rest that is used directly or via require.resolve in scripts
+	packageContent.exports = {
+		"./.port": "./.port",
+		"./src/*": "./src/*",
+		"./dist/*": "./dist/*",
+		"./package.json": "./package.json",
+		"./bundle.esm.js": "./bundle.esm.js",
+		"./bundle.es5.js": "./bundle.es5.js",
+		"./bundle.common.js": "./bundle.common.js",
+		"./*": "./dist/*"
+	}
+
 	packageContent.ui5 = {
 		webComponentsPackage: true
 	};

package/lib/jsdoc/plugin.js

@@ -31,6 +31,10 @@
  *
  *   tagname
  *
+ *   native
+ *
+ *   allowPreventDefault
+ *
  * It furthermore listens to the following JSDoc3 events to implement additional functionality
  *
  *   parseBegin
@@ -2081,6 +2085,20 @@ exports.defineTags = function(dictionary) {
 			doclet.tagname = tag.value;
 		}
 	});
+
+	dictionary.defineTag('allowPreventDefault', {
+		mustHaveValue: false,
+		onTagged: function(doclet, tag) {
+			doclet.allowPreventDefault = true;
+		}
+	});
+
+	dictionary.defineTag('native', {
+		mustHaveValue: false,
+		onTagged: function(doclet, tag) {
+			doclet.native = true;
+		}
+	});
 };
 
 exports.handlers = {

package/lib/jsdoc/template/publish.js

@@ -2882,6 +2882,12 @@ function createAPIJSON4Symbol(symbol, omitDefaults) {
 					attrib("module", member.__ui5.module);
 					attrib("export", undefined, '', true);
 				}
+				if (member.allowPreventDefault) {
+					attrib("allowPreventDefault", true);
+				}
+				if (member.native) {
+					attrib("native", true);
+				}
 				attrib("visibility", visibility(member), 'public');
 				if ( member.scope === 'static' ) {
 					attrib("static", true, false, /* raw = */true);

package/lib/polyfill-placeholder/index.js

@@ -0,0 +1,5 @@
+const mkdirp = require("mkdirp");
+const fs = require("fs");
+
+mkdirp.sync("dist/webcomponentsjs/");
+fs.writeFileSync("dist/webcomponentsjs/webcomponents-loader.js", "");

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

@@ -1,4 +1,3 @@
-const postcss = require('postcss');
 const fs = require('fs');
 const path = require('path');
 const mkdirp = require('mkdirp');
@@ -25,18 +24,22 @@ const proccessCSS = css => {
 	return JSON.stringify(css);
 }
 
-module.exports = postcss.plugin('add css to esm transform plugin', function (opts) {
+module.exports = function (opts) {
 	opts = opts || {};
 
-	return function (root) {
-		let css = root.toString();
-		css = proccessCSS(css);
+	return {
+		postcssPlugin: 'postcss-css-to-esm',
+		Once (root) {
+			let css = root.toString();
+			css = proccessCSS(css);
 
-		const targetFile = root.source.input.from.replace(`/${opts.toReplace}/`, "/dist/generated/").replace(`\\${opts.toReplace}\\`, "\\dist\\generated\\");
-		mkdirp.sync(path.dirname(targetFile));
+			const targetFile = root.source.input.from.replace(`/${opts.toReplace}/`, "/dist/generated/").replace(`\\${opts.toReplace}\\`, "\\dist\\generated\\");
+			mkdirp.sync(path.dirname(targetFile));
 
-		const filePath = `${targetFile}.js`;
-		const defaultTheme = opts.includeDefaultTheme ? getDefaultThemeCode(opts.packageName) : ``;
-		fs.writeFileSync(filePath, `${defaultTheme}export default ${css};`);
-	}
-});
+			const filePath = `${targetFile}.js`;
+			const defaultTheme = opts.includeDefaultTheme ? getDefaultThemeCode(opts.packageName) : ``;
+			fs.writeFileSync(filePath, `${defaultTheme}export default ${css};`);
+		}
+	};
+};
+module.exports.postcss = true;

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

@@ -1,4 +1,3 @@
-const postcss = require('postcss');
 const fs = require('fs');
 const path = require('path');
 const mkdirp = require('mkdirp');
@@ -11,17 +10,22 @@ const proccessCSS = css => {
 	return css;
 }
 
-module.exports = postcss.plugin('add css to JSON transform plugin', function (opts) {
+module.exports = function (opts) {
 	opts = opts || {};
 
-	return function (root) {
-		let css = root.toString();
-		css = proccessCSS(css);
+	return {
+		postcssPlugin: 'postcss-css-to-json',
+		Once (root) {
+			let css = root.toString();
+			css = proccessCSS(css);
 
-		const targetFile = root.source.input.from.replace(`/${opts.toReplace}/`, "/dist/generated/assets/").replace(`\\${opts.toReplace}\\`, "\\dist\\generated\\assets\\");
-		mkdirp.sync(path.dirname(targetFile));
+			const targetFile = root.source.input.from.replace(`/${opts.toReplace}/`, "/dist/generated/assets/").replace(`\\${opts.toReplace}\\`, "\\dist\\generated\\assets\\");
+			mkdirp.sync(path.dirname(targetFile));
 
-		const filePath = `${targetFile}.json`;
-		fs.writeFileSync(filePath, JSON.stringify({_: css}));
-	}
-});
+			const filePath = `${targetFile}.json`;
+			fs.writeFileSync(filePath, JSON.stringify({_: css}));
+		}
+	};
+};
+
+module.exports.postcss = true;

package/lib/postcss-new-files/index.js

@@ -0,0 +1,36 @@
+const chokidar = require("chokidar");
+const commandLineArgs = require("command-line-args");
+const { exec } = require("child_process");
+
+const options = commandLineArgs([
+	{ name: "srcFiles", type: String },
+]);
+
+const runPostcss = path => {
+	let command = `postcss ${path} --config config/postcss.components --base src --dir dist/css/`;
+	console.log(`Executing: ${command}`);
+	exec(command, (err, stdout, stderr) => {
+		if (err) {
+			console.log(`Could not run postcss for ${path}. Error: ${err}`);
+		}
+	});
+
+	command = `${command} -w`;
+	console.log(`Executing: ${command}`);
+	exec(command, (err, stdout, stderr) => {
+		if (err) {
+			console.log(`Could not run postcss in watch mode for ${path}. Error: ${err}`);
+		}
+	});
+};
+
+let ready = false; // Do nothing until the ready event has been fired (we don't want to recompile all files initially)
+const watcher = chokidar.watch(options.srcFiles);
+watcher.on("ready", () => {
+	ready = true; // Initial scan is over -> waiting for new files
+});
+watcher.on("add", path => {
+	if (ready) {
+		runPostcss(path);
+	}
+});

package/lib/replace-global-core/index.js

@@ -0,0 +1,20 @@
+const fs = require("fs");
+const glob = require("glob");
+
+const basePath = process.argv[2];
+
+const replaceGlobalCoreUsage = (srcPath) => {
+
+	const original = fs.readFileSync(srcPath).toString();
+	let replaced = original.replace(/sap\.ui\.getCore\(\)/g, `Core`);
+
+	if (original !== replaced) {
+		replaced = `import Core from 'sap/ui/core/Core';
+		${replaced}`;
+		fs.writeFileSync(srcPath, replaced);
+	}
+};
+
+const fileNames = glob.sync(basePath + "**/*.js");
+fileNames.forEach(replaceGlobalCoreUsage);
+console.log("Success: Replaced global core usage in:", basePath);

package/lib/scoping/lint-src.js

@@ -10,7 +10,7 @@ const errors = [];
 glob.sync(path.join(process.cwd(), "src/**/*.css")).forEach(file => {
 	let content = String(fs.readFileSync(file));
 	tags.forEach(tag => {
-		if (content.match(new RegExp(`(^|[^\-_A-Za-z0-9"\[])(${tag})([^\-_A-Za-z0-9]|$)`, "g"))) {
+		if (content.match(new RegExp(`(^|[^\.\-_A-Za-z0-9"\[])(${tag})([^\-_A-Za-z0-9]|$)`, "g"))) {
 			errors.push(`Warning! ${tag} found in ${file}`);
 		}
 	});

package/lib/serve/index.js

@@ -0,0 +1,46 @@
+const fs = require("fs");
+const path = require("path");
+const commandLineArgs = require("command-line-args");
+const { exec } = require("child_process");
+const colors = require("colors/safe");
+const isPortReachable = require("is-port-reachable");
+
+const options = commandLineArgs([
+	{ name: "port", type: Number },
+	{ name: "portStep", type: Number },
+	{ name: "packageName", type: String },
+	{ name: "dir", type: String },
+	{ name: "config", type: String },
+]);
+const serveConfig = path.join(__dirname, `serve.json`);
+
+const requestPort = async () => {
+	const serveProcess = (await gen.next()).value;
+	serveProcess.stdout.on('data', data => {
+		const matches = data.match(/Accepting connections at .*?:(\d+)/);
+		if (matches) {
+			console.log(colors.yellow(`Reserved port ${matches[1]} for the ${options.packageName} package.`));
+			fs.writeFileSync(".port", matches[1]);
+		}
+	});
+};
+
+async function* serverGenerator(callback, port = 8080, step = 1) {
+	while (true) {
+		const portInUse = await isPortReachable(port, { host: "127.0.0.1" });
+		if (!portInUse) {
+			const command = `serve --config "${serveConfig}" --no-port-switching --no-clipboard -l ${port} ${options.dir}`;
+			console.log(colors.yellow(`Executing: ${command}`));
+			const serveProcess = exec(command, (err) => {
+				console.log(colors.yellow(`Port ${port} already in use.`));
+				callback();
+			});
+			yield serveProcess;
+		}
+		port += step;
+	}
+}
+
+const gen = serverGenerator(requestPort, options.port, options.portStep);
+
+requestPort();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "0.0.0-6895c16dd",
+  "version": "0.0.0-6d98d0c29",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -22,63 +22,63 @@
     "directory": "packages/tools"
   },
   "dependencies": {
-    "@babel/cli": "^7.1.2",
-    "@babel/core": "^7.1.2",
-    "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
-    "@babel/preset-env": "^7.1.0",
-    "@rollup/plugin-babel": "^5.2.1",
+    "@babel/cli": "^7.13.10",
+    "@babel/core": "^7.13.10",
+    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
+    "@babel/preset-env": "^7.13.10",
+    "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-url": "^5.0.1",
-    "@wdio/cli": "^6.1.3",
-    "@wdio/dot-reporter": "^6.0.16",
-    "@wdio/local-runner": "^6.1.3",
-    "@wdio/mocha-framework": "^6.1.0",
-    "@wdio/spec-reporter": "^6.0.16",
-    "@wdio/sync": "^6.1.0",
-    "@webcomponents/webcomponentsjs": "^2.4.0",
-    "chai": "^4.2.0",
-    "chokidar-cli": "^2.0.0",
-    "clean-css": "^4.2.1",
+    "@rollup/plugin-node-resolve": "^11.2.0",
+    "@rollup/plugin-url": "^6.0.0",
+    "@wdio/cli": "^7.2.0",
+    "@wdio/dot-reporter": "^7.2.0",
+    "@wdio/local-runner": "^7.2.0",
+    "@wdio/mocha-framework": "^7.2.0",
+    "@wdio/spec-reporter": "^7.2.0",
+    "@wdio/sync": "^7.2.0",
+    "@webcomponents/webcomponentsjs": "^2.5.0",
+    "chai": "^4.3.4",
+    "child_process": "^1.0.2",
+    "chokidar": "^3.5.1",
+    "chokidar-cli": "^2.1.0",
+    "clean-css": "^5.1.1",
+    "colors": "^1.4.0",
     "command-line-args": "^5.1.1",
-    "concurrently": "^5.0.0",
-    "cross-env": "^5.2.0",
+    "concurrently": "^6.0.0",
+    "cross-env": "^7.0.3",
     "cssnano": "^4.1.10",
-    "escodegen": "^1.11.0",
-    "eslint": "^5.10.0",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-plugin-import": "^2.14.0",
+    "escodegen": "^2.0.0",
+    "eslint": "^7.22.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-plugin-import": "^2.22.1",
     "esprima": "^4.0.1",
-    "getopts": "^2.2.3",
-    "glob": "^7.1.3",
-    "handlebars": "^4.7.6",
-    "jsdoc": "^3.6.3",
+    "folder-hash": "^4.0.1",
+    "getopts": "^2.3.0",
+    "glob": "^7.1.6",
+    "handlebars": "^4.7.7",
+    "is-port-reachable": "^3.0.0",
+    "jsdoc": "^3.6.6",
     "json-beautify": "^1.1.1",
-    "mkdirp": "^0.5.1",
+    "mkdirp": "^1.0.4",
     "npm-run-all": "^4.1.3",
-    "nps": "^5.9.8",
-    "postcss": "^7.0.18",
-    "postcss-cli": "^6.1.3",
-    "postcss-combine-duplicated-selectors": "^7.0.0",
-    "postcss-import": "^12.0.1",
-    "properties-reader": "^0.3.1",
-    "puppeteer": "^1.11.0",
+    "nps": "^5.10.0",
+    "postcss": "^8.2.10",
+    "postcss-cli": "^8.3.1",
+    "postcss-combine-duplicated-selectors": "^10.0.2",
+    "postcss-import": "^14.0.0",
+    "properties-reader": "^2.2.0",
+    "puppeteer": "^8.0.0",
     "recursive-readdir": "^2.2.2",
-    "rimraf": "^2.6.2",
-    "rollup": "^2.28.2",
-    "rollup-plugin-filesize": "^6.0.1",
-    "rollup-plugin-livereload": "^1.0.4",
-    "rollup-plugin-notify": "^1.1.0",
-    "rollup-plugin-string": "^2.0.2",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.41.4",
+    "rollup-plugin-filesize": "^9.1.1",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-visualizer": "^0.9.2",
-    "serve": "^10.1.1",
-    "wdio-chromedriver-service": "^6.0.2"
+    "serve": "^12.0.0",
+    "wdio-chromedriver-service": "^7.0.0"
   },
   "peerDependencies": {
     "chromedriver": "*"
-  },
-  "resolutions": {
-    "rollup-plugin-livereload/livereload/chokidar": "^3.x"
   }
 }