fix(tools): Building third-party packages no longer fails (#1994)

Author: vladitasev

packages/theme-base/package-scripts.js

@@ -27,7 +27,7 @@ module.exports = {
 				...buildThemesCommands
 			},
 			postcss: "postcss dist/**/parameters-bundle.css --config config/postcss.themes --base dist/ --dir dist/css/",
-			jsonImports: `node "${jsonImportsScript}" dist/generated/json-imports`,
+			jsonImports: `node "${jsonImportsScript}" dist/generated/assets/themes dist/generated/json-imports`,
 		},
 		generateReport: `node "${generateReportScript}"`,
 	},

packages/tools/components-package/nps.js

@@ -28,7 +28,7 @@ const getScripts = (options) => {
 			},
 			jsonImports: {
 				default: "mkdirp dist/generated/json-imports && nps build.jsonImports.themes build.jsonImports.i18n",
-				themes: `node "${LIB}/generate-json-imports/themes.js" dist/generated/json-imports`,
+				themes: `node "${LIB}/generate-json-imports/themes.js" dist/generated/assets/themes dist/generated/json-imports`,
 				i18n: `node "${LIB}/generate-json-imports/i18n.js" dist/generated/assets/i18n dist/generated/json-imports`,
 			},
 			bundle: "rollup --config config/rollup.config.js --environment ES5_BUILD",

packages/tools/lib/generate-json-imports/themes.js

@@ -3,15 +3,24 @@ const path = require('path');
 const mkdirp = require("mkdirp");
 const assets = require("../../assets-meta.js");
 
-const outputFile = path.normalize(`${process.argv[2]}/Themes.js`);
+const inputFolder = path.normalize(process.argv[2]);
+const outputFile = path.normalize(`${process.argv[3]}/Themes.js`);
 
+// All supported optional themes
 const optionalThemes = assets.themes.all.filter(theme => theme !== assets.themes.default);
 
+// 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));
+
 const packageName = JSON.parse(fs.readFileSync("package.json")).name;
 
-const importLines = optionalThemes.map(theme => `import ${theme} from "../assets/themes/${theme}/parameters-bundle.css.json";`).join("\n");
-const isInlinedCondition = optionalThemes.map(theme => `isInlined(${theme})`).join(" || ");
-const registerLines = optionalThemes.map(theme => `registerThemeProperties("${packageName}", "${theme}", ${theme});`).join("\n");
+const importLines = themesOnFileSystem.map(theme => `import ${theme} from "../assets/themes/${theme}/parameters-bundle.css.json";`).join("\n");
+const isInlinedCondition = themesOnFileSystem.map(theme => `isInlined(${theme})`).join(" || ");
+const registerLines = themesOnFileSystem.map(theme => `registerThemeProperties("${packageName}", "${theme}", ${theme});`).join("\n");
 
 // Resulting file content
 const content = `import { registerThemeProperties } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
@@ -26,7 +35,7 @@ See rollup-plugin-url or webpack file-loader for more information.
 Suggested pattern: "assets\\\\\\/.*\\\\\\.json"\`);
 }
 
-${registerLines};
+${registerLines}
 `;
 
 mkdirp.sync(path.dirname(outputFile));

packages/tools/lib/init-package/index.js

@@ -38,8 +38,8 @@ try {
 
 // Ensure correct tag
 const tag = options.tag || DEFAULT_TAG;
-if (!tag.match(/^ui5-/)) {
-	console.log("tag name should start with ui5-");
+if (!tag.includes("-")) {
+	console.log("tag name should contain at least one dash");
 	process.exit(1);
 }
 const className = capitalizeFirst(kebabToCamelCase(tag.substr(4)));

packages/tools/lib/init-package/resources/src/themes/sap_fiori_3_hcb/parameters-bundle.css

@@ -0,0 +1,3 @@
+:root {
+    --ui5-demo-border-color: lightblue;
+}

packages/tools/lib/init-package/resources/src/themes/sap_fiori_3_hcw/parameters-bundle.css

@@ -0,0 +1,3 @@
+:root {
+    --ui5-demo-border-color: gray;
+}