[FEATURE] builder: Add cssVariables option (#728)

BLI: CPOUI5FOUNDATION-346

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,

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);
 	}

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

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.

lib/types/library/LibraryBuilder.js

@@ -198,7 +198,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")
 				}
 			});
 		});

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")
 				}
 			});
 		});

test/expected/build/theme.j/dest-css-variables/resources/theme/j/themes/somefancytheme/Button.less

@@ -0,0 +1,3 @@
+.someClass {
+	color: @someColor
+}

test/expected/build/theme.j/dest-css-variables/resources/theme/j/themes/somefancytheme/css_variables.css

@@ -0,0 +1,3 @@
+:root{--someColor:#000}
+/* Inline theming parameters */
+#sap-ui-theme-theme\.j{background-image:url('data:text/plain;utf-8,%7B%22someColor%22%3A%22%23000%22%7D')}

test/expected/build/theme.j/dest-css-variables/resources/theme/j/themes/somefancytheme/css_variables.source.less

@@ -0,0 +1,5 @@
+@someColor: #000000;
+
+:root {
+--someColor: @someColor;
+}

test/expected/build/theme.j/dest-css-variables/resources/theme/j/themes/somefancytheme/library-RTL.css

@@ -0,0 +1,3 @@
+.someClass{color:#000}
+/* Inline theming parameters */
+#sap-ui-theme-theme\.j{background-image:url('data:text/plain;utf-8,%7B%22someColor%22%3A%22%23000%22%7D')}

test/expected/build/theme.j/dest-css-variables/resources/theme/j/themes/somefancytheme/library-parameters.json

@@ -0,0 +1 @@
+{"someColor":"#000"}

test/expected/build/theme.j/dest-css-variables/resources/theme/j/themes/somefancytheme/library.css

@@ -0,0 +1,3 @@
+.someClass{color:#000}
+/* Inline theming parameters */
+#sap-ui-theme-theme\.j{background-image:url('data:text/plain;utf-8,%7B%22someColor%22%3A%22%23000%22%7D')}

test/expected/build/theme.j/dest-css-variables/resources/theme/j/themes/somefancytheme/library.source.less

@@ -0,0 +1,2 @@
+@someColor: black;
+@import "Button.less";

test/expected/build/theme.j/dest-css-variables/resources/theme/j/themes/somefancytheme/library_skeleton-RTL.css

@@ -0,0 +1 @@
+.someClass{color:var(--someColor)}

test/expected/build/theme.j/dest-css-variables/resources/theme/j/themes/somefancytheme/library_skeleton.css

@@ -0,0 +1 @@
+.someClass{color:var(--someColor)}

test/expected/build/theme.library.e/dest-css-variables/resources/theme/library/e/themes/my_theme/.theme

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<theme xmlns="http://www.sap.com/sap.ui.library.xsd" >
+
+	<name>my_theme</name>
+	<vendor>me</vendor>
+	<copyright>Some fancy copyright</copyright>
+	<version>1.0.0</version>
+
+</theme>

test/expected/build/theme.library.e/dest-css-variables/resources/theme/library/e/themes/my_theme/css_variables.css

@@ -0,0 +1,3 @@
+:root{--mycolor:#00f}
+/* Inline theming parameters */
+#sap-ui-theme-theme\.library\.e{background-image:url('data:text/plain;utf-8,%7B%22mycolor%22%3A%22%2300f%22%7D')}

test/expected/build/theme.library.e/dest-css-variables/resources/theme/library/e/themes/my_theme/css_variables.source.less

@@ -0,0 +1,5 @@
+@mycolor: #0000ff;
+
+:root {
+--mycolor: @mycolor;
+}

test/expected/build/theme.library.e/dest-css-variables/resources/theme/library/e/themes/my_theme/library-RTL.css

@@ -0,0 +1,5 @@
+/*!
+ * Some fancy copyright
+ */.sapUiBody{background-color:#00f}
+/* Inline theming parameters */
+#sap-ui-theme-theme\.library\.e{background-image:url('data:text/plain;utf-8,%7B%22mycolor%22%3A%22%2300f%22%7D')}

test/expected/build/theme.library.e/dest-css-variables/resources/theme/library/e/themes/my_theme/library-parameters.json

@@ -0,0 +1 @@
+{"mycolor":"#00f"}

test/expected/build/theme.library.e/dest-css-variables/resources/theme/library/e/themes/my_theme/library.css

@@ -0,0 +1,5 @@
+/*!
+ * Some fancy copyright
+ */.sapUiBody{background-color:#00f}
+/* Inline theming parameters */
+#sap-ui-theme-theme\.library\.e{background-image:url('data:text/plain;utf-8,%7B%22mycolor%22%3A%22%2300f%22%7D')}

test/expected/build/theme.library.e/dest-css-variables/resources/theme/library/e/themes/my_theme/library.source.less

@@ -0,0 +1,9 @@
+/*!
+ * Some fancy copyright
+ */
+
+@mycolor: blue;
+
+.sapUiBody {
+	background-color: @mycolor;
+}

test/expected/build/theme.library.e/dest-css-variables/resources/theme/library/e/themes/my_theme/library_skeleton-RTL.css

@@ -0,0 +1,3 @@
+/*!
+ * Some fancy copyright
+ */.sapUiBody{background-color:var(--mycolor)}

test/expected/build/theme.library.e/dest-css-variables/resources/theme/library/e/themes/my_theme/library_skeleton.css

@@ -0,0 +1,3 @@
+/*!
+ * Some fancy copyright
+ */.sapUiBody{background-color:var(--mycolor)}

test/fixtures/theme.library.e/src/theme/library/e/themes/my_theme/.theming

@@ -0,0 +1,27 @@
+{
+  "sEntity": "Theme",
+  "sId": "sap_belize",
+  "oExtends": "base",
+  "sVendor": "SAP",
+  "aBundled": ["sap_belize_plus"],
+  "mCssScopes": {
+    "library": {
+      "sBaseFile": "library",
+      "sEmbeddingMethod": "APPEND",
+      "aScopes": [
+        {
+          "sLabel": "Contrast",
+          "sSelector": "sapContrast",
+          "sEmbeddedFile": "sap_belize_plus.library",
+          "sEmbeddedCompareFile": "library",
+          "sThemeIdSuffix": "Contrast",
+          "sThemability": "PUBLIC",
+          "aThemabilityFilter": [
+            "Color"
+          ],
+          "rExcludeSelector": "\\.sapContrastPlus\\W"
+        }
+      ]
+    }
+  }
+}

test/fixtures/theme.library.e/src/theme/library/e/themes/my_theme/library.source.less

@@ -0,0 +1,9 @@
+/*!
+ * ${copyright}
+ */
+
+@mycolor: blue;
+
+.sapUiBody {
+	background-color: @mycolor;
+}

test/lib/builder/BuildContext.js

@@ -25,6 +25,25 @@ test("getRootProject", (t) => {
 	t.is(buildContext.getRootProject(), "pony", "Returned correct value");
 });
 
+test("getBuildOption", (t) => {
+	const buildContext = new BuildContext({
+		rootProject: "root_project",
+		options: {
+			a: true,
+			b: "Pony",
+			c: 235,
+			d: {
+				d1: "Bee"
+			}
+		}
+	});
+
+	t.is(buildContext.getOption("a"), true, "Returned 'boolean' value is correct");
+	t.is(buildContext.getOption("b"), "Pony", "Returned 'String' value is correct");
+	t.is(buildContext.getOption("c"), 235, "Returned 'Number' value is correct");
+	t.deepEqual(buildContext.getOption("d"), {d1: "Bee"}, "Returned 'object' value is correct");
+});
+
 test.serial("createProjectContext", (t) => {
 	class DummyProjectContext {
 		constructor({buildContext, project, resources, globalTags}) {

test/lib/builder/ProjectBuildContext.js

@@ -56,6 +56,20 @@ test("isRootProject: false", (t) => {
 	t.false(projectBuildContext.isRootProject(), "Correctly identified non-root project");
 });
 
+test("getBuildOption", (t) => {
+	const projectBuildContext = new ProjectBuildContext({
+		buildContext: {
+			getOption: () => "Pony",
+			getResourceTagCollection: () => t.context.resourceTagCollection
+		},
+		globalTags: {MyTag: "me:MyTag"},
+		project: "my project",
+		resources: "resources"
+	});
+
+	t.deepEqual(projectBuildContext.getOption("a"), "Pony", "Returned value is correct");
+});
+
 test("registerCleanupTask", (t) => {
 	const projectBuildContext = new ProjectBuildContext({
 		buildContext: {