@ui5/builder 3.0.0-alpha.3 → 3.0.0-alpha.6

package/CHANGELOG.md

@@ -2,7 +2,35 @@
 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.3...HEAD).
+A list of unreleased changes can be found [here](https://github.com/SAP/ui5-builder/compare/v3.0.0-alpha.6...HEAD).
+
+<a name="v3.0.0-alpha.6"></a>
+## [v3.0.0-alpha.6] - 2022-04-26
+### Bug Fixes
+- **JSModuleAnalyzer:** Fix detection of bundle name ([#705](https://github.com/SAP/ui5-builder/issues/705)) [`aaeafd4`](https://github.com/SAP/ui5-builder/commit/aaeafd4a1fd194dd08e5ae47c29d90f0b4c7d197)
+- **generateResourcesJson:** Add raw-module info for debug bundles ([#736](https://github.com/SAP/ui5-builder/issues/736)) [`3b918e8`](https://github.com/SAP/ui5-builder/commit/3b918e83bfd38342778ecd4c58e648e99ad7cffc)
+
+
+<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
+### Features
+- **builder:** Add cssVariables option ([#728](https://github.com/SAP/ui5-builder/issues/728)) [`30d58e1`](https://github.com/SAP/ui5-builder/commit/30d58e1081c1bdc665f13952ecbe5c400b5f4ed7)
+
 
 <a name="v3.0.0-alpha.3"></a>
 ## [v3.0.0-alpha.3] - 2022-03-10
@@ -693,6 +721,9 @@ 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.6]: https://github.com/SAP/ui5-builder/compare/v3.0.0-alpha.5...v3.0.0-alpha.6
+[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
 [v3.0.0-alpha.1]: https://github.com/SAP/ui5-builder/compare/v3.0.0-alpha.0...v3.0.0-alpha.1

package/lib/builder/BuildContext.js

@@ -15,22 +15,26 @@ const GLOBAL_TAGS = Object.freeze({
  * @memberof module:@ui5/builder.builder
  */
 class BuildContext {
-	constructor({rootProject}) {
+	constructor({rootProject, options = {}}) {
 		if (!rootProject) {
 			throw new Error(`Missing parameter 'rootProject'`);
 		}
 		this.rootProject = rootProject;
 		this.projectBuildContexts = [];
-
 		this._resourceTagCollection = new ResourceTagCollection({
 			allowedTags: Object.values(GLOBAL_TAGS)
 		});
+		this.options = options;
 	}
 
 	getRootProject() {
 		return this.rootProject;
 	}
 
+	getOption(key) {
+		return this.options[key];
+	}
+
 	createProjectContext({project, resources}) {
 		const projectBuildContext = new ProjectBuildContext({
 			buildContext: this,

package/lib/builder/ProjectBuildContext.js

@@ -39,6 +39,10 @@ class ProjectBuildContext {
 		return this._project === this._buildContext.getRootProject();
 	}
 
+	getOption(key) {
+		return this._buildContext.getOption(key);
+	}
+
 	registerCleanupTask(callback) {
 		this.queues.cleanup.push(callback);
 	}

package/lib/builder/builder.js

@@ -224,6 +224,7 @@ module.exports = {
 	 * @param {boolean} [parameters.dev=false]
 	 *			Decides whether a development build should be activated (skips non-essential and time-intensive tasks)
 	 * @param {boolean} [parameters.selfContained=false] Flag to activate self contained build
+	 * @param {boolean} [parameters.cssVariables=false] Flag to activate CSS variables generation
 	 * @param {boolean} [parameters.jsdoc=false] Flag to activate JSDoc build
 	 * @param {Array.<string>} [parameters.includedTasks=[]] List of tasks to be included
 	 * @param {Array.<string>} [parameters.excludedTasks=[]] List of tasks to be excluded.
@@ -234,7 +235,7 @@ module.exports = {
 	async build({
 		tree, destPath, cleanDest = false,
 		buildDependencies = false, includedDependencies = [], excludedDependencies = [],
-		dev = false, selfContained = false, jsdoc = false,
+		dev = false, selfContained = false, cssVariables = false, jsdoc = false,
 		includedTasks = [], excludedTasks = [], devExcludeProject = []
 	}) {
 		const startTime = process.hrtime();
@@ -249,7 +250,12 @@ module.exports = {
 			virBasePath: "/"
 		});
 
-		const buildContext = new BuildContext({rootProject: tree});
+		const buildContext = new BuildContext({
+			rootProject: tree,
+			options: {
+				cssVariables: cssVariables
+			}
+		});
 		const cleanupSigHooks = registerCleanupSigHooks(buildContext);
 
 		const projects = {}; // Unique project index to prevent building the same project multiple times

package/lib/lbt/analyzer/JSModuleAnalyzer.js

@@ -301,6 +301,9 @@ class JSModuleAnalyzer {
 		 */
 		let bIsUi5Module = false;
 
+		// Module name via @ui5-bundle comment in first line. Overrides all other main module candidates.
+		let firstLineBundleName;
+
 		// first analyze the whole AST...
 		visit(ast, false);
 
@@ -314,7 +317,12 @@ class JSModuleAnalyzer {
 						log.verbose(`bundle include directive ${subModule}`);
 					} else if ( comment.value.startsWith("@ui5-bundle ") ) {
 						const bundleName = comment.value.slice("@ui5-bundle ".length);
-						setMainModuleInfo(bundleName, null);
+						if (comment.start === 0) {
+							// Remember the name from the first line to use it as final name
+							firstLineBundleName = bundleName;
+						} else {
+							setMainModuleInfo(bundleName, null);
+						}
 						log.verbose(`bundle name directive ${bundleName}`);
 					} else {
 						log.warn(`unrecognized bundle directive ${comment.value}`);
@@ -324,7 +332,10 @@ class JSModuleAnalyzer {
 		}
 
 		// ...and finally take conclusions about the file's content
-		if ( !mainModuleFound ) {
+		if ( firstLineBundleName ) {
+			// If the first line has a bundle name, use it and override all other found names
+			info.name = firstLineBundleName;
+		} else if ( !mainModuleFound ) {
 			// if there's exactly one module definition in this file but it didn't
 			// immediately qualify as main module, make it now the main module
 			if ( candidateName != null && nModuleDeclarations == 1 ) {

package/lib/lbt/resources/ResourceCollector.js

@@ -110,10 +110,11 @@ class ResourceCollector {
 	}
 
 	async enrichWithDependencyInfo(resourceInfo) {
-		return this._pool.getModuleInfo(resourceInfo.name).then(async (moduleInfo) => {
-			if ( moduleInfo.name ) {
+		return this._pool.getModuleInfo(resourceInfo.name, resourceInfo.module).then(async (moduleInfo) => {
+			if ( !resourceInfo.module && moduleInfo.name ) {
 				resourceInfo.module = moduleInfo.name;
 			}
+
 			if ( moduleInfo.dynamicDependencies ) {
 				resourceInfo.dynRequired = true;
 			}
@@ -279,37 +280,43 @@ class ResourceCollector {
 
 		await Promise.all(promises);
 
-		const debugBundlePromises = [];
-
-		for (let i = debugResourcesInfo.length - 1; i >= 0; i--) {
-			const dbgInfo = debugResourcesInfo[i];
-			const nonDebugName = ResourceInfoList.getNonDebugName(dbgInfo.name);
+		await Promise.all(debugResourcesInfo.map(async (dbgInfo) => {
+			const debugName = dbgInfo.name;
+			const nonDebugName = ResourceInfoList.getNonDebugName(debugName);
 			const nonDbgInfo = this._resources.get(nonDebugName);
 
 			// FIXME: "merged" property is only calculated in ResourceInfo#copyFrom
 			// Therefore using the same logic here to compute it.
+
+			// TODO: Idea: Use IsDebugVariant tag to decide whether to analyze the resource
+			// If the tag is set, we don't expect different analysis results so we can copy the info (else-path)
+			// Only when the tag is not set, we analyze the resource with its name (incl. -dbg)
+
 			if (!nonDbgInfo || (nonDbgInfo.included != null && nonDbgInfo.included.size > 0)) {
 				// We need to analyze the dbg resource if there is no non-dbg variant or
 				// it is a bundle because we will (usually) have different content.
-				debugBundlePromises.push(
-					this.enrichWithDependencyInfo(dbgInfo)
-				);
+
+				if (nonDbgInfo) {
+					// Always use the non-debug module name, if available
+					dbgInfo.module = nonDbgInfo.module;
+				}
+				await this.enrichWithDependencyInfo(dbgInfo);
 			} else {
 				// If the non-dbg resource is not a bundle, we can just copy over the info and skip
 				// analyzing the dbg variant as both should have the same info.
 
-				const newDbgInfo = new ResourceInfo(dbgInfo.name);
+				const newDbgInfo = new ResourceInfo(debugName);
 
 				// First copy info of analysis from non-dbg file (included, required, condRequired, ...)
 				newDbgInfo.copyFrom(null, nonDbgInfo);
 				// Then copy over info from dbg file to properly set name, isDebug, etc.
 				newDbgInfo.copyFrom(null, dbgInfo);
+				// Finally, set the module name to the non-dbg name
+				newDbgInfo.module = nonDbgInfo.module;
 
-				this._resources.set(dbgInfo.name, newDbgInfo);
+				this._resources.set(debugName, newDbgInfo);
 			}
-		}
-
-		await Promise.all(debugBundlePromises);
+		}));
 	}
 
 	createOrphanFilters() {

package/lib/lbt/resources/ResourceInfoList.js

@@ -48,7 +48,6 @@ class ResourceInfoList {
 		if ( myInfo == null ) {
 			myInfo = new ResourceInfo(relativeName);
 			myInfo.size = info.size;
-			myInfo.module = ResourceInfoList.getNonDebugName(info.name);
 			this.resources.push(myInfo);
 			this.resourcesByName.set(relativeName, myInfo);
 		}

package/lib/lbt/resources/ResourcePool.js

@@ -176,17 +176,18 @@ class ResourcePool {
 	/**
 	 * Retrieves the module info
 	 *
-	 * @param {string} name module name
+	 * @param {string} resourceName resource/module name
+	 * @param {string} [moduleName] module name, in case it differs from the resource name (e.g. for -dbg resources)
 	 * @returns {Promise<ModuleInfo>}
 	 */
-	async getModuleInfo(name) {
-		let info = this._dependencyInfos.get(name);
+	async getModuleInfo(resourceName, moduleName) {
+		let info = this._dependencyInfos.get(resourceName);
 		if ( info == null ) {
 			info = Promise.resolve().then(async () => {
-				const resource = await this.findResource(name);
-				return determineDependencyInfo( resource, this._rawModuleInfos.get(name), this );
+				const resource = await this.findResource(resourceName);
+				return determineDependencyInfo( resource, this._rawModuleInfos.get(moduleName || resourceName), this );
 			});
-			this._dependencyInfos.set(name, info);
+			this._dependencyInfos.set(resourceName, info);
 		}
 		return info;
 	}

package/lib/tasks/TaskUtil.js

@@ -108,6 +108,18 @@ class TaskUtil {
 		return this._projectBuildContext.isRootProject();
 	}
 
+	/**
+	 * Retrieves a build option defined by its <code>key</code.
+	 * If no option with the given <code>key</code> is stored, <code>undefined</code> is returned.
+	 *
+	 * @param {string} key The option key
+	 * @returns {any|undefined} The build option (or undefined)
+	 * @private
+	 */
+	getBuildOption(key) {
+		return this._projectBuildContext.getOption(key);
+	}
+
 	/**
 	 * Register a function that must be executed once the build is finished. This can be used to, for example,
 	 * clean up files temporarily created on the file system. If the callback returns a Promise, it will be waited for.

package/lib/tasks/generateLibraryManifest.js

@@ -2,7 +2,6 @@
 
 const log = require("@ui5/logger").getLogger("builder:tasks:generateLibraryManifest");
 const manifestCreator = require("../processors/manifestCreator");
-const ReaderCollectionPrioritized = require("@ui5/fs").ReaderCollectionPrioritized;
 
 
 /**
@@ -12,23 +11,18 @@ const ReaderCollectionPrioritized = require("@ui5/fs").ReaderCollectionPrioritiz
  * @alias module:@ui5/builder.tasks.generateLibraryManifest
  * @param {object} parameters Parameters
  * @param {module:@ui5/fs.DuplexCollection} parameters.workspace DuplexCollection to read and write files
- * @param {module:@ui5/fs.AbstractReader} parameters.dependencies Reader or Collection to read dependency files
  * @param {object} parameters.options Options
  * @param {string} parameters.options.projectName Project name
  * @returns {Promise<undefined>} Promise resolving with <code>undefined</code> once data has been written
  */
-module.exports = function({workspace, dependencies, options: {projectName}}) {
-	const combo = new ReaderCollectionPrioritized({
-		name: `libraryManifestGenerator - prioritize workspace over dependencies: ${projectName}`,
-		readers: [workspace, dependencies]
-	});
+module.exports = function({workspace, options: {projectName}}) {
 	// Note:
 	// *.library files are needed to identify libraries
 	// *.json files are needed to avoid overwriting them
 	// *.js files are needed to identify nested components
 	// *.less, *.css, *.theming and *.theme files are needed to identify supported themes
 	// *.properties to identify existence of i18n bundles (e.g. messagebundle.properties)
-	return combo.byGlob("/**/*.{js,json,library,less,css,theming,theme,properties}").then((resources) => {
+	return workspace.byGlob("/resources/**/*.{js,json,library,less,css,theming,theme,properties}").then((resources) => {
 		// Find all libraries and create a manifest.json file
 		return workspace.byGlob("/resources/**/.library").then((libraryIndicatorResources) => {
 			if (libraryIndicatorResources.length < 1) {

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,27 +109,9 @@ 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,
-				dependencies: resourceCollections.dependencies,
 				taskUtil,
 				options: {
 					projectName: project.metadata.name
@@ -150,6 +132,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,
@@ -198,7 +197,8 @@ class LibraryBuilder extends AbstractBuilder {
 					projectName: project.metadata.name,
 					librariesPattern: !taskUtil.isRootProject() ? "/resources/**/(*.library|library.js)" : undefined,
 					themesPattern: !taskUtil.isRootProject() ? "/resources/sap/ui/core/themes/*" : undefined,
-					inputPattern
+					inputPattern,
+					cssVariables: taskUtil.getBuildOption("cssVariables")
 				}
 			});
 		});

package/lib/types/themeLibrary/ThemeLibraryBuilder.js

@@ -31,7 +31,8 @@ class ThemeLibraryBuilder extends AbstractBuilder {
 					projectName: project.metadata.name,
 					librariesPattern: !taskUtil.isRootProject() ? "/resources/**/(*.library|library.js)" : undefined,
 					themesPattern: !taskUtil.isRootProject() ? "/resources/sap/ui/core/themes/*" : undefined,
-					inputPattern: "/resources/**/themes/*/library.source.less"
+					inputPattern: "/resources/**/themes/*/library.source.less",
+					cssVariables: taskUtil.getBuildOption("cssVariables")
 				}
 			});
 		});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ui5/builder",
-	"version": "3.0.0-alpha.3",
+	"version": "3.0.0-alpha.6",
 	"description": "UI5 Tooling - Builder",
 	"author": {
 		"name": "SAP SE",
@@ -105,7 +105,7 @@
 		"url": "git@github.com:SAP/ui5-builder.git"
 	},
 	"dependencies": {
-		"@ui5/fs": "^3.0.0-alpha.2",
+		"@ui5/fs": "^3.0.0-alpha.3",
 		"@ui5/logger": "^3.0.1-alpha.1",
 		"cheerio": "1.0.0-rc.9",
 		"escape-unicode": "^0.2.0",