@ui5/builder 3.0.0-alpha.4 → 3.0.0-alpha.5

package/CHANGELOG.md

@@ -2,7 +2,22 @@
 All notable changes to this project will be documented in this file.  
 This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-A list of unreleased changes can be found [here](https://github.com/SAP/ui5-builder/compare/v3.0.0-alpha.4...HEAD).
+A list of unreleased changes can be found [here](https://github.com/SAP/ui5-builder/compare/v3.0.0-alpha.5...HEAD).
+
+<a name="v3.0.0-alpha.5"></a>
+## [v3.0.0-alpha.5] - 2022-04-14
+### Bug Fixes
+- **LibraryBuilder:** Align task order of "generateComponentPreload" [`aea061d`](https://github.com/SAP/ui5-builder/commit/aea061d9d6c2ac0c11484dcc08bdcda23ab62986)
+
+### Features
+- **generateThemeDesignerResources task:** Create css_variables.less ([#730](https://github.com/SAP/ui5-builder/issues/730)) [`34e69be`](https://github.com/SAP/ui5-builder/commit/34e69be95fc8ec1961b24b7e2580c2c993d814d3)
+
+### BREAKING CHANGE
+
+For library projects, the task "generateComponentPreload" is now
+executed after tasks "generateLibraryManifest" and
+"generateManifestBundle" instead of before them.
+
 
 <a name="v3.0.0-alpha.4"></a>
 ## [v3.0.0-alpha.4] - 2022-04-05
@@ -699,6 +714,7 @@ to load the custom bundle file instead.
 - Add ability to configure component preloads and custom bundles [`2241e5f`](https://github.com/SAP/ui5-builder/commit/2241e5ff98fd95f1f80cc74959655ae7a9c660e7)
 
 
+[v3.0.0-alpha.5]: https://github.com/SAP/ui5-builder/compare/v3.0.0-alpha.4...v3.0.0-alpha.5
 [v3.0.0-alpha.4]: https://github.com/SAP/ui5-builder/compare/v3.0.0-alpha.3...v3.0.0-alpha.4
 [v3.0.0-alpha.3]: https://github.com/SAP/ui5-builder/compare/v3.0.0-alpha.2...v3.0.0-alpha.3
 [v3.0.0-alpha.2]: https://github.com/SAP/ui5-builder/compare/v3.0.0-alpha.1...v3.0.0-alpha.2

package/lib/tasks/generateThemeDesignerResources.js

@@ -3,6 +3,37 @@ const log = require("@ui5/logger").getLogger("builder:tasks:generateThemeDesigne
 const libraryLessGenerator = require("../processors/libraryLessGenerator");
 const {ReaderCollectionPrioritized, Resource, fsInterface} = require("@ui5/fs");
 
+/**
+ * Returns a relative path from the given themeFolder to the root namespace.
+ *
+ * When combining the given themeFolder with the returned relative path it
+ * resolves to "/resources/". However the "/resources/" part is not important
+ * here as it doesn't exist within the theming engine environment where the
+ * UI5 resources are part of a "UI5" folder (e.g. "UI5/sap/ui/core/") that
+ * is next to a "Base" folder.
+ *
+ * @example
+ * getPathToRoot("/resources/sap/ui/foo/themes/base")
+ * > "../../../../../"
+ *
+ * @param {string} themeFolder Virtual path including /resources/
+ * @returns {string} Relative path to root namespace
+ */
+function getPathToRoot(themeFolder) {
+	// -2 for initial "/"" and "resources/"
+	return "../".repeat(themeFolder.split("/").length - 2);
+}
+
+/**
+ * Generates an less import statement for the given <code>filePath</code>
+ *
+ * @param {string} filePath The path to the desired file
+ * @returns {string} The less import statement
+ */
+function lessImport(filePath) {
+	return `@import "${filePath}";\n`;
+}
+
 function generateLibraryDotTheming({namespace, version, hasThemes}) {
 	const dotTheming = {
 		sEntity: "Library",
@@ -80,6 +111,82 @@ async function generateThemeDotTheming({workspace, combo, themeFolder}) {
 	return newDotThemingResource;
 }
 
+async function createCssVariablesLessResource({workspace, combo, themeFolder}) {
+	const pathToRoot = getPathToRoot(themeFolder);
+	const cssVariablesSourceLessFile = "css_variables.source.less";
+	const cssVariablesLessFile = "css_variables.less";
+
+	// posix as it is a virtual path (separated with /)
+	const themeName = posixPath.basename(themeFolder);
+	// The "base" theme of the baseLib is called "baseTheme"
+	const baseLibThemeName = themeName === "base" ? "baseTheme" : themeName;
+
+	// Some themes do not have a base.less file (e.g. sap_hcb)
+	const hasBaseLess = !!(await combo.byPath(`/resources/sap/ui/core/themes/${themeName}/base.less`));
+
+	let cssVariablesLess =
+`/* NOTE: This file was generated as an optimized version of "${cssVariablesSourceLessFile}" \
+for the Theme Designer. */\n\n`;
+
+	if (themeName !== "base") {
+		const cssVariablesSourceLessResource = await workspace.byPath(
+			posixPath.join(themeFolder, cssVariablesSourceLessFile)
+		);
+
+		if (!cssVariablesSourceLessResource) {
+			throw new Error(`Could not find file "${cssVariablesSourceLessFile}" in theme "${themeFolder}"`);
+		}
+
+		const cssVariablesSourceLess = await cssVariablesSourceLessResource.getString();
+
+		cssVariablesLess += lessImport(`../base/${cssVariablesLessFile}`);
+		cssVariablesLess += `
+/* START "${cssVariablesSourceLessFile}" */
+${cssVariablesSourceLess}
+/* END "${cssVariablesSourceLessFile}" */
+
+`;
+	}
+
+	if (hasBaseLess) {
+		cssVariablesLess += lessImport(`${pathToRoot}../Base/baseLib/${baseLibThemeName}/base.less`);
+	}
+	cssVariablesLess += lessImport(`${pathToRoot}sap/ui/core/themes/${themeName}/global.less`);
+
+	return new Resource({
+		path: posixPath.join(themeFolder, cssVariablesLessFile),
+		string: cssVariablesLess
+	});
+}
+
+async function generateCssVariablesLess({workspace, combo, namespace}) {
+	let cssVariablesSourceLessResourcePattern;
+	if (namespace) {
+		// In case of a library only check for themes directly below the namespace
+		cssVariablesSourceLessResourcePattern = `/resources/${namespace}/themes/*/css_variables.source.less`;
+	} else {
+		// In case of a theme-library check for all "themes"
+		cssVariablesSourceLessResourcePattern = `/resources/**/themes/*/css_variables.source.less`;
+	}
+
+	const cssVariablesSourceLessResource = await workspace.byGlob(cssVariablesSourceLessResourcePattern);
+
+	const hasCssVariables = cssVariablesSourceLessResource.length > 0;
+
+	if (hasCssVariables) {
+		await Promise.all(
+			cssVariablesSourceLessResource.map(async (cssVariableSourceLess) => {
+				const themeFolder = posixPath.dirname(cssVariableSourceLess.getPath());
+				log.verbose(`Generating css_variables.less for theme ${themeFolder}`);
+				const r = await createCssVariablesLessResource({
+					workspace, combo, themeFolder
+				});
+				return await workspace.write(r);
+			})
+		);
+	}
+}
+
 /**
  * Generates resources required for integration with the SAP Theme Designer.
  *
@@ -163,4 +270,7 @@ module.exports = async function({workspace, dependencies, options: {projectName,
 	await Promise.all(
 		libraryLessResources.map((resource) => workspace.write(resource))
 	);
+
+	// css_variables.less
+	await generateCssVariablesLess({workspace, combo, namespace});
 };

package/lib/types/application/ApplicationBuilder.js

@@ -43,6 +43,27 @@ class ApplicationBuilder extends AbstractBuilder {
 			});
 		});
 
+		// Support rules should not be minified to have readable code in the Support Assistant
+		const minificationPattern = ["/**/*.js", "!**/*.support.js"];
+		if (["2.6"].includes(project.specVersion)) {
+			const minificationExcludes = project.builder && project.builder.minification &&
+						project.builder.minification.excludes;
+			if (minificationExcludes) {
+				// TODO 3.0: namespaces should become mandatory, see existing check above
+				const patternPrefix = project.metadata.namespace ? "/resources/" : "/";
+				this.enhancePatternWithExcludes(minificationPattern, minificationExcludes, patternPrefix);
+			}
+		}
+		this.addTask("minify", async () => {
+			return getTask("minify").task({
+				workspace: resourceCollections.workspace,
+				taskUtil,
+				options: {
+					pattern: minificationPattern
+				}
+			});
+		});
+
 		this.addTask("generateFlexChangesBundle", async () => {
 			const generateFlexChangesBundle = getTask("generateFlexChangesBundle").task;
 			return generateFlexChangesBundle({
@@ -67,27 +88,6 @@ class ApplicationBuilder extends AbstractBuilder {
 			});
 		}
 
-		// Support rules should not be minified to have readable code in the Support Assistant
-		const minificationPattern = ["/**/*.js", "!**/*.support.js"];
-		if (["2.6"].includes(project.specVersion)) {
-			const minificationExcludes = project.builder && project.builder.minification &&
-				project.builder.minification.excludes;
-			if (minificationExcludes) {
-				// TODO 3.0: namespaces should become mandatory, see existing check above
-				const patternPrefix = project.metadata.namespace ? "/resources/" : "/";
-				this.enhancePatternWithExcludes(minificationPattern, minificationExcludes, patternPrefix);
-			}
-		}
-		this.addTask("minify", async () => {
-			return getTask("minify").task({
-				workspace: resourceCollections.workspace,
-				taskUtil,
-				options: {
-					pattern: minificationPattern
-				}
-			});
-		});
-
 		const componentPreload = project.builder && project.builder.componentPreload;
 		if (componentPreload && (componentPreload.namespaces || componentPreload.paths)) {
 			this.addTask("generateComponentPreload", async () => {

package/lib/types/library/LibraryBuilder.js

@@ -109,23 +109,6 @@ class LibraryBuilder extends AbstractBuilder {
 			});
 		});
 
-		const componentPreload = project.builder && project.builder.componentPreload;
-		if (componentPreload) {
-			this.addTask("generateComponentPreload", async () => {
-				return getTask("generateComponentPreload").task({
-					workspace: resourceCollections.workspace,
-					dependencies: resourceCollections.dependencies,
-					taskUtil,
-					options: {
-						projectName: project.metadata.name,
-						paths: componentPreload.paths,
-						namespaces: componentPreload.namespaces,
-						excludes: componentPreload.excludes
-					}
-				});
-			});
-		}
-
 		this.addTask("generateLibraryManifest", async () => {
 			return getTask("generateLibraryManifest").task({
 				workspace: resourceCollections.workspace,
@@ -150,6 +133,23 @@ class LibraryBuilder extends AbstractBuilder {
 			});
 		}
 
+		const componentPreload = project.builder && project.builder.componentPreload;
+		if (componentPreload) {
+			this.addTask("generateComponentPreload", async () => {
+				return getTask("generateComponentPreload").task({
+					workspace: resourceCollections.workspace,
+					dependencies: resourceCollections.dependencies,
+					taskUtil,
+					options: {
+						projectName: project.metadata.name,
+						paths: componentPreload.paths,
+						namespaces: componentPreload.namespaces,
+						excludes: componentPreload.excludes
+					}
+				});
+			});
+		}
+
 		this.addTask("generateLibraryPreload", async () => {
 			return getTask("generateLibraryPreload").task({
 				workspace: resourceCollections.workspace,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ui5/builder",
-	"version": "3.0.0-alpha.4",
+	"version": "3.0.0-alpha.5",
 	"description": "UI5 Tooling - Builder",
 	"author": {
 		"name": "SAP SE",